14 Dos and Don’ts of Using Website Templates in 2022

Like internet users today, website designers and owners are impatient. They want to make beautiful websites in just a few hours. Luckily, the best website templates can help you do so — with minimal experience required. Using pre-built templates from a marketplace is an excellent way to save time and avoid making design errors. However, it’s essential that you learn how to use a website template correctly to avoid poor results. 

In this post, we’ll share how to use a website template successfully. Then, we’ll discuss seven common mistakes to avoid when using pre-built templates for your website. 

How to Use a Website Template

1. Match your branding.
2. Pick a unique color scheme.
3. Choose fonts wisely.
4. Design for scannability.
5. Be consistent.
6. Keep it simple.
7. Update as needed.

1. Match your branding.

Your website is an opportunity to make a statement about your brand identity. When customizing your template, you don’t want to just look different for the sake of looking different from the default template or your competitors. By bringing your company’s unique branding into your digital presence, you’re reinforcing what makes your business unique. 

Obviously, your first step is adding your business name, tagline, logo, and other aspects of your brand. Be sure to replace placeholder copy with text written in your brand voice. The same goes for stock images, any icons, animations, and so on — these are all invaluable opportunities to tell your brand story, so don’t waste them!

2. Pick a unique color scheme.

Picking your website’s color scheme is one of the most important design decisions you’ll make. It can impact your site’s accessibility, brand identity, and user experience. A Loyola study revealed that using a signature color can even result in an 80% increase in consumers’ recognition of your brand. 

Instead of sticking with a template’s default color scheme, choose new colors for your website. When doing so, consider color theory (how colors and visuals interact with each other to create an aesthetically pleasing design) and color psychology (how colors can change the perception of your brand psychologically).

Depending on your brand’s color palette, it’s also helpful to look at successful blue websites, orange websites, black and white websites, and other examples for inspiration. Remember: it’s most important that your website feels like a natural extension of your brand. Color contributes greatly to that, so choose your palette carefully. 

3. Choose fonts wisely. 

Website templates and themes provide multiple font options. However, just because they come with dozens of fonts doesn’t mean you should use them all on your site. Instead, stick to two or three fonts and create a visual hierarchy using different font sizes.

Your font choices should also be accessible, meaning they have sufficient color contrast and are legible across multiple device types and screen sizes. User experience is your main priority, and users are going to quickly leave a site with an overly complicated, tricky-to-read font. The result is a high bounce rate and important information getting passed over. 

To learn more, check out The Beginner's Guide to Typography in Web Design.

4. Design for scannability.

Even though you put a lot of thought into your content (as you should!), some visitors will skim it. In fact, research reveals about 80% of people only skim online content. Therefore, you’ll have to design your site with skimmability in mind. That will require you to:

• limit the amount of text
• use negative space
• incorporate images and videos
• create a visual hierarchy
• select readable fonts

By incorporating these best practices into your site, you’re giving your content the best chance it can get to be absorbed by readers. 

5. Be consistent.

Because of how easy it is to customize most templates with drag-and-drop builders and other tools, it can be tempting to customize each and every page. In this case, however, less is actually more. If you do customize each page, your website will appear inconsistent and disorganized instead of original.

Backgrounds, color schemes, typefaces, and even the tone of your writing should be consistent across all of your site's pages to reinforce your branding. That doesn’t mean every page has to look the same. In fact, specific types of pages, like landing pages and blog posts, should have different layouts but use colors, fonts, and other elements in a similar way.

The result is a website that feels intuitive to your brand and allows visitors to easily find what they’re looking for without getting distracted by a variety of different design elements.

6. Keep it simple.

Another result of the easy customization options is that you may feel tempted to overload them with animations, images, videos, and other widgets. When this occurs, your website will have a  complicated layout that overwhelms visitors instead of informing and delighting them.

Instead, try to present visitors with the clearest information and options. Simplifying your navigation and making your CTAs stand out are great starting points. Your copy also contributes to this: the more concise, the better. 

7. Update as needed. 

Even if you choose the best template ever and customize it to perfection, you should be prepared to update to meet your visitors’ needs and expectations as they evolve. Furthermore, as new web design trends pop up and the technology you used in your original site becomes antiquated, you’ll have to pivot. The list of reasons why companies redesign their website goes on and on, but the point is the same: at some point, updates will be necessary.

This may require you to:

• perform A/B tests
• implement strategies that work for competitors
• gather and implement feedback from your customers
• audit your site

Luckily, when it’s time to give your site a makeover, you don’t have to navigate the process alone. Check out our ultimate guide to website redesign strategy, and learn more about what to expect by perusing these statistics. 

Mistakes When Using a Website Template

1. Choosing a Template That Doesn’t Meet Your Needs
2. Choosing a Template with Unresponsive Elements
3. Using a Free Template with Branding
4. Ignoring User Reviews
5. Choosing a Poorly-Coded Template
6. Not Customizing an Overused Template
7. Disregarding the Rules of Good Design

1. Choosing a Template That Doesn’t Meet Your Needs

"Give me six hours to chop down a tree, and I will spend the first four sharpening the ax,"  Abraham Lincoln supposedly said. The meaning of this quote can be applied to website design: choosing and preparing the proper tools for your site is vital. This is particularly true of templates. A website template is the foundation of a site. That means, you need its design and functionality to align with your website needs. 

Here are some factors to consider when evaluating website templates:

• What's your budget?
• Do you need a template or theme?
• To what extent is this template customizable?
• Does this type of design reflect your brand personality?
• Is this template responsive?

Pro Tip: HubSpot now has a theme marketplace where you can browse through catalogs of free and paid themes. 

How to Fix This: 

Searching for the pre-built template with the specific layouts, elements, and compatibility you need takes time and patience — and, sometimes, budget in the case of premium templates. But it will be well worth the investment if the template provides the design and functionality you want.

2. Choosing a Template with Unresponsive Elements

The best website templates provide users with an excellent experience whether they are on mobile or desktop. Considering that mobile devices accounted for nearly 57% of web page views worldwide in August 2021, having a responsive website is no longer a nice-to-have — it’s a must.

Nowadays, almost all pre-built templates and sites are advertised as responsive. However, some have non-responsive elements (such as text and shapes) that do not adjust based on screen width. Others have non-responsive layouts with fixed elements, like a fixed navbar, that will not be scrollable when the viewport becomes narrower than the page content, like on a mobile device. Luckily, there’s a workaround that can help you find the perfect responsive theme. 

How to Fix This: 

When previewing templates, try resizing the browser window on both your desktop and mobile. If the content adjusts to fit the screen size (images, columns, and other elements might get smaller, or stack on top of each other), then you know it’s responsive.

Here’s a look at a responsive template by Astra when the browser window is resized to about 650px wide:

Image Source

3. Using a Free Template with Branding

A free template doesn't automatically mean poor quality. In fact, some of the best website templates are entirely free to use. However, a free template often displays the logo or other branding of the theme developer, which can make your site seem less professional.

Worse still, free templates can include malicious code. Nulled themes, which are copies of premium WordPress themes that have been modified and made available for free, are a particular security risk.

How to Fix This: 

In some cases, editing the branding of the theme developer is as simple as clicking ‘delete’ — but make sure you are not violating guidelines by doing so. If you’re using a free template, you may be required to include the developer’s branding. Sometimes you can avoid this by simply purchasing a paid version of the template. 

Or, if malicious code is what you’re worried about, use a third-party maintenance service that offers tools to scan themes and templates for any malicious code so you can ensure it’s safe before installing it on your site. For example, WordPress Malware Scanner by MalCare will let you scan your site for free.

4. Ignoring User Reviews

Most marketplaces selling pre-built templates allow customers to leave reviews. You’ll want to check these before buying a template for your site. If there are many one-star ratings, for example, then there may be serious flaws or limitations that would also frustrate you.

ThemeForest is the largest marketplace for themes and templates and allows customers to rate products they’ve purchased. When searching for templates, you can filter by star ratings and by sales to improve your chances of finding a good template.

How to Fix This: 

The best website templates boast plenty of five-star reviews, so do your due diligence to figure out which templates are worth your time and which are going to make things more complicated than they need to be. You can also use a marketplace that features customer reviews to sort through the options and filter by ratings. 

Image Source

5. Choosing a Poorly-Coded Template

Most pre-built templates for WordPress, Drupal, Shopify, and other platforms will be coded to the highest standards. But some won't, especially if the marketplace or directory doesn't have strict and in-depth review processes for its templates. That might harm you in the long run if, for example, your template isn’t search engine optimized.

How to Fix This:

To ensure your template is lightweight and up to other coding standards, we recommend that you choose an eco-friendly template for your website. Once again, good reviews are a green flag. 

6. Not Customizing an Overused Template

Templates come with pre-styled content and components to save you time and development resources, but that also means the sites created with them tend to look the same out-of-the-box. When either a template or framework becomes too popular, you have to ensure you’re customizing it or risk looking like most websites on the internet: pretty but not unique.

And if your website looks like everyone else’s, you risk losing visitors who came to your site to see what your company uniquely has to offer. 

For example, for a blog post about Squarespace templates, web designer Paige Brunton browsed through about 100 photographer websites made on Squarespace and noted that the Montauk template is widely used — and under-customized — by photographers so their sites looked very similar.

How to Fix This: 

There are two potential fixes: you can heavily customize the template, or pick a less commonly-used template that’s still responsive, well-coded, and highly rated. 

Image Source

7. Disregarding the Rules of Good Design

Thanks to a meteoric rise in low-code and no-code development platforms as well as pre-built templates, people with limited coding skills and even non-coders can create websites. However, while you can now create a website without coding, you can't disregard the rules of good design.

Pre-built templates are professionally designed, but when users customize them, they can substantially alter the design. Customizing templates to fit your unique brand is essential, but website design guidelines like visual hierarchy, navigability, and consistency must be followed. 

How to Fix This: 

Luckily, it’s possible to learn design principles and best practices quickly. Take a look at our guide, 9 Guidelines & Best Practices for Exceptional Web Design and Usability, to get a more thorough understanding of what good design looks like. 

Simplify Site Design with the Best Website Templates

Website templates and low- and no-code tools have revolutionized website design. People with little to no coding skills can now create beautiful websites — but they can also make mistakes that pose risks to the functionality, security, and SEO of their sites. Avoiding the seven mistakes and following the seven best practices above can help ensure your website is not just pretty — but high-performing, secure, and SEO-friendly.