Book a demo
Our Work
Why Us
Blog
Pricing
Blog

Guide to Creating a Performing Website Header Design

Alejandro Cuffia
Alejandro Cuffia
7 min read
Creating a website header design

You don’t get a second chance at a first impression, and the same goes for your company’s website header design. Research shows that 55% of website visitors only stay about 15 seconds on a website before leaving. Considering that your website header is the first section of your webpage that visitors will see, it needs to pack a punch.

Your website header should reflect your brand, clearly communicate what you offer, and be eye-catching enough to grab your audience’s attention and convince them to keep scrolling. It should also check all of these boxes in as little time, and with as little copy, as possible. Depending on the page you’re designing a header for, you really need to tailor the creative, messaging and CTA.

“I think your hero image is ten times more important than the copy,” says Bill Macaitis, the former Chief Marketing Officer at Slack. “Can you explain what you do via a visual versus writing it out? Your ads and website should be able to pass the five-second test: someone should know exactly what you do after seeing your offer for just five seconds.”

So, where do you start? Fortunately for you, we’ve compiled some best practices and examples to help you design a website header that works.

What is a Website Header?

A website header, also called the ‘above the fold’ section, is the part of your website shown at the very top of a page.

Website headers have three primary functions:

  • Information. It should let your visitor know what your brand does.
  • Navigation. It should help direct your visitors to other pages.
  • Visual appeal. It should be interesting and attractive enough to grab your visitor’s attention.

Like a store entryway, your header should set the tone for your website and give your visitors a feel for your brand.

Website header designs usually have all, or most, of the following elements:

  • Business name
  • Logo or brand identifier
  • Call to action
  • Text or headline
  • Navigational elements
  • Search
  • Shopping cart
  • Log in
  • Social media links
  • Languages

Why a Header Hero Image Matters in Website Design

If the website header is an entryway, then your hero image is kind of like the signage out front. This large banner-like image gives website visitors a taste of what you offer and provides that all-important visual appeal that can help people stay on your website. One study found that roughly 80% of website visitors focus most of their attention above the fold.

Whether you opt for a picture, graphic, video, or animation, your hero image should directly convey key information about the business. For example, a food delivery service might opt for a hero image that depicts a courier with a mouthwatering container of food. A fitness tracking app might use a quick animation of their interface and features. There’s lots of room for creativity when designing a hero image, but the visual’s main purpose should be to encourage visitors to learn more about your business.

Timeless Website Layout Ideas (+ Examples)

Searching for website layout ideas? You're not alone! In this post we walk through some website layout ideas and styles to spark new designs for your website. Read more >

How to Create a Website Header Design that Performs

1. Keep your overall purpose in mind

What’s the first step that you’d want your visitor to take after landing on your website? Where would you like them to go? What information do they need to access quickly? Before you start your website header design, you should have a solid understanding of what you’d like to achieve with your website as a whole and how your header fits into the mix.

For example, OpenPhone’s website header includes a snapshot of the app’s interface to give visitors an idea of what it looks like, and its “Start Free Trial” CTA invites users to get started with the service right away.

2. Include a clear call to action

In the wise words of Brené Brown: “Clear is kind. Unclear is unkind.” In other words, your header call to action shouldn’t be so clever or quirky that your visitors don’t know what will happen after they click on it. Simple CTAs like “Sign up for free” “Start free trial” or “Get started for free” get the job done.

With its brightly-colored hero video and tilted text, Toggl’s website header design is a little busier than most. Still, the simple pink “sign up for free” CTA button really pops, encouraging visitors to take that next step in the customer journey.

3. Don’t overload your website header design

Your website should be informative, but too much text or busy visuals can overwhelm or confuse your visitor. The best website headers should help your visitors quickly decide whether your offer is for them or not, and the keyword there is ‘quickly.’

Planoly’s header is an excellent example of this. The cohesive, millennial pink color palette and artsy graphic highlight the brand’s design-forward aesthetic, while the copy and call to action communicate the brand’s purpose and mission.

4. But don’t go too minimal, either

Too little copy or overly minimalistic visuals doesn’t work so well either. As mentioned earlier, you only have about 15 seconds to grab your users’ attention, so if they have to work too hard to figure out what you do or how to navigate your interface, you’ll lose them (and likely for good).

Take this header from digital marketing agency Outsmart Labs, for example. While the interactive sunset graphic is fun and unexpected, the company tagline (“Let’s make waves together”) and CTA (“What do you need?”) don’t offer a lot of tangible insight into their service offerings. Potential customers have to scroll down below the fold to get more concrete info. This is an example of going too minimalistic (something you shouldn't do)!

5. Use clear, readable fonts

Funky fonts may be trendy, but when it comes to your website header design, you should go with one that’s clear and easy to read. The copy in your header should help guide your audience, so if your visitors can’t understand it, it’s not doing its job.

This website header from Shopify uses a simple yet bold sans serif font that really pops off of the page. The high-contrast color palette (pale beige and dark green) also helps boost readability.

6. Use illustration

A website header offers a lot of visual real estate, so consider adding a little extra flair by incorporating illustration into your header design. Illustration has become increasingly popular over the years. However, these design styles are still a little more unexpected than your traditional brand photography and can help you catch your visitors’ eye.

We love how budgeting app Mint uses illustration in their website header design. The resulting design feels much more youthful and fresh than one would expect from a financial tool’s website, while still feeling on-brand thanks to the consistent use of brand colors.

7. Make it move

The use of animation in website design can help to capture attention, showcase your product/service and much more. It can also make your overall website design much more memorable.

We love ConvertKit’s use of animation in their website header. The hero visual – a photograph that transforms into an animated flowchart – perfectly illustrates who they serve and what they offer in a really compelling and creative way.

Final Words

An effective website header design should hook your website visitors’ in and keep them scrolling down to the very end of the page. It can also be a great place to get creative and try out some out-of-the-box design ideas but at the end of the day, remember that it’s not about you – you’re designing for your customer. Have fun with your header design, but also test out different color combinations, visuals, and text to find the layout that works best for your company and your marketing goals.

Published: Feb 26, 2021
Alejandro Cuffia
Written by
Alejandro Cuffia
Alejandro Cuffia has 6+ years of experience in UX/UI design. He is a Design Director at Superside, leading projects and developing all types of products for clients. From Buenos Aires, Argentina, Alejandro is a mate and asado (a.k.a barbecue) lover and a passionate photographer.

Join our community of 5,000 strong and receive the best design and marketing content, biweekly

No charge. Unsubscribe anytime

Continue reading

iOS 13 Update Advertising on Facebook

How Apple’s iOS 14 Update Changes Advertising on Facebook

Hint: great creative is will be the name of the game. The Apple iOS 14 update doesn't need to be all doom and gloom for advertisers—we've got tips for success!

Branding package outline and tips

What’s Included in a Branding Package?

Whether you're refreshing an existing brand or starting from scratch, you need a branding package. We cover what a brand package includes, plus premium add-ons.

How to write a design brief

How to Write a Design Brief (+ Free Template)

Learn about what to include in a design brief, along with some tips on how to properly write one. Or, just access our free design brief template!

Hassle-free design starts here

Superside is an always-on design company that makes design frictionless and hassle-free for marketing, sales, creative and product design teams. This means top quality designs at lightning fast speeds, improved velocity and go-to-market and completely secure and confidential file sharing and collaboration.

In this one-on-one live demo, you’ll see:
- How Superside works
- A first look at the Superside platform
- The most suitable subscription plan for you

Get ready to join 140+ scale-ups and enterprise teams doing good design at scale with Superside’s dedicated team model.
Want to start a design project instead? No problem, get started here

Book a call with us

First name
Last name
Email
Company name
Company size
Phone number
We need your phone number for the demo. We'll never use it for any other purposes.
Book a demo

Company

Learn

Book a demo
Superside is a revolutionary way for businesses to get good design done at scale.
Trusted by scale-ups and enterprise teams, Superside makes design hassle-free for Marketing, Sales, Creative and Product Design teams by combining top designers and project managers from all over the world, with purpose-built technology and the rigour of designops. Since inception, Superside has been a fully remote and distributed company based in Palo Alto, California, with 180+ employees working across 50+ countries and 19 timezones.
Privacy Policy