Means-of-Production

View Original

Squarespace Websites: The Pinnacle of Design According to Hubspot

Squarespace Websites Feature Today's Top Web Design Elements

Okay, full disclosure here, Jeffery Vocell Sr. Manager, Product Marketing at Hubspot has written an excellent article that describes eight modern web design trends. It was not a promotion of Squarespace websites; he works for Hubspot after all. The website examples he used were from large companies like Uber, Wistia, and Medium.com. While reading the article, I was struck by how Squarespace has been leading these cutting-edge design trends for years. Full-width banner Images, large typography, hamburger menus, semi-flat design and card design pages are some of the design elements that have been inherently part of Squarespace templates for quite a while. Jeff's article inspired me to show you examples of these trends on Squarespace websites. Some are sites I've designed, and others are from Squarespace Specialists and Circle Members whose work I find exceptional.

It also occurred to me that you might want to know that your firm does not have to be Uber with it's $73 billion +/- market valuation to create a cutting-edge, design-forward website. Anyone can recreate these design styles using features found on Squarespace templates.

As website design continues to expand and evolve, every year we see new elements and styles emerge. Some elements when effectively utilized can help you to tell stories, highlight your portfolio, and explain your business. Other elements work to improve how content looks on a specific device, improving on the user experience. While it's not necessary to incorporate every element or trend that comes along, many have the potential to improve your visitor's experience vastly.

However, with so many options to choose from, the challenge becomes determining which ones are worth considering. Well if your using the Squarespace platform, here are eight essential elements of modern website design available for Squarespace websites that can improve your site's performance.

Squarespace Websites: Modern Website Design Elements and Trends

Squarespace is a comprehensive website design and hosting platform that is not only easy to use but incorporates template design to help you create effective websites quickly and easily. Regarding design, Squarespace websites are cutting edge, and the design functions include top website design elements that intuitively incorporate current trends. Let's look at eight design elements you can use to make Squarespace websites shine!

Element 1: Unique and Large Typography

Most companies use a particular font or typography to create their brand identity. Customers can identify them from their competitors immediately. In recent years, designers have received a more extensive selection of fonts to work with, making it easier for brands to more accurately identify themselves through typography. 

For example, The New Yorker is instantly recognizable thanks to their use of Adobe Caslon Pro. Other unique fonts like Blokletters-Balpen, are being used by startups and technology companies like Zero. 

Typography is one design trends that can be used to lead readers across a page. To go back to our example of The New Yorker, it uses typography and font sizes to guide readers from one section to another. 

Using typography can help to differentiate and identify your brand. It can offer subtle hints about who you are and what you do. Are you fun or serious? Informational or creative? Your font choice matters and can help to tell your story. When designing with typography, have your designer consider its applicability across browsers and devices.

Element 2: Large and Responsive Hero Images

Using Large Banner Images on your Website

Today, you don't have to go far online to find examples of “hero images.” These are large images that take up the page and eliminate the need to consider the concept of above or below the fold. By creating a page that focuses on a single large image, you can create a strong visual identity that encourages the visitor to scroll down to read more.

Large hero images are often placed in the background with text and other content overlaid. Regardless of the approach, large images can help you to visually tell the story of your business without having to rely on text.

Visitors on your site arrive from all over the web and using different devices to view it, whether it's a smartphone, desktop, or tablet, so you need to incorporate a responsive design to ensure an excellent user experience. Visitors can then enjoy the same experience regardless of their choice of device.

Element 3: Background Videos

Using videos that play in the background adds interest to a page. They can tell a story, and significantly reduce the amount of content needed to explain your business. When you land on a homepage, a large video automatically starts playing in the background. Click on the call to action button, and you're taken further into the site where you get a more in-depth look at the company. This background video is a great way to engage visitors to click-through to your primary content.

Background videos engage visitors as soon as they land on your page. They are a branding element that helps the visitor to understand your business without reading a single piece of text. A video is processed by the brain 60,000 times faster than copy. Videos can also be consumed very quickly and effortlessly, another significant advantage when seeking an excellent user experience.

Element 4: Semi-Flat Design

Back in 2013, Apple shifted to a flat design. This means that any element does not give the perception of three dimensions, for example by using shadows. Flat design is more straightforward then more complex designs. It's clear and easy for users to understand and also loads quickly on websites without complicated elements. 

Following Apple's lead, many other large and small businesses have shifted to a flat design concept. However, many businesses have added subtle shadows and dimensions offering an element of depth and providing a semi-flat design.

Flat design helps your visitors to understand your content quickly and adding some subtle elements of depth to your design, without overdoing it,  can bring it to life. Regardless of whether your site uses utterly flat design elements, or you add subtle shading to add depth, make sure you keep your design consistent, so you don't confuse your visitors.

Element 5: Hamburger Menus

Many websites you visit, often have a long menu of options to choose from. This type of design makes navigation easy and can get you to the information you're seeking quickly; however, it takes up a lot of real estate on the page. 

This can be solved by using a hidden, or hamburger menu. This was commonly used in web applications before making its way to web design. Even Google Chrome uses this hamburger menu design.  It's called a “hamburger” menu because it consists of three lines that are stacked on top of each other and looks like a stack of hamburger patties...get it?

All of your website pages should have a clear navigation path for users to make their experience more comfortable. Removing large, busy navigation, like menu lists makes user experience clean and distraction free. This improved user experience can translate into higher conversion rates as it's more likely that your visitor will find and act on the information that they're seeking. 

Element 6: Large Product Images

You've probably noticed that more B2B websites are starting to use large product images on their sites to highlight different features of their products. This isn't merely a coincidence. Larger product images can help designers to highlight various features of products more efficiently and effectively.

This design approach can help to highlight product features by providing the opportunity to focus on the most valuable pieces. Large images are also scan-friendly. They can help visitors to generate a solid understanding of what the different features do by conveying them through images instead of words.

Element 7: Card Design

Pinterest gave rise to the popularity of card design among both designers and marketers. Individual cards can efficiently visually distribute information so the visitors can easily consume small bits of content without feeling overwhelmed. 

By breaking page content into rows of cards, allows users to pick and choose which pages they want by text and more importantly, the image. Cards can help keep your blog or homepage feeling clean and organized without needing a lot of text. 

Card design is growing in popularity with both B2B and B2C websites because it delivers easily digestible chunks of information creating a positive user experience and faster clickthroughs. Using this design style can help you highlight multiple portfolios or solutions side-by-side. Once again, it's also an excellent design format for your firm's blog.

Remember, cards should be responsive, so it is viewable on any device. As a screen size gets smaller or bigger, the number and size of cards shown should adapt automatically. All Squarespace websites incorporate responsive design right into their templates making this design style easy to implement.

Element 8: Short Product or Feature Videos

Along with background videos, companies are beginning to use more video elements on their websites. From short product videos, to feature videos and explainer videos, it's a great way to give visitors are a real sense of a product's capabilities. Videos can bring solutions to life while not overwhelming your visitor with a long experience. 

According to Inc. Magazine, 92% of B2B customers watch online videos, and 43% of B2B customers watch online video as part of the researching products or services for the business. That's why it's crucial for companies to create videos that explain their products because it is an influential step that can help the buyer's decision-making process.

Short videos give prospects the ability to understand value without watching a long, in-depth experience. Both types of video do have value, but shorter videos allow for a quick understanding and are best used as a top of the funnel element.

Now Its Your Turn
Squarespace Websites allow you to incorporate all of these design elements to help you create the best user experience possible for your visitors and customers. Even Hubspot seems to recognize the design value that Squarespace offers. Creating a Squarespace website allows you to adapt your design as trends change and new elements become available. It's a flexible platform that focuses on design in a way that will enable you to quickly and easily adapt your site to the latest trends in design.

Additional Articles On Building A Squarespace Website

About Michael Conway

I'm the owner of Means-of-Production, a marketing firm that builds Squarespace websites. I design sites that help you get found online, attract better prospects, and capture leads. If you need help with a Squarespace site that you're working on click here to view my calendar and schedule a call. I am a Squarespace Specialist and Authorized Trainer. Together we can improve your site so that it grows your business.