Website Design: Top 5 Essentials for your Homepage Header

Image for post
Image for post
Nusa Lembongan, Indonesia photo by mark l chaves

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

Home Page Header Must-Haves

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

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

The Headline — What is that you do again?

The Hero Image — The wow factor.

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

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

Image for post
Image for post
Diagram of home page header must-haves.

More Real-life Home Page Header Examples

Image for post
Image for post
Accent colour and simple geometry instead of a hero image.
Image for post
Image for post
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.
Image for post
Image for post
Interesting abstract yet bold image. This image is animated on the live site.
Image for post
Image for post
Multiple hero images as a slideshow (a.k.a. slider).
Image for post
Image for post
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?

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

Written by

I slung code for Fortune 500 companies in a previous life. Now, I write and make some photographs. I’ve moved on to Dev.to. Portfolio on CaughtMyEye.cc

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store