Website Header Best Design Practices

Headers serve a key purpose for your website. They’re your visitor’s best friend when it comes to navigating your site and finding the information they need. In this article, we’ll discuss what to include in your website’s header and explain how you can design it in a way which improves user experience. 

What Are Headers? 

Headers set the tone of your website. They should provide basic information about your site so that visitors can understand what you offer as soon as they arrive. 

What to Include in Your Header 

There are 4 elements commonly found in website headers. These include: 

  • Brand logo 
  • Navigational elements 
  • Call to action (CTA) e.g., “free trial” 
  • Search bar 
  • Title, headline and hero image 

Of course, you don’t need to include all these elements. Different designers have different preferences. Some businesses will opt for a value-packed and informative header, whereas other businesses may want a more minimal and clutter-free header. This decision should be made according to the nature of your business and your brand identity. However, we recommend only including information which is valuable, relevant and important to your visitors. 

How to Design Your Header 

There are several design aspects to consider when creating your header, such as: 

Messaging 

When designing your header, you should always have in mind the message you trying to convey. Are you trying to build trust? Create awareness? Sell products? Once you understand your goals, you will be in a better position to design a header which brings you closer to them. 

Header size 

Your header height shouldn’t interfere with the perception of your content. Again, your header size may depend on the nature of your website. For landing pages, a large header size may be appropriate. Whereas for informational websites, a smaller header would perhaps be a better choice. 

Structure 

There are several best practices when it comes to the structure of the elements in your header. Firstly, users are more likely to remember your brand logo when it is located on the left-side of the header, as opposed to placement in the centre or right-side. Navigational elements are frequently placed in the centre of the header and CTA’s are usually found on the right-side of the menu. This layout will lead the user’s eye to naturally progress towards your CTA. Underneath this top menu, you should place your headline and hero image. 

Hero images 

There are a few rules you should follow to ensure that your hero images are as effective as possible. Your hero images should: 

  • Be high-quality 
  • Invoke emotion in your audience 
  • Compliment your website colour scheme 
  • Grab attention 
  • Allow sufficient space for your headline 

We advise using websites such as Pexels, Splash and Pixabay to find free high-quality images for your website. 

CTA’s 

CTA’s are meant to attract the user’s attention and persuade them to carry out the action you want them to perform. Your CTA buttons should stand out from the other content on your page. This may require you to play around with different sizes, colours and locations to find a CTA design which converts best. 

Fonts 

Different elements in your header require different fonts. Nevertheless, all fonts should be clear and easy to read. For headlines, bold fonts should be used with a strong colour which stands out against your background. Headlines should also be larger than other typography in your header to ensure your audience see’s the headline first before any other words on the page. Fonts used in your navigation menu, CTA’s and body should be smaller and thinner. A common mistake that amateur web designers make is trying to be too fancy with their font. The primary purpose of your header is to convey information, so make sure that these key elements are readable and inviting. 

Try using these title and body font combinations for your website header: 

  • Alegreya Sans Black & Alegreya 
  • Archivo Black & Roboto 
  • Lato & Merriweather 
  • Lato & Roboto 
  • League Spartan & Libre Baskerville 

Don’t like these combinations? Click here to discover Elementor’s list of the 30 best font combinations for web design. 

Final Thoughts 

Thank you for taking the time to read our article. We hope you now have a better understanding of the best practices for designing website headers. If you have any questions regarding any of the topics discussed in this article, please don’t hesitate to get in touch. A member of our friendly team will always be happy to help. 

Olly Eastham