The anatomy of header design

We’ve all been there – you go to your computer, open a website, you’re intrigued from the first time your eyes meet the header, everything is so clear, so interesting and yet – professional. It can be your website too! With a simple understanding of header design and human behavior, you can do wonders.

What exactly is a header

A header is the top part of a page – no argument there, but it is still discussed if it’s only the top strip with logo and navigation tool, or it’s the whole part above the fold.

Header design is more than just a line with logo and navigation.

As I hate to limit any creativity with dimension restrictions, I prefer the second definition, but after reading this post, you’ll see that there as many headers related design opinions as there are cute animals.

Why is header important

Before we jump into the header design, let’s talk about what people actually see when they open a website. There’s a lot of research done over the years to find out exactly that. Turns out, people usually don’t read the whole website carefully from top to bottom (who knew?). You might have already heard about the patterns of reading like the F-pattern or the Z-pattern. These patterns show the common ways people are scanning a page. The letters, however, represent the way the eye of the visitor moves across the page. Not to get into too much detail, here are the key points to remember:

  • Visitors start with the top-left part of the page;
  • More attention is focused on the first words of every line (hence the F);
  • While reading in these patterns, visitors might miss important information;
  • Good design can eliminate the scanning patterns, ensuring that the whole page has been seen.
A heat map of F-shaped reading pattern
A heat map of the F-shaped reading pattern

Before we move on, I want to introduce you to some more fun facts about your potential site visitors and their thoughts:

  • Once your page loads, users form an opinion in .05 seconds;
  • 94% of the first impression is design-related;
  • 38% of visitors will stop engaging with a website if the content is unattractive in its layout or imagery;
  • With only 15 minutes to consume content, 66% would prefer to view something beautifully designed vs. simple and plain.

Now that the glass is completely shattered, we can start figuring out the best way to build a header that the visitors will appreciate even before that half second mark hits.

Common elements

The first step in header design would be to decide which elements to use. It’s good practice not to use too many, as that would make it difficult to navigate. The most common elements are:

  • Logo: The tool to identify your business from the first glance;
  • Menu: A way for the visitor to navigate through the website as well as know what’s ahead;
  • Call to action button: This lets you direct the visitor and allow the visitor to explore further.

Header with logo on the left and navigation on the right

These are the most common elements, but it doesn’t mean that your header design should be limited to these only. Additional elements like text, images, a hero section, search bar and many more are used as well.

Header layout variations

The choice of elements isn’t the only one to make. The layouts of headers differ greatly as well. Although, as always, there are some layouts that have proven to be successful. The layouts that are seen mostly around the web are the ones with a logo and a menu. The difference is in the placement:

  • Logo on the right side: The most common logo placement. In fact, according to research, 60% out of 33 websites on Awwwards have their logo on the top-left side of the page. Also, users are 89% more likely to remember logos shown in the traditional top-left position than logos placed on the right;
  • Logo in the middle: This layout has gotten increasingly popular recently, especially in responsive design, as the space on a smaller screen is limited;
  • Logo on the right side: This is mostly used for design purposes but research is highly against it, as it doesn’t really do its purpose of making a person remember the brand. People are significantly more likely to recall a brand by its logo if it was placed on the top-left.
Users are 89% more likely to remember logos shown in the traditional top-left position. Click To Tweet

As always, that doesn’t mean you have to stick to the statistical majority. There are still websites that have their logo and menu vertically placed on one side of the page or don’t have any at all. It all depends on the ‘message’ you want to send to the visitors. Although, research states that the most successful layout of the header in terms of user experience is the classic top-left.

Header design in WordPress

When we are thinking of the more technical side of building a header, the default options in WordPress are quite limited. Usually, the header is defined by the theme you are using, and the options to customize are simply insufficient if you want to experiment with a more extravagant design.

Default WordPress Theme Customizer features include Site Identity (allows to add a logo, edit site title) and Menu (allows to edit menus and their locations). Those are usually enough to create a classic header, but not much else. You can find the WordPress Theme Customizer in your Admin Panel under Appearance.

WordPress Theme Customizer
WordPress Theme Customizer

Sometimes the default options are not enough and that’s where external help comes in. There are multiple plugins that are designed specifically for the purpose of creating headers. A good example would be the UberMenu plugin, that allows creating unique menu layouts.

I don’t mean to brag, but Visual Composer Header Builder is a good tool (that’s included in Visual Composer Website Builder) to use if you prefer making your header from scratch. It allows you to customize every aspect of the header. There are also templates you can use, to save time and have a professionally premade header if you’re not 100% sure what to include yourself.

Header templates from Visual Composer Hub

It’s only the beginning. Literally.

A header is the ‘handshake’ of the website, as important as it is, there’s a lot to follow. Still, if the first impression is good, the visitor is going to be more satisfied with everything else later on (that’s some more research for you). So it’s only logical to really perfect the header and create an awesome experience for the visitors.

In short – be creative, clever and start creating!

More on wpcrib


  1. I have tried the new header. It works but requires quite a bit of work to get a good design. It could do with a button or checkbox to make the header stick to the top instead of scrolling up with the page. Can you provide the code to keep the header at the top of page instead of scrolling.

    1. Hi, Frank! Hopefully, it’s still relevant, because sticky headers are coming to Visual Composer in the next update!

  2. I have been using the New Visual Composer to design headers and they come out pretty good; however, there seems to be a problem with system/plugin generated pages. I was working with the The Events Calendar Plugin and I noticed on the Event Calendar Page and event listings that the Header Design was not the one I designed in Visual Composer, but the WordPress Default Template Header that is customized in Appearance>Customize. This made it a little awkward to use the Starter Template with custom Headers, because it didn’t show up in these pages. Even when the Header is marked Default in Visual Composer, it didn’t show up on these pages. Am I doing something wrong?

Add comment

Join discussion and make an impact. Your email address will not be published.

GDPR is going into effect on May 25, 2018. Learn more in our new GDPR section. You can also view changes to our Privacy Policy.
We use cookies to provide a personalised experience for our users.