10 Design Tips For The Best HubSpot Templates

Websites have come a long way…gone are the days of being created in Adobe Flash with corny fonts and animations. Smart and functional design is now essential, as this represents the face of your company and is the first thing customers encounter online.

If you use HubSpot, you’re in luck because their Asset Marketplace is filled with beautifully designed website templates that follow best practice for every need. 

In this blog, we’ll discuss why you want to prioritize design when building or selecting your HubSpot templates for use in the HubSpot CMS — or any other content management system.

10 Tips For Your HubSpot Templates

1) Keep it short and sweet

Try to not overload copy on your site.

Work with a strategist & copywriter to help write out the story you are trying to tell in a brief, concise way. Headlines should be short with vital information that pulls the customer in to browse the site more.

For example, see Billie’s header below. It uses the offer to draw the customer in and gives them a reason to look through their products. 

2) Storytelling with visuals

Humans are visual creatures.

Thus, imagery on your website should depict the story that words can’t describe. Depending on your brand, you might use illustration more than photography. For complex services, it might be useful having a more abstract approach like Mailchimp:

If your business is a product, then it makes sense that photography carries out the messaging. Show, don’t tell. Well…you can tell, but going back to the tip above, keep it short and sweet. 

Glossier is an e-commerce brand that sells minimal makeup cosmetics. They focus on natural beauty and would be an example of a brand that relies on high-end photography.

3) Where’s the CTA?

Your website should encourage action to take place.

A CTA (call-to-action) encourages the customer to actually do something. This could be:

• Make a purchase
• Download educational content
• Contact Us

Best practice for CTA placement is at your prospects’ desire point(s). For example…

• Above the fold: It makes sense to place a CTA above the fold on a page whose product or service is straightforward and familiar…or free! That means either your users already know the value they’ll get when they take action, or they’re not taking financial chances on your offering.

• Further down the page: For purchases that

  require a heavy commitment (in terms of money, time, or comprehension), your prospects will likely want to read your entire page before committing, so placing your CTA towards the bottom in addition to other places on the page, works well here.

Best practice for CTA placement is at your prospects’ desire point(s). For example…

Check out Frank Body’s CTAs here:

They have CTA’s on the nav bar, in the main header and a pop-up where you can fill out a form to subscribe to their newsletter.

4) Create a design system

People feel safe in familiar settings.

If you use a website template that has modules and a cohesive design, it feels more balanced and professional. Let’s use the Beats website as an example:

The CTAs messaging is consistent on each product page. The button placement is the same and the copy is simple, clear and to the point with the word…’Buy’.

Reinforcing the CTA’s familiarity is something that should be applied in the general design of your HubSpot templates. 

5) Less is more

Simplify the navigation – too many options confuse customers.

Try to have less than 10 options on the navigation. This concept is known as Hick’s Law, which basically says the time a person takes to make a decision, is directly linked to the options they have. So the more options they have, the more time it takes, possibly then overwhelming the customer to the point of no decision at all.  

Make the journey easy, so they can solve their problem faster and you can make the sale. Check out this simple menu from Glossier:

In this case for an e-commerce company, it makes sense to group the product in sections, and from there have a submenu that has the most popular products. If the customer wants to look for more, they can click “View All” or if they have the name of the product, they can use the “search” option and type it out. 

 

6) Always on the go – mobile version is a must

It’s amazing how technology has evolved.

The best thing about HubSpot templates is that they are optimized before they enter the Asset Marketplace.

What this means is that they’re designed with ‘responsivess’ in mind, and with the Internet at the palm of our hands, people are more mobile than ever. Just check out these stats from Statista:

Your website templates must be mobile friendly, in fact according to this study 72% of Internet users said they would likely revisit a site if it is. 

This is important for not only creating a user-friendly experience, but also from an SEO perspective. 

Google actually loves responsive design and rewards websites with visibility. About 70% of the first page results are mobile friendly websites. Remember, people are always on the go. 

 

7) Make SEO a priority

SEO stands for ‘search engine optimization.’

This is the process of making it easier for people to find your website and content by designing it so Google approves.

It’s important to understand that there are also design elements that heavily impact your SEO:

• Content Format
• User Experience (UX)
• Overall Design
• Branding

SEO is important — so be sure to review each element of your website to ensure your customers can find you!

 

8) Be careful of slow loading pages

Slow-loading pages should not be something that’s taken lightly.

It’s actually the number one reason a website would have a high-abandonment rate. According to this study around 40% of users abandon a website that takes more than 3 seconds to load.

Let’s compare it to something else… do you like those long, slow lines at Disneyland? Or how about waiting for a meal at lunch? The answer is no – people are not big fans of waiting. 

Here are some helpful tips to speed up your load times:

• Export your images to a smaller, friendlier size
• Reduce HTTP requests
• Minify and combine your files

 

9) Branding and your website

Your website should be an extension of your brand.

When using a HubSpot template, be sure that all the colors, fonts, photography and illustration follow your current branding guide. If you don’t have a guide, then maybe consider creating one for your company so you have a blueprint on how to keep things consistent and recognizable.

Studies have shown that color increases brand recognition.

This means if your customer associates with your brand via multiple platforms (website, social media, Podcast, YouTube, etc.) they will likely remember your colors and logo. So avoid using different colors, as this could confuse them.  

Look at ‘Then I Met You’ for example:

The brand ‘Then I Met You’ uses light blue and their products have an ingredient that creates that orange color. So for the website (following their style guide) they used the same blue color scheme that compliments the product photography and they also use the same headline font that’s found on the packaging. 

Think of your website as the product or service you are offering. 

 

10) Use bullets

This is similar to the first tip ‘keep it short and sweet.’

Bulleted lists are perfect because they are visually more attractive than a long paragraph. People want information fast, so making a list of the benefits of your product/service helps the customer make a purchase by making the information more digestible. 

 

Conclusion

That wraps up our post on ‘10 Design Tips For The Best HubSpot Templates.’

If you found this article helpful, check out all our HubSpot CMS posts below:

If you are a HubSpot user and want to master the platform, feel free to contact us with any questions and book a Free Chat with one of our HubSpot experts.