15 Templates With Awesome Hero Headers

AliceL

Oct 14, 2015

One of the biggest trends in web design right now is hero header - the huge image at the top of the home page. Initially, hero headers were oversized photos directly related to the content, usually it was a photo of the website owner or their work (especially on the portfolio websites and blogs).

Nowadays hero header is much more than a simple high resolution photo. Designers love to play with this thing, so you can come across hero headers in the form of illustrations, vector backgrounds, images with animated elements, image sliders and even video. There are hero headers with text, navigation elements, there are really no limits here.

Being the first thing to be seen on a website hero header has to be of the utmost quality, it has to be relevant and exciting, or at least visually appealing. Here are a few other things to be considered when using a hero header on a website:

If you want to include branding make sure the logo or brand mark does not deflect attention away from the image, if possible - opt for monochrome color scheme logo, and place it at the top left corner.
Use bold typography. But make sure only the most important text over the image is really big, the rest should be subtle and unobtrusive, including the navigation elements.
So, one big picture and one big piece of text is the way to go.
While we are talking about text and typography - opt for large and thin typefaces. These are more trendy currently and easier on the eyes.
It goes without saying - all the text has to be readable.
Pick simple color schemes.
Include visual cues to help your visitor understand what is to be done next (click or scroll, or maybe you invented a new way to navigate).

To illustrate hero headers done well, here are 15 templates with hero headers from our collection of premium templates. I hand-picked the most unusual, exciting examples for you.