Website Design: Top 5 Essentials for your Homepage Header

Nusa Lembongan, Indonesia photo by mark l chaves

This article covers what components must be in a home page header.

The concepts here apply if you are designing your first site and you are not a household brand like Starbucks, Nike, or Coca-Cola. The suggestions below are based on 2017–2018 website design trends.

Home Page Header Must-Haves

(with the top three as the highest priority)

1. The name of the site or some sort of branding (logo symbol or wordmark).
2. A headline (or tagline) that states what you do or the service/product you provide.
3. A wide screen bold hero image, illustration, or accent colour.
4. Loads of white space.
5. A call-to-action.

Let’s briefly describe each component using a real-life example.

BaliStreetPhotographer.com — An example of the header must-haves.

The Name of Your Site — Am I at the right place?

Viewers must know if they are at the right website. Your homepage header tells them if they are beginning with your site’s name. This is why the name is the highest priority must-have. In the example header above, Bali Street Photographer is the site name. I hope that’s obvious.

The Headline — What is that you do again?

Bali Street Photographer offers street photography tours in Ubud, Bali. What you do is critical for people to know. A visitor must know what value you provide at the moment (i.e. microsecond) they reach your site. Don’t disappoint them.

The Hero Image — The wow factor.

Without the hero image (or illustration or accent background colour — see examples below), your site can come off being sterile, cold, and boring. And worst yet, people might not think you are credible. The home page header is where you need a hero to “cinch the deal”. People have to know that you are the right person for their needs.

Whether your use a photograph, illustration, or a solid colour, it must:

1. Be relatable to your audience.
2. Capture their attention.
3. Be of high quality or at a professional grade to boost your credibility.

You did the amazing job of getting your site found. So, create a welcoming experience that makes people want to stick around.

Dont’ be Afraid of the Space — Use loads of white space.

The trend for the past few years is using ample white space. White space gives your site a clean, organised, and uncluttered look. Thus your home page feels pleasing. Framed by generous amounts of white space, your content becomes the centre of attention.

A Little More Action Please (A Little Less Conversation ~Elvis Presley).

[Let’s Do This] So, someone lands on your site. They know they are at the right place. They are looking for the exact thing you provide. They have warm fuzzies from your hero image. They’re ready to take action such as:

1. Booking a tour.
2. Reserving a room.
3. Signing up for your newsletter.
4. Making a purchase.
5. Downloading your PDF.
6. Learning more about what you do.

Don’t leave them hanging.

Diagram of home page header must-haves.

More Real-life Home Page Header Examples

Accent colour and simple geometry instead of a hero image.

Illustration instead of a hero image. And, notice there is no navigation. I don’t think navigation is critical for a home page header. That’s why navigation isn’t on my must-haves list.

Interesting abstract yet bold image. This image is animated on the live site.

Multiple hero images as a slideshow (a.k.a. slider).

The latest trend in 2018 and for 2019. No single hero or illustration. Instead, multiple smaller collage style images.

What is a home page header anyway?

There are a couple definitions out there. I’m using the meaning as defined by tubik studio.

What’s missing? What about social media or a menu?

Did you notice that my top five essentials don’t include socials or nav bar (menu)? This is on purpose. I don’t think these are imperative for a home page header. And, I think your socials should not be the first thing your visitors see. Just don’t go there. If you do, your visitors might go there (to your socials) instead and never come back.