How successful brands design their website headers

Photograph: Edho Pratama via Unsplash

The header section will be the first thing visitors see when they visit your website. You want your visitors to be compelled enough to take action by interacting with your hero image or by heeding to your call-to-action, all within a layout that makes your visitor’s experience enjoyable. In this article we discuss the best practices taken by successful brands, to create a quality header section that compels your visitors to act.

Organise the layout

You’ll find major sites like Amazon, YouTube and Facebook place emphasis on what is described as the ‘hero image’. This is a large image which takes centre stage on your website as the first thing your visitors see. It might include a call-to-action prompting visitors to take a specific action, it might be informative or it might be a striking image which evokes an emotional response from your visitors.

Typically, above your hero image is the navigation bar. This is where links to your other pages as well as your company name or logo reside. Whether it is above or below the image is up to you. We’d suggest having the navigation bar above image so that mobile visitors do not have to scroll down your page to access your links.

Break the layout into columns

As well as having links to different pages of your website in the navigation bar you may want to consider adding these links as a call-to-action button, image or text link in the header section by separating the header section into columns. With columns you can break up a large header section into smaller sections that will still dominate the space that your visitors see when they visit your website.

Websites like IMDb, IGNand TechRadar all do this, and it makes sense for them to do so due to the sheer amount of news content which is being published on their sites. It is optimal for sites like these to break the most prominent space on their site into columns in order to share the spotlight on its most newsworthy content.

Use a call-to-action

If you’re selling a product, want to share important news or are encouraging signups we would suggest using a call-to-action in your header section. The combination of a hero image and a call-to-action will ensure that your visitors are in the position where they make one of two choices; engage or do not engage. This is great for figuring out what works and what doesn’t because if your visitors aren’t responding to your call-to-action it simply isn’t compelling enough.

Sometimes you’ll find that websites for mobile apps like Tinder or Loot use a hero image which spans the visitor’s whole browser window. Typically this hero image will include a call-to-action button which scrolls the page down to another section. You can do this in responsive pages by adding a button to a column then choosing the section link type.

What you’ll notice on the Tinder and Loot pages are that they have also used the space within their hero images to add a call-to-action to download their apps. This is another way to use call-to-actions which direct the visitor externally to an app store, to a download link or even to something like a Spotify playlist.

Add social media icons

A great way to market your website without putting in any extra effort is to add links to your social media channels for your visitors to browse and follow. It is also a great way to provide customer support for visitors who may have any immediate questions or queries.

You’ll find that many websites like Jake McNeil’s freelance filmmaker portfolio include social media icons in either the header section or navigation bar. This is so that visitors can access your social media channels from any page of your website, and so that indirectly you can channel more content to passersby, potentially creating new followers and thus new leads.

Why don’t you try some of these techniques using the new responsive editor? It’s free.

What did you think of this article? Want to see more like it? Let us know in the comments or @moonfruit.