Website design best practices for 2021
In 2021 almost anyone can get a website up and running with ease using many of the page builders on offer.
But that doesn’t guarantee it’ll be effective for your business.
Your website is your 24/7 storefront. Customers form opinions quickly, so it’s important to make a good first impression with appealing, intuitive and effective design.
If you had a physical storefront like a clothes shop you wouldn’t want it to seem boring or unfriendly. Piercing fluorescent overhead lights and unforgiving concrete floors are cost-effective and easy to install, but they probably won’t give your customers a great first impression, much enjoyment, or elicit recommendations.
If you care about your customers and take pride in your space, you can create an environment that people want to support. You won’t just be any old clothes shop. You’ll be an important part of the neighbourhood. A daily destination.
Think about your website’s design the same way.
Let’s look at 11 web design best practices that will help ensure your website’s success in 2021.
1. Consistent branding.
Your brand is the foundation of your business, it’s important to keep branding consistent across all of your customer touchpoints. That includes your website.
Your logo, colour scheme and iconography should remain consistent. The same holds true for your brand voice and key messaging. You want to reinforce your value proposition, aesthetics and tone across your website.
Make sure to build off the foundation you laid down during the creation of your brand. A focus on consistency will enable your marketing efforts and help build brand equity.
2. Clear CTAs
Your calls-to-action (CTAs) motivate your customers to convert, whether by purchasing your products, subscribing to your content or booking a call or appointment.
So, how do you make sure your CTA is as powerful as it can be?
Let’s use Uber as an example.
There are a few things to take note of here.
- What’s being offered is immediately clear: The messaging is bold – sign up to drive and get paid. The messaging sets the stage for the CTA.
- Potential objections are addressed right away: Learn more about driving & delivering
- Bold, obvious CTA in a highly visible location: The CTA itself is instantly obvious. It’s a solid black against a white background and unmistakable.
Spur your users to action with a powerful CTA and you’ll see stronger results.
3. Intuitive navigation
Your website might give your users a solution to complex problems or access to lots of helpful content. But it shouldn’t be a treasure hunt. Your navigation and buttons should be clear and obvious so users can explore your content intuitively.
There are a number of ways to accomplish this:
- Clear language: It’s more effective to use simple, recognisable terms like “About”, “Services”, and “Contact” in your navigation instead of more unique language. If you are going to use unique language, there should be a valid reason. Don’t use unique language just for the sake of doing something different as it could confuse your users.
- Tailor your navigation to your content: You might only need a few navigation links if you have a website with limited content. With heavier content, you might need more detailed navigation. Descriptive mega menus give your users a clear path to find the information they need when there’s a lot of available content.
- Breadcrumbs: Breadcrumbs track and display where a user is on a website. They let a user easily return to a previous page by retracing their steps. Breadcrumbs are especially useful for content-heavy websites and e-commerce shops.
If you make it easy for users to navigate your website you’ll give them a deep, engaging experience, and a clear path to convert.
4. Clean design
It’s important that your website is easily scannable and your content is digestible.
It’s a good practice to be sensitive to your user’s cognitive load. You don’t want to overwhelm people with an explosion of colours, images and copy. Instead, make your website easy and enjoyable for them with clean design and meaningful (and only meaningful) content.
One way to do this is to establish a visual hierarchy. It’s the arrangement of all the design elements of a website in order of importance. For example, if a headline is large, contrasting in colour and centred on a page it immediately comes across as being more important than something smaller, not uniquely coloured, and offset.
It’s also important to use white space effectively. White space is the ‘negative’ space between the layout elements, paragraphs and visual components. Designing with white space in mind will make your content more scannable, digestible and easier on the eyes.
Stories are the most common way that humans make sense of the world and connect with one another. We all have insatiable appetites for good storytelling.
The very best stories deliver emotional impact. That’s one of the primary ways they break down barriers to engagement and understanding. That’s why you can connect more effectively with customers by leading with storytelling rather than with facts. And websites, in particular, can benefit by integrating brand storytelling and narrative techniques.
As an example: imagine a group of people traveling across rough waters. They’re on a quest to change the world but so much of what lies ahead of them is unfamiliar. And the journey is long and potentially treacherous. They need someone who knows those waters to help guide their ship away from danger and to safe harbour across the sea.
6. Mobile-first design
Designing for mobile should be a priority, not an afterthought.
Understanding how your target audience engages with your content makes your website effective, enjoyable, and easy. One way you can optimize your website is to build mobile-first and mobile friendly.
There’s some restrictions when you’re designing for mobile. The screen isn’t as big, people interact with content differently than they do on a desktop, and so on. But, these restrictions can be a good thing. They make for a leaner, more digestible website.
With mobile-first design, you can help to optimize every user experience, no matter how they engage with your content.
Accessibility means designing websites and applications that can be used by individuals who have visual, motor, auditory, speech, or cognitive disabilities.
Here’s a few examples of how to ensure your website or application is accessible:
- Use contrasting colours: People with visual impairments could find it difficult to discern text from a background colour if there isn’t enough contrast.
- Use more than colour to communicate visual cues: You can use text labels or patterns so those with visual challenges can discern information. Other visual cues, like bold or underlined text or using shapes and different sizes, can also be effective ways to deliver your content.
- Support keyboard navigation: People with motor disabilities, visual impairment, and other disabilities are often dependent on a keyboard to navigate content. You can “scroll” through interactive content, like links, buttons, and text fields, using the “Tab” button on a keyboard. It’s important to put key information into these interactive features and not just in your copy so that users with impairments can engage with your content.
If you’re unsure where your website stands in regards to accessibility, use an accessibility auditing service (there are lots of them online). They’ll determine whether your website works with assistive technologies so you can make any necessary changes.
8. Prioritise search engine optimization (SEO)
If you integrate SEO best practices into your website, you’re more likely to land a high-ranking placement on search engine results pages (SERPs) and get more website visitors.
You can use targeted keywords throughout your website to do this. Search engines track sites for relevant keywords searched by users. The more effectively your content speaks to the content your users are after, the more organic traffic you’ll land.
Here are some additional ways to optimize your website for search engines:
- Responsive design: Designing responsively isn’t just a web design standard, it is rewarded with better SERP rankings by Google.
- Relevant header tag (H1): The header tag (or H1) will be the headline of a page or the title of a post. Search engines target H1’s for keywords, so make sure that you’re including the most relevant information in your headline. You don’t want to bloat your headline with keywords simply for SEO performance. Remember your website is for real people, so finding a balance between SEO performance, clarity, and style is key.
- Proper title tags and meta descriptions: Relevant title tags and meta descriptions help search engines understand the content on a page and index it appropriately. A page’s title tag and meta description are shown whenever that page appears in search engine results.
- Use short descriptive URLs: A simple URL that’s readable for humans (not a long string of numbers) will often contain keywords.
- Acquire relevant links from other high-quality websites: If popular, high authority websites link to your website, there’s a good chance those links will bring new users and increased overall traffic.
Integrating SEO principles in your website will increase the organic traffic, potential customers, and visibility you receive.
9. Monitor site speed
Site speed is an important part of the overall user experience for any website.
A slow website doesn’t just frustrate your users. It can have real consequences for your business as users will often abandon a slow site. Google also considers site speed when determining your search rank, so if you want to be visible you should make sure your website is fast.
There are a number of free utilities, such as Pingdom and Website Audit, that can quickly provide you site performance metrics. They measure key performance indicators like load time, page size, and image compression.
A website with lots of design features will be slower than a leaner website. Multiple typefaces and font sizes are an example. Loading a library or framework for animations can also make your website slower. It’s important to judiciously consider each element of design so you don’t slow your website down unnecessarily.
Heatmaps present visually striking feedback on where users are spending time on your website. They track your users’ mouse movements so you can identify the areas that receive the most attention. Below is an actual heatmap. Red marks are high traffic zones, blue marks are areas that don’t receive as much attention.
With this information you can:
- Use data to optimize your design: You can capitalize on the elements of your design that are attracting users and improve those that aren’t. Heatmaps let you test real data against speculative theory or hypothesis so you can make sure you implement the most effective design choices.
- Optimize CTA placement: You can place your valuable CTAs in the locations that receive the most traffic, increasing the likelihood of conversions.
- Refine your navigation: You can monitor if your navigation buttons are working effectively. If they aren’t attracting user attention, it’s a good design practice to make them more obvious and intuitive.
With a heatmap, you can make improvements with the confidence that these improvements are data-driven.
11. A/B Testing
A/B testing is a method of comparing different versions of a webpage to see which one performs the best for a given goal. This could include assessing how effective a CTA is, what headline works better or what images and other visual content elicit positive responses.
Collecting the right data takes the guesswork out of website optimization. You can make decisions based on statistical data, which is always a good design practice.
Here is a list of the best A/B testing plug ins for WordPress
- Nelio A/B Testing
- Google Optimize for WordPress by Monster Insights
- Marketing Toolkit by OptinMonster
- VWO (Visual Website Optimizer)
- Split Test for Elementor
- Popups, Welcome Bar, Optins and Lead Generation Plugin by Icegram
- A/B Testing for WordPress
There’s a lot of information here, but the most important takeaway is that if you want business results you can’t just build a website and then leave it. Your website requires ongoing optimizations and improvements to serve your customers and company. This is particularly true if you’re going through a full rebuild.
Here are three of the key things to remember, whether you’re making tweaks to your site, refreshing it, or building it from the ground up:
- Ensure that your branding and key messaging inform your design choices. Starting with a defined brand gives you clear guidance for all the choices that follow.
- Make design choices that are user-friendly. They’ll help make the user experience as clear, engaging, and easy as possible. That will pay dividends in conversions and brand value.
- Use data-driven analytics to take the guesswork out of optimizing your design. Understanding hard metrics around site performance helps you adjust the experience to deliver better business results.
At Digital One Agency, we can help you with every step of the website design process. From planning out your website’s design to delivering ongoing maintenance, optimisation and updates, our team has the expertise and skills to help you get results.