A website header makes the first impression your brand makes online. Like the subject line of an email, if it isn’t compelling, the rest of the design is wasted. So it is safe to say that header design is pretty important. Good header design presents all of the necessary information where users expect to see it, enhanced with a creative design that generates interest.
What is a website header?
A website header refers to the top section or banner on a website. While overall web design trends are favoring minimalism, headers seem to be growing in size. There is still a mix of sizes, but more designers take tips from old school newspaper design and create more prominent visuals that encompass the web page real estate located ‘above the fold.’
A good design serves as more than just a menu. It is an introduction to the brand and an invitation to browse pertinent resources on the site. You only have seconds to get a message across, so modern design trends emphasize the creative impact of the header over other elements of the website.
What’s included on your website header?
Planning an effective website header begins with identifying the critical information to include in the header section. The goal is to create a seamless and intuitive design that works for anyone, regardless of their level of familiarity with your brand.
The first job that your header does is identify your brand. When users arrive on your website, they will look for confirmation that they are on the correct page. Serve that confirmation up by placing your logo and company name in the top left corner of the banner. Match all other elements of the header to your branding for consistency.
In addition to your identity, users will want to know what goods or services you offer and how to reach you. Navigation menus should be simple and straightforward, with an option for services clearly displayed. It is also a good idea to highlight current deals or promotions, new products, or special offers in your header design.
- Branding Identification
- Simple Navigation
- Search Bar
- Contact Information
- Call to Action
- Image Sliders to Promote Offers (optional)
- Video Segments to Capture Attention (optional)
It seems like there is a lot of information that can go in the header section. That also means there are a lot of opportunities to overwhelm users and hurt your header design. Keep the design clean and minimal. Keep the focus on providing the correct information in the right place.
Best practices for website design
Designing an effective header is about balancing website architecture and creative design. Choosing a size, layout, copy, and media are important aspects that affect the user experience.
There is no standard header size when it comes to designing a website. You will find that some websites function well with small strips and minimal information, while others seem to do well with full-page header layouts. Many sites even choose to place a prominent header on the homepage and use slimmer versions on subpages. As long as the header is functional and hits all of the key components, the size is not the most important factor.
Like any other graphic or web design project, the visual hierarchy will be important in your execution. That means that elements in the header are arranged according to importance, with the visual weight assigned according to importance.
It is best to arrange elements where they are expected. For example, logos and branding information are generally found in the top left corner. For the web, users tend to read in an F shape beginning in the top left corner.
Other elements to manipulate visual weight include:
- Font Size
- Font Color
- Use of White Space
Make sure to use white space liberally so that your users can focus on what you want them to see. Do not include any unnecessary information, and work hard pairing down the important information to be as slim as possible.
A web page header will either remain visible as you scroll the page, or you will leave it behind at the top. Headers that remain visible are sticky headers. Web design trends heavily favor sticky headers because they keep key information and navigation elements visible at all times.
For example, on e-commerce websites, keeping the shopping cart visible at all times encourages users to finish their orders and increases conversions. On service-based websites, sticky headers have a similar effect by keeping the call to action visible.
What should the header say?
We have nailed down the point that your header is an important element on your website. But what should the header say? Good copy is possibly more important than good design, so some thought should go into finding the right words for a call to action or text line. Did you know that there is some marketing science behind good copy? The right words without the design elements are more powerful at selling than the wrong words paired with a great design.
What to put on your header:
- Copy that tells customers what to do next (the call to action–CTA)
- Copy that builds trust
- Copy that inspires action
- Copy that grabs attention
Your brand and your goals will direct the choices for what text to include on your header. It may be appropriate for a youthful, irreverent brand to use sarcastically humorous quips to grab attention in a header. But that doesn’t work for everyone. The header copy should fit authentically with all of your branding materials.
High-quality, relevant images are part of good design. Many designers choose to use image sliders to showcase multiple images in the header to convey different messages and reach different target audiences. Sliders are a good way to add more without overwhelming the visual weight of the header images.
Video or animation
Professional video clips are a great immersion tool to grab attention. Many brands are successfully integrating video or animation in the header. It is working to keep visitors from clicking away, at least long enough to find out what the site is about.
Header design is probably the most important element of your website. Your header provides the first and sometimes the only impression your website makes. While there is no standard, there are some clear best practices to follow. Implementing sticky headers, good copy, and high-quality images or videos can go a long way to highlighting the right messaging for your brand.