17 web design best practices: deliver amazing UX

Does your company have a website that helps you conquer more leads and customers? Does it represent your brand identity well? If you answered no to one of these questions, it's time to evaluate how to apply web design best practices to improve your website performance.

If you don't own a website, that's the opportunity to learn how to create an effective one. Nowadays, developing a digital presence is no longer a differential, but a necessity, which helps to build credibility and makes it easier for potential customers to know and get in contact with your business. 

But, it's important to be aware of every detail, otherwise, a poorly constructed website can have a bad effect on your company image.

If the pages are hard to navigate through, don't reflect the brand's identity, and lack information, users feel discouraged to continue at your website and may even give up on finishing a purchase. 

Web design has everything to do with selling more online, increasing the site performance rates, such as click-through, time spent on each page, and turning leads into customers. 

1. Develop a simple web design#

Too much information on a page can be overwhelming to the user and sometimes makes it confusing to navigate through. A simple design that highlights the main information, with clear and direct texts can help you guide your website visitors to know where to click and how to find what they are looking for on your page. 

Does it mean that you need to have a completely minimalist layout? No, but be careful with the amount of information and visual elements you add.

Consider the type of page you are building. A landing page, a blog, a product page, or a form, for example, have their specific needs because they serve different purposes. It's important to keep that in mind.

2. Organize elements to optimize usability#

To provide intuitive navigation to everyone who accesses your website, organize the elements following a visual hierarchy, which means positioning them to give focus to the main texts, buttons, and the CTA. 

Each page must be designed considering what is the next step you want the user to take, for example, to subscribe to your newsletter, download an ebook, or buy a product. Adjust the size of the images, graphic elements, and words considering it. You can also put some words in bold, or in a different color. 

Think about the user experience, they must be able to identify what's the main message even when scrolling fast through it.

For example,  if you have created a special discount for the leads who sign up for your newsletter, an effective way to draw attention to this message is by putting it in bigger font in the center of the page. While information like links to social networks and contact details can go in the corner or in the footer

3. Make an easy to navigate interface#

User experience is always a priority, if someone accesses your website and feels lost, unable to find any information, the chances that they are going to leave your page in the first few seconds is high.

Besides, you will leave a bad impression, transmitting that your brand doesn't know how to communicate well or doesn't worry about their customers. 

Build an interface that allows the users to immediately see where to go next. For example, with a menu bar that redirects with as few clicks as possible to get to the page they are looking for. Some web design best practices to help with that are: 

• Build a primary structure to your website with a header and footer.
• Insert a search bar at the top of each page.
• Use the same labels in the same location on every page to make it simple to identify the main buttons. 
• Use clear language to guide navigation, such as "About", "Services", and "Contact".
• Leave breadcrumbs to allow the visitors to easily return to previous pages.
• Don't put many options in the menu, the maximum should be 7.
• Insert "back-to-top button". 

4. Keep cohesion among website pages#

When someone is visiting your website, they need to see there is a connection between the pages. It helps to have integrated communication, and also to reinforce your brand's identity.

You can do that by using the same fonts, color scheme, and adding the same graphic elements. Having a brand manual will be very useful at this step, allowing you not only to keep consistency throughout the website but in every graphic design produced, like flyers and business cards. 

Cohesion is also about setting a tone of voice for your brand, the texts also matter. We can see brands that have a more informal approach and make it part of their highlights while others are more formal, for example, b2b companies. It all depends on who your potential customers are. 

5. Don't forget responsive design#

The number of people who mainly surf through the internet on their mobile devices, instead of using desktops, is only growing, responsive design is essential if you want users to access and feel attracted to navigate on your website. 

It's very unpleasant to open a page on the smartphone and have to zoom in and out all the time because the design didn’t consider user experiences on mobile devices. This can affect your SEO, and make people quickly abandon your website.  

According to researches,  93% of people have already left a website because it didn't open properly on their devices.

6. Structure your design considering accessibility#

A user experience-oriented website must take into consideration people with disabilities and how it affects them when browsing through your pages. For example, for someone with visual impairments a font too small, cursive, or low contrast can make it very difficult to read. 

The Web Content Accessibility Initiative (WAI) has a guideline that will help you to understand the main points to be aware of when constructing your website design. 

To improve accessibility, you should: 

• Add alt texts to the images.
• Enable users to enlarge font sizes.
• Balance contrast and colors.
• Incorporate keyboard navigation.

7. Define colors and typography that match with your visual identity#

The colors and font you choose to insert in your website pages affect the way people feel about your brand.

For example, warm colors such as yellow and orange can grab attention, while red is known for increasing appetite. Take a look at some restaurants’ logos, how many of the ones you know use red? A classic example is McDonald’s.

Cool colors like blue and purple may express sadness, but also have a calming effect. Have you ever realized many meditation apps, like Calm, use these colors?

The font type also says a lot about the kind of image you desire to pass,  higher case fonts may draw more attention, but it's important to be careful, you don't want your leads and customers thinking you are screaming at them.

Cursive letters may be used in some details but can have difficult legibility. Serif typeface makes it easier for the eye to travel along the line and Sans is frequently used for children.

It's necessary to consider the image and message you intend to convey, and if the colors and fonts are in sync with the rest of your visual identity, once more it's about being coherent and showing consistency.

8. Include social media buttons#

Social Media is an important means to connect and engage with your lead and customers, and also a way to quickly know more about your company. To stimulate people to visit your social media pages, add buttons linking to them on your website.

You can use the icons that refer to each one and position in the footer, for example. If it's a blog post that you desire to encourage people to share, put it at the beginning of the page. But, make sure your profiles are updated and full of good content, you don't want to direct them to an empty and outdated page. 

9. Use design to stand out your CTAs#

The layout of a page must be constructed to guide the user through the call to action, highlighting what they should do. The user needs to visualize quickly what is the next step to make. The CTA must pop up. 

To do that, you can use images to highlight, insert graphic elements, animations, videos, and also apply a different font from the rest of the text, changing the size and the color. But, be careful not to add too many elements that will confuse the reader, be clear and assertive. 

10. Insert white spaces#

Too much information on the same page can make it very confusing for the reader to skim it. A strategy to help the reader focus on the main information and not feel overwhelmed by several elements is adding white spaces on the page. 

White space can be defined as the space you insert between paragraphs, images, and other visual components on your page.  It minimizes distractions, highlights calls to action and gives the visitor room to breathe, time to process the information.

11. Use familiarity to stimulate actions#

Some buttons are going to appear in several of your pages, for example, "services", "add to cart", "buy" and "about us", use the same words and visual elements to insert them on each page. 

Take a look at websites like eBay, and Amazon, they don't change these elements in different pages. Instead of using, for example, "insert into your cart" in one page and "add to cart"  in another, it's an equal buttom. 

That's for a good reason, it helps to make the users familiar with the  CTAs and drives them to complete what it's desired. Assertive and as clear as possible messages always must be on your checklist when designing a website. 

12. Make sure design elements won't affect site speed#

When you add too many images, animations, and videos to a page, it can slow down the speed load of your website, and that's something you need to pay attention to.  Users tend to leave pages that take a long time to load. 

According to researches , when a website takes more than 3 seconds to load, 40% of people tend to abandon it. 1-second delay can reduce conversion by 7%. Another reason to mind load time is it affects your SEO performance. 

When inserting elements into the layout, check the site speed after it. If an image or other visual component is slowing down the load time, it's better to remove or try to compress it. Remember about keeping a web design simple? This will be helpful here as well. 

Through pages like Uptrends, and Website Audit you can check the site speed, keep monitoring it. 

13. Analyze the heatmaps#

Have you ever heard of a heatmap? It's a very useful tool to understand, with more precision, the performance of your pages. It tracks the users' mouse movements, allowing you to see in which areas of your website they pay more attention and spend more time.

Those are valuable information, which will enable you to improve your web design based on data and understand more of your website visitors’ behavior. For example, you can think of ways to position the CTA to draw more attention, also, check if the buttons are working properly and if they are being used. 

One of the most important web design best practices is to understand that your work isn't done when you finish a website. It's necessary to always analyze the performance rates to make data-driven changes. 

14. Perform A/B testing#

Let's assume, you are building your website from scratch now and without much information about your target audience profile. In this case, it can be more difficult to decide which template, images, color, and fonts to use. 

Something that will make it easier is A/B testing, where you will make more than one version of a page, changing, for example, the color scheme or the call to action position.

Then, test each version and compare the data to see which ones perform better. Heatmap will help you to identify the changes that caused more impact.

But, A/B testing isn't only for beginners. Every time you have a new idea for improving one of your pages, you can do that. Testing is part of the process to understand more and more who your leads and customers are.

15. Pay attention to SEO#

Just as important as having a clear and well-structured web design, which reflects your visual identity and passes the message you want, is the SEO of your website. A beautiful layout won't be of much use if you can't be found on Google or through other search engines, right? 

Be always aware of constructing an interface that's aligned with SEO best practices. Adding alt texts, having a mobile-friendly website, meta description, optimizing images, improving usability and accessibility, and having a fast load speed are all factors that help with SEO.

16. Create a Sitemap#

A sitemap works in the form of a blueprint, where it's possible to locate all your website's pages. It helps you to visualize the structure of your website better, and it's also very useful to SEO because it facilitates search engines to find your contents, crawl and index them.

If you use WordPress, you can create a sitemap with Yoast SEO plugin.  There are also other tools that will help you with that such as XML-Sitemaps, where you just need to insert your website URL and they create the sitemap.

17. Focus on user experience#

As you could see in all the topics about web design best practices, one factor is always put in the first place, user experience or as many people refer to UX.

To have a website that delivers the results you want it's primordial to think about how to ensure the users are going to have an incredible experience when navigating through your website.

The digital world is a competitive one, to stand out you need to provide a unique experience and personalize it to your target audience’s needs. To do that, studying their characteristics, such as location, age range, habits, and preferences is going to make a huge difference. 

Identify what are your leads and customers’ main issues and how you can help them, then develop high-quality content from it.

Remember, when we talk about content, it doesn't include only written texts, but every element on your website. Images and videos are content as well, and ones that can have a huge impact on your pages' performance. 

Another essential aspect to be observed is the fast-changing nature of the internet, new technologies and algorithms are being developed as you read this text, keep an eye on them. Identifying new features and trends can be very helpful to continuously improve your website. 

Website designs to get inspired#

How about some examples of great web design to learn from the best?

Swab the World#

A design focus on the message, which is clear and highlighted,  animated elements that complement the user experience, and an image that matches perfectly the purpose of the page: it's easy to see why Swab the World has been highlighted as one of the best  web design in Awwwards.

Alan Menken#

The composer Alan Menken, who has written some of the most memorable Disney songs has also caught attention because of his website design. Constructed to invite the user into the world of his music, the use of animated elements and sound provides a unique experience. 

Skyline Films#

Skyline Films used the drag and hold feature to engage their website visitors to scroll through the movies they have produced. 

As you go along, it's possible to see some videos of the movies and click to know more about them. To make it easier to navigate, they give you guidance on where to click to discover more and dig deep into the website. 

The importance of applying web design best practices#

Using web design best practices can be the deciding factor whether you will get good results with your website or not. Your website has an impact on your credibility as a serious and trustable business. 

When well constructed, it can be a very effective resource to attract and engage with leads and customers, to build a successful ecommerce, and increase your revenue.

On the other hand, if your pages have a poor design, it can drive people away and make you lose business opportunities, consequently reducing your return on investment. 

Before starting to design the website, define which are your goals, and which are the actions you want the users to take on each page. By having a plan, developing strategies, and following web design best practices, it's going to be easier to identify how to build an effective website.