{"id":167154,"date":"2022-01-10T13:00:03","date_gmt":"2022-01-10T13:00:03","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=167154"},"modified":"2022-01-10T13:00:03","modified_gmt":"2022-01-10T13:00:03","slug":"website-headers-inspiration","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/website-headers-inspiration\/","title":{"rendered":"Awesome Website Headers For Your Inspiration"},"content":{"rendered":"

In the past, a \u201cheader\u201d 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 \u201cheader\u201d refers more often to the entire space above the fold on the home page.<\/p>\n

Unless someone\u2019s 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\u2019ll see is that prime real estate up top laid bare.<\/p>\n

I\u2019ve written before about how visitors respond better to the predictable placement of certain elements on your website (like the logo<\/a> and CTA<\/a>). 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.<\/p>\n

Now think about that header space on the home page.<\/p>\n

\n
\"Quickbooks
What exactly is a “header” these days?<\/figcaption><\/figure>\n<\/div>\n

Most people have come to rely on home pages to give them a bird\u2019s-eye view of what a company or website is about, which means you can\u2019t afford to waste this opportunity to deliver on that expectation.<\/p>\n

Of course, your home page header design can be unique to your brand, but the elements found within it really shouldn\u2019t be. Visitors expect scrolling won\u2019t 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.<\/p>\n

So, what will you do with this space to captivate your visitors\u2019 interest?<\/p>\n

Let\u2019s 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.<\/p>\n

Note:<\/em> Not all of the example sites listed below use WordPress but they can be done using WordPress.<\/p>\n

Header Web Designs for your inspiration<\/h2>\n

It\u2019s 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?<\/p>\n

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\u2019t enough, the background image or design will communicate the rest of the story.<\/p>\n

Above all else, the home page header can make or break your visitors\u2019 first impressions, which is why it\u2019s so important to nail this section.<\/p>\n

If you\u2019re struggling to find a way to kick off your site with a bang, maybe you\u2019ll find some inspiration in the following header designs.<\/p>\n

1. Oversized Hero Image<\/h3>\n
\"Cleverbird
Some headers, like Cleverbird Creative’s, are huge.<\/figcaption><\/figure>\n

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.<\/p>\n

Take the Cleverbird Creative<\/a> website, for example. It makes use of a singular and striking image overlaid with simple text to welcome visitors. There\u2019s no mistake what they\u2019re going for here: simplified beauty. Plus, having Wonder Woman doesn’t hurt.<\/p>\n

2. Sliding Images<\/h3>\n
\"Scrolling
Mmm… ice cream…<\/figcaption><\/figure>\n

I think there was a time, not too far in the past when many of us were questioning the slider<\/a> 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\u2019s<\/a> that beg visitors to take control of that experience themselves.<\/p>\n

3. Transformative Parallax Imagery<\/h3>\n

Parallax<\/a> 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 \u201cillusion\u201d to web designs. However, what you\u2019ll 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<\/a> has done just that with its header.<\/p>\n

4. Video Backgrounds<\/h3>\n
\"Example
The Brave People website does a great job incorporating videos.<\/figcaption><\/figure>\n

The video background<\/a> is another one of those recent trends that really works best when applied to the home page header. This one from Brave People<\/a> does a great job of setting the tone of their website, showing off various clips.<\/p>\n

5. Hidden Navigation<\/h3>\n
\"The
Canals header is super modern and the navigation is hard to spot.<\/figcaption><\/figure>\n

Although it could be argued that the hamburger menu<\/a> belongs on websites viewed on mobile devices (as originally intended), there is something to be said about what that sort of navigational minimalism<\/a> 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.<\/p>\n

6. Brand Mascot<\/h3>\n
\"Mascot
As Tony the Tiger would say about mascot headers: “They’rrrrrrre great!”<\/figcaption><\/figure>\n

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 \u201ccharacters\u201d they\u2019re going to meet along the way? If your site uses a brand mascot\u2014as the Kellogg’s Frosted Flakes<\/a> site does\u2014this is the time and place to show them off.<\/p>\n

7. Eye-Catching Typography<\/h3>\n
\"Slack
Strong typography can really make your content shine.<\/figcaption><\/figure>\n

There\u2019s a lot that can be done to give your site\u2019s typography a facelift<\/a>. That said, sometimes it\u2019s not about choosing the fanciest cursive font to throw in people\u2019s faces. If you look at the Slack<\/a> example above, you\u2019ll see that it\u2019s all about the size of the font. There\u2019s nothing really special about the typography they\u2019ve chosen, but it\u2019s so clean and clear. That paired with the size of the main message is what makes it so eye-catching.<\/p>\n

8. Content First<\/h3>\n
\"Example
Glamour’s home page is content-first, among other things.<\/figcaption><\/figure>\n

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\u2019s really no point in mincing words here. People have come to your site to read your content, they don\u2019t need to be bogged down by additional reading on the home page, so you can get right to it as Glamour<\/a> does.<\/p>\n

9. Products First<\/h3>\n
\"Example
Meanwhile, Apple’s focus is its latest big product.<\/figcaption><\/figure>\n

Along those same lines, e-commerce sites don\u2019t need to bother using the header to write a catchy headline or provide a video explainer about the company. Visitors know what they\u2019ve 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<\/a> does.<\/p>\n

10. CTA Front-and-Center<\/h3>\n
\n
\"Post
The Everywhereist directs visitors to click its bold CTA.<\/figcaption><\/figure>\n<\/div>\n

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<\/a> blogger does with her book.<\/p>\n

11. Vibrant Colors and Textures<\/h3>\n
\"Example
Ooh… shiny…<\/figcaption><\/figure>\n

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<\/a> does with their colorful and texturized header.<\/p>\n

12. Animation<\/h3>\n
\"Disney's
Disney’s website often features animations of their latest project.<\/figcaption><\/figure>\n

There\u2019s 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.<\/p>\n

But for websites that want an interesting way to share their message with readers, try animation. For example, Disney<\/a> uses a small animation to share a number of messages within the same space, which keeps it from looking cluttered or overcrowded with information.<\/p>\n

13. Geometric Designs<\/h3>\n
\"Perspective's
Perspective API’s stripped-back header.<\/figcaption><\/figure>\n

Geometric web design<\/a> happens to be really big right now as it lends itself well to the logical and clean lines needed for responsive design. So it\u2019s no surprise that we\u2019re seeing more websites, like the one for Perspective API<\/a>, integrate geometric elements into the header\u2019s design. Others, like Stripe and WPMU DEV, use diagonal lines to create a unique and unexpected visual landscape for visitors.<\/p>\n

14. Experimental<\/h3>\n
\n
\"Post
Teamgeek’s header is weird and fun.<\/figcaption><\/figure>\n<\/div>\n

Finally, we come to experimental header designs. The key to these usually isn\u2019t 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.<\/p>\n

Take the Teamgeek<\/a> design, for example. You can see that there\u2019s something \u201coff\u201d about the logo and message within the center of the page, but it\u2019s not until you engage with it that you realize there\u2019s a special twist built-in.<\/p>\n

Wrapping Up<\/h3>\n

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\u2019ll 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\u2019ll need the following:<\/p>\n