A website header is the first thing a visitor sees. A good header can make tons of good for your user experience, brand identity, and business overall. A lousy header can ruin it all just as quickly.
The contemporary world is not easy to succeed in. The competition in every niche is enormous, and potential customers are looking for exceptional experiences, they are used to being wowed. That’s why a header must have a wow effect. And not only on the homepage, on every single page of the website. Here are a couple of tips to help you create the most efficient headers imaginable.
Catching images
Web design is a very visual discipline, where a catching image can do wonders. It is a fantastic way to make a striking impression. Be it a drawing, a photograph, a cartoon or a video that you opt to use in your header, it must be something your visitors would want to look at, and preferably more than once.
A header image is never just a pretty picture; it is a quintessence of the whole page content. When you are choosing such an image you need to remember that an image alone is usually not enough to make a great header; it will have to be paired with other elements (headline, logo, call to action buttons, navigation elements, search, etc.). So, the captivating image of your choosing must be contrasting enough, sharp and of high resolution to be efficiently and complementary joined with the rest of the elements.
With the rise of Google’s material design pictures with people are becoming increasingly popular in web design.
You can choose a suitable image showing people that are using your products or choose a good photo of your team at work. This way you will use the header to tell the story of your business, and storytelling is another trend these days.
Try hero headers
Hero headers are oversized pictures. These huge images can take up the whole screen area when the user first enters your page. Hero headers are impressive and captivating. They are a terrific way to make a first impression.
Use huge typography
Choice of typography is not a trifling matter when it comes to web design and header design especially. The text must be readable, easy to understand, look good and add to the header message. A terrific way to add emphasis to a header is the use of bold typography. Another perk - bold typography is all the rage now in web design trends. It’s been a trend for a couple of years, and it does not seem to go anywhere from the list of hot trends.
Add navigation
Header and navigation do not have to be separate entities; in fact, often navigation is a natural part of the header.
Navigation can assume diverse types and forms; it can be a full menu or a drop-down, it can pop out of a hamburger menu or be a sticky bar.
Navigation in the header is great for creating hierarchy and showing the user how to interact with your design. And it must be carefully thought through, just as the rest of your user journey.
Clear message
As I have already mentioned before - header is not just a pretty picture. Or at least should not be. A header should communicate a clear message to your website visitors.
What are the things a good header tells your users? It tells them what to expect from the rest of the page, what actions to take and what to click to get what they came for. All the elements on the header should communicate a unified message that is easy to understand.
Clickable elements
Interactive headers are fantastic for enhancing user engagement. The best way to make an interactive header is to add clickable elements. Such an element can be a call to action button or a signup form for a newsletter, shopping cart button or account login; this very much depends on what purpose your website has and what your priorities are.
If you do include clickable elements in your header make sure not to go overboard with it. One button is enough; add more, and your header becomes a cluttered mess with no effect and unclear purpose.
Make it simple
The best headers, the ones that have that much desirable wow effect, are the simplest ones. They are made following the best design practices and basic design rules and have one dominant element that entices the users and serves the website’s purpose and delivers the business message.
Remember: a good header must provide a visual focus for the user. Layer your elements carefully, and test different variations to achieve the best results.
Don’t forget about reading patterns
Nielsen Norman Group found three patterns of eye movement in their research. I strongly recommend you read the research, it will help you understand how your users read and digest the information. Armed with this knowledge you then will be able to arrange your elements in the most appropriate way. By placing the essential elements in the hottest areas, you will make sure the information reaches the user and makes them interact.
The three primary patterns are:
- F-Pattern. Users read in the F-shape - across the top, halfway across the page and vertically down the left.
- Z-Pattern. Eyes move from left to right and from top to bottom, forming z-shaped patterns.
- Gutenberg Diagram. This pattern is formed in 4 active reading zones; there are two horizontal stops at the top from left to right, and then.
Conclusion
Don’t forget that most of your users do not get to your website through the homepage. But through search and land on inner pages. Everything said above can and should be applied to designing headers of internal pages as well as those for the home page. Make sure the headers across your website are harmonious and equally impressive.
Related Posts
How to Implement Separate Headers for Pages in WordPress?
WebDevRadio: XDK, ElasticSearch, NightwatchJS, Security Headers and a bit More
Web Designs with Fixed Header. No Glue Was Used
“Heads or Tails?” Creative Footers & Headers