A website header always comes first. Visitors will see this eye-catching element even if they close a site immediately. So, the AIDA marketing formula (attention, interest, desire, action) is relevant for no other element.
The website header is a part of the site’s identity. As an invitation to spend time on the site, the header should present all the necessary data, inform about the brand, commit to the web design usability principles, contribute to SEO, serve as a site’s navigator, etc. Therefore, web designers pay attention to this issue because the header should hook users’ attention.
Now, let’s delve into header creation. I shall describe the field’s best practices for turning a regular header into a teaser.
What is the Website Header?
First, the header is not just a narrow stripe with the logo and contact data. This idea is outdated, and nowadays, even a hero header is not an innovation. By far, the website header is a broad design area above the fold of the webpage, optionally including large images, a double menu, and videos.
What are the Main Header Elements?
Browsing many sites shows that elements included in headers differ significantly and depend on the site’s purpose. Therefore, the header elements are:
- main (necessary), which comprises a logo/slogan/name and other identity signs, contact data, a top horizontal menu, a shopping cart, etc.;
- secondary (optional), which embraces a search and language bar, callback button, hamburger menu, links to a subscription form and advertising product brief, social icons, images, etc.
You do not need to use all of these elements. Their presence depends on:
- the website type (a blog, landing page, and e-shop need to be designed uniquely);
- the site’s purpose (the header should contribute to the company’s goals);
- usability (avoid too impressive headers);
- headers from the main and secondary website pages can differ.
Trends in Header Web Design
How can users know the current trends in this field? Where else to look for this information if not on Awwwards? I’ve reviewed many web header designs and singled out the most prominent for you to enjoy.
#1. The first example is the auto-selling company. It has a classical sticky website header, which remains permanently visible while scrolling. The central empty area visually separates the elements on the left (logo) and right (contact information and hamburger menu).
#2. Next is the advertising bureau website header. It contains many different widgets to present the site menu and the most critical information like contacts and cases.
#3. This lawyer’s site envisages so much information that it needs a double menu. It is a standard approach for WordPress templates.
# 4. Must the header be a horizontal stripe? No way, take a look at the inclined header below. I think such a non-standard header emphasizes the wonderful informal atmosphere in the Bonnefooi bar.
#5. The homepage of this creative digital agency contains multimedia. It’s a go-to approach to promote a product/company because the images and video immediately attract visitors’ attention.
#6. Sometimes designers develop non-standard headers and embed navigation as notes, like this agency of digital podcasts.
#7. Hero header uses text, images, sliders, videos, animation, and navigation elements. They can be placed on a home page or at the top of a web page. Here’s a tennis academy website standing at the cutting edge of web design.
#8. This game-themed website header is a part of the whole site style. Dedicated to Warcraft Tavern, it contains regular menu items, login/register buttons, and links to other website pages.
#9. Web pages without the header are a trend, as shown by Spitfire. But it is somewhat controversial when it comes to usability because visitors need time to understand navigation. Anyway, it’s a challenge you should be willing to face trying to combine creativity and usability.
#10. Web designers often use hamburger menus like this restaurant site. After clicking, visitors will see an extensive menu. This approach is the best for sites with many visuals.
Main Principles of Best Website Headers
Modern web design envisages a lot of nuances, sometimes facing each other. The perfect header design, in particular, means balancing color schemes, typography, images, videos, etc. It aims to provide users with crucial information and make a favorable impression of the site in the shortest possible time.
All the abovementioned great headers meet the following rules:
- visible and memorable, so use contrasting color schemes and fonts;
- provide easy navigation, so use the navigation menu;
- the headers are clickable and include text, images, and icons.
Having examined various website headers from top Awwwards nominees, I’ve outlined the perfect header must-haves.
Provide visual hierarchy:
- maintain the overall concept of the site;
- do not overload the header with visuals;
- use contrast fonts;
- do not use logos with low DPI;
- texts and visuals should be legible.
Build the header of responsive size: the most common one is 1240 px, but the header width range from 1024 px to 1924 px, and its height 一 from 200 px to 350 px.
- sticky headers remain visible while scrolling, so it’s good to use them.
- provide simple navigation by making the structure clear, adding a hamburger menu, and hover effects. They keep the header concise and do not stray attention.
- the search bar in the header is a great navigation idea, especially for voluminous sites.
- The header content depends on the specifics and purpose of the site. In particular, it can evoke emotions, announce sales, use CTA, etc.
Images and other visuals should not contradict the general style of the site and encourage visitors to stay for as long as possible:
- large images in headers catch attention;
- bright colors/fonts and contrasting color schemes are noticeable;
- space makes the header more transparent and easy;
- pay attention to image quality and DPI.
WordPress Plugins for Creating Headers
To be honest, the website header creation doesn’t look effortless at first glance. Fortunately, some tools simplify the routine and let you design content-rich headers. I’m ready to share my personal top 10 plugins.
Elementor Header & Footer Builder
This is a free plugin for Elementor by Brainstorm Force and Nikhil Chavan. It aims at the header/footer customization by setting blocks at any website point.
Main features: Elementor Header & Footer Builder has inbuilt widgets (site logo, title, tagline, navigation menu, page titles, retina image, WooCommerce Menu Cart, Copyright, and Search bar) and works with WordPress themes.
Sticky Menu & Sticky Header
The WordPress Sticky Menu & Sticky Header plugin by WebFactory fully corresponds to its name. It makes any website element sticky and adds space between this element and the top of the page. It’s a pity that such exciting options are available for only specific screen sizes and some pages.
JetMenu
The JetMenu plugin for Elementor and Gutenberg by Crocoblock aims at increasing the mega menu functionalities. It customizes menus by adding different content (videos, images, audio, contacts, blog, dynamic content, Elementor templates).
You can build a custom horizontal, vertical, or hamburger menu and showcase different product categories and banners. This plugin is perfect for e-stores.
Boostify Header Footer Builder
Boostify Header Footer Builder plugin for Elementor combines the best ideas for header/footer design for free. They are:
- built-in widgets (logo, nav menu, nav mega menu, search, retina logo, copyright, menu card);
- sticky header development for mobiles, tablets, and desktops;
- mega menu and vertical menu button.
Unique Headers
The Unique Headers plugin for WordPress by Ryan Hellyer develops a customized header, including a fantastic image for any page/post.
STAX Header Builder
The STAX Header Builder plugin for WordPress by StaxWP focuses mainly on widgets and uses the drag-and-drop technique to add them to the site. The following widgets are available: logo, menu, search, button, icon, text, image, link, separator, accordion, tabs, divider, Google map, heading, and spacer.
WP Header Images
The WP Header Images plugin for WordPress by Farhad Mahmood can be used to customize header images. In particular, it sets custom images for every page and post, including WooCommerce categories.
Head, Footer and Post Injections
The Head, Footer and Post Injections plugin for WordPress by Stefano Lissa aims to provide additional services (e.g., Google Analytics) using coding before, after, and within posts/pages.
Header Footer Code Manager
The Header Footer Code Manager plugin for WordPress by 99robots aims at SEO and includes Google Analytics, Google AdSense, Google Tag Manager, and analytic tools for social networks.
Conclusion
The main task in web design is striking a balance between creativity and usability. Books are generally judged by covers, while websites are judged by headers. A header is something a user notices first. Plus, it contributes to SEO, branding, and usability. That makes the header one of the site’s pillars.
The modern trends of header design focus on its design and content, although headers vary in sizes, color schemes, versions for main and other pages, buttons, menus, etc. But there are no ultimate ideas on the best font, logo, icon sizes, etc. The headers are a vast area for activity, so use plugins to make your header a guiding star to conversions.
