7 tricks for good looking website header

The header is the first thing a user gets to see the in a website. It decides whether the user remains or goes. We will try to show few tricks to keep visitors on your website.

woobro website header

Screenshot of woobro.com

User experience (UX) depends on website header, branding, and more. So if you want your visitors to stay, you need a header that knocks your users literally. And not just on the homepage. We have seven tricks and techniques to help you create a wow header.

1. Overpowering images

hero image vibrant.pratheev

(Screenshot: vibrant.pratheev.com)

Hero images are one of the great trends in web design in 2017. They fill the screen prominently and are intended to trigger a wow effect on the user. Images are more than just fancy photos; they are the strongest weapons of a designer. They express emotions, tell stories, entangle the user and can lead to certain actions.

An image alone is a good approach, but to make the most of the overall image, it needs additional elements – such as a meaningful headline in typographic and a call-to-action button. Also, it should have the logo, menu, and the search field in the right place.

2. Ordinary navigation

There is no reason to separate the header and the navigation elements – they are often a part of the visual concept. Whether it is a navigation that stretches over the entire header area or something that spills out of the hamburger icon, navigation should always be a part of the header concept.

And if we are already in navigation, how about a sticky navigation? The header is quickly scrolled away, but the navigation should always be accessible in the simplest and fastest way.

3. Meaningful text

Only overwhelming pictures are not enough. What should be the message of the header for the site visitors? Does the header tell you what to do or what to expect? Or where the user should click? Is it a message that is easy to understand? Overall, several combined elements should present an overall effect with a concise message.

4. Over-Sized typography

Over dimensioned typography

Large fonts are good for weighting the header. You can catch the view of the site visitors before it crashes on the actual content of the site. The styles of typography can vary, but a few basic rules should be followed: The homepage leaves more space – here fonts can be more dramatic, playful or more extreme, especially in the header. And applying a uniform, calm rhythm should be pursued, which does not distract the user from the essential.

5. Review the reading behavior

People read online differently than offline. A good novel is read word by word – not online. Here people read up to 25 percent slower and are more impatient. Among other things, they are confronted with an incredible amount of information. Therefore, the reading behavior has been divided into three different patterns:

  • F-Pattern: The so-called F-pattern or F-pattern reflects the familiar viewing pattern of most Internet users. Because an average user drives in the form of an “F” over the text.
  • The Gutenberg diagram: With this pattern, the eye moves from the top left to the lower right, passing through the center of the page. Thus, the upper right corner and especially the lower left corner get less attention.
  • The Z-pattern: The eyes look from the top left to the top right and then move diagonally to the left down before the movement is repeated.

Elements – especially the key elements – should be placed in the “hot zones,” so the probability of a user interaction is high.

6. Clickable items

Is the site header interactive? Does it have clickable elements that encourage user engagement? A header is the best place on a website to place a call-to-action button or easier interactive elements like an e-mail query. But please do not exaggerate, because that distracts too much from other messages in the header. A simple, concise call-to-action form is effective and sufficient.

7. Use Layers

user layers

(Screenshot: yatesonyates.com)

Packing all the elements listed above into a header might not be easy. The trick is a simple graduation of the levels. The best header – which is simply “wow” – looks simple. It follows the rules of design theory and uses a single dominant element to deceive the user with design techniques and ultimately reach the desired goal.

By grading the layers, not only is a visual space created for elements, but it also allows the user a visual focus. So he knows where he begins to devote his attention to the design and which elements are perhaps less relevant.


Making a perfect header that achieves the desired goal in the best way often does not work on the first attempt. Several versions and frequent testing are required to get the user to be seen at first glance.

Often the focus in the design process is the header of the start page – the header for subpages is often neglected. In this case, the fewest users arrive by entering the URL on a website, but come across search engines and get directly to a landing page or bottom.

It is important to think independently as well as jointly to both header types, so a design harmony and a unified visual overall picture.

WBD Team

Our excellent WBD team working day and night to put together best content for you.

You may also like...