In the past, a “header” in web design referred to the ever-present strip at the top of websites that contained the logo, navigation bar, and maybe some contact details and search bar. Nowadays, a “header” refers more often to the entire space above the fold on the home page.
Unless someone’s found your site through a blog post shared on social media or from a referral on another site, chances are good they will enter it through the home page. And the first thing they’ll see is that prime real estate up top laid bare.
I’ve written before about how visitors respond better to the predictable placement of certain elements on your website (like the logo and CTA). By designing a website with the goal of meeting their expectations and enhancing their comfort by making the experience somewhat more predictable, you can effectively improve click-through and conversion rates.
Now think about that header space on the home page.
Most people have come to rely on home pages to give them a bird’s-eye view of what a company or website is about, which means you can’t afford to waste this opportunity to deliver on that expectation.
Of course, your home page header design can be unique to your brand, but the elements found within it really shouldn’t be. Visitors expect scrolling won’t be necessary to find out what a site will do for them. In essence, your header should be a 10-second story that proves to your visitors what value the site will be to them.
So, what will you do with this space to captivate your visitors’ interest?
Let’s talk about some of the trends in header design, what you can do to make use of this highly visible real estate, and take a look at some interesting examples of headers along the way.
Note: Not all of the example sites listed below use WordPress but they can be done using WordPress.
14 Header Web Designs
It’s not like your visitors are unaware of their ability to scroll down a page or click-through navigation to learn more about the brand behind a site. But why should they have to do that?
There is enough room in the header to provide a succinct message that tells them everything they need to know. And if 50 words or less isn’t enough, the background image or design will communicate the rest of the story.
Above all else, the home page header can make or break your visitors’ first impressions, which is why it’s so important to nail this section.
If you’re struggling to find a way to kick off your site with a bang, maybe you’ll find some inspiration in the following header designs.
1. Oversized Hero Image
Thanks to the modular style of designing sites to be responsive, most designs are now broken up into distinct blocks and sections. This design style happens to lend itself well to these full-width hero images that populate so many websites.
Take the Cleverbird Creative website, for example. It makes use of a singular and striking image overlaid with simple text to welcome visitors. There’s no mistake what they’re going for here: simplified beauty. Plus, having Wonder Woman doesn’t hurt.
2. Sliding Images
I think there was a time, not too far in the past when many of us were questioning the slider as a viable design element. However, many designers have done a great job making use of it in headers. There are sliding images that automatically scroll from one beautiful high-resolution image to the next and there are those like Pierre’s that beg visitors to take control of that experience themselves.
3. Transformative Parallax Imagery
The Anakin Design Studio website.
Parallax has been a feature of modern web design for some time. Although considered “hot” some years ago, using parallax effects is still popular and the header has proven to be the perfect place to apply this sort of visual “illusion” to web designs. However, what you’ll see most recently is designers giving their parallax scroll a transformative edge, probably to surprise visitors with the unexpected result of the scroll. The Anakin Design Studio has done just that with its header.
4. Video Backgrounds
The video background is another one of those recent trends that really works best when applied to the home page header. This one from Brave People does a great job of setting the tone of their website, showing off various clips.
5. Hidden Navigation
Although it could be argued that the hamburger menu belongs on websites viewed on mobile devices (as originally intended), there is something to be said about what that sort of navigational minimalism does for the header. The Canals website is a nice example of this. By tucking the navigation away, your immediate focus is drawn to the exciting visuals.
6. Brand Mascot
If the header is the place to introduce visitors to your site, what better way to kick it off than by introducing them to the “characters” they’re going to meet along the way? If your site uses a brand mascot—as the Kellogg’s Frosted Flakes site does—this is the time and place to show them off.
7. Eye-Catching Typography
There’s a lot that can be done to give your site’s typography a facelift. That said, sometimes it’s not about choosing the fanciest cursive font to throw in people’s faces. If you look at the Slack example above, you’ll see that it’s all about the size of the font. There’s nothing really special about the typography they’ve chosen, but it’s so clean and clear. That paired with the size of the main message is what makes it so eye-catching.
8. Content First
For websites with a primary focus on delivering droves of content to visitors (think of any major news site or blog), a content-first strategy for the header will make the most sense. There’s really no point in mincing words here. People have come to your site to read your content, they don’t need to be bogged down by additional reading on the home page, so you can get right to it as Glamour does.
9. Products First
Along those same lines, e-commerce sites don’t need to bother using the header to write a catchy headline or provide a video explainer about the company. Visitors know what they’ve come to the site for, so you can get right into it. However, unlike content providers, product retailers can use this prime real estate to show off their top-selling products or newest releases to entice visitors onwards as Apple does.
10. CTA Front-and-Center
There may come a time when your site has something truly special to show off to visitors, something you want them to download or buy. Now, even though that might not be the main attraction of your site, you can use the header either temporarily or permanently to highlight this special call-to-action as the Everywhereist blogger does with her book.
11. Vibrant Colors and Textures
One of the nicest things to come out of Google Material Design is our willingness to use more vibrant colors, layers, and gradients in web design. They no longer have to be relegated to call-to-action buttons, they can be used for entire blocks on the website, as Stripe does with their colorful and texturized header.
12. Animation
There’s absolutely nothing wrong with having a static home page header design, especially if you want the focus to be drawn to a CTA or video. Please keep it simple so there are no distractions keeping visitors from taking the action you intended them.
But for websites that want an interesting way to share their message with readers, try animation. For example, Disney uses a small animation to share a number of messages within the same space, which keeps it from looking cluttered or overcrowded with information.
13. Geometric Designs
Geometric web design happens to be really big right now as it lends itself well to the logical and clean lines needed for responsive design. So it’s no surprise that we’re seeing more websites, like the one for Perspective API, integrate geometric elements into the header’s design. Others, like Stripe and WPMU DEV, use diagonal lines to create a unique and unexpected visual landscape for visitors.
14. Experimental
Finally, we come to experimental header designs. The key to these usually isn’t that the header is outlandishly strange and unusual. That would be too distracting for visitors. Instead, your focus should be on creating some unexpected effect caused by the simple movement across the header.
Take the Teamgeek design, for example. You can see that there’s something “off” about the logo and message within the center of the page, but it’s not until you engage with it that you realize there’s a special twist built-in.
Wrapping Up
As you can see, there are various ways you can design a header for a WordPress site. If you look closely at the examples above, though, you’ll notice that the designers were very strategic about what style of header they used and which elements were included within it. When it comes time to design a header for your next website project, consider whether you’ll need the following:
- Logo
- Traditional vs. hidden
- Hero header section vs. getting straight to the content
- Tagline or mission statement
- Contact information
- Social media links
- Search bar
- Multilingual toggle
- Shopping cart
- Brand mascot
- Stock photography vs. actual photography of the company, people, or product
- Static image vs. sliding images vs. background video
- Embedded promo video
- Call-to-action button
- Contact form
- Hello bar
You may find other items that belong in this top header section of your home page, too. It really just boils down to what makes the most sense for your site.
In other words, which elements will tell your brand’s story, educate and engage your audience straight out the gate, and inspire enough trust to propel them forward through your site?
Editor’s Note: This post has been updated for accuracy and relevancy. [Originally Published: August 2017 / Revised: August 2021]
Tags:
