Hero Image Design Tips For Natural-Looking Website Layouts

The concept of a hero image isn’t new to web design, although the term was coined somewhat recently. These hero images are basically banners often placed in the background of a header behind some content. The photos promote the page’s content and drive people further into the layout.

Heroes are like an introduction to a website’s content. Photo choice is vital and quality plays a big role. But how do you create pages with hero images that actually look natural and work to promote a website?

In this post I’d like to distill some knowledge of design trends and photo resources for building quality hero images. If you’re already a skilled designer then you’ll understand composition for interface design, but may struggle with the ideas behind hero images: how do they work and where do they work best? Let’s delve in and find out.

Hero Images In Layout Design

The best placement for a hero image is above-the-fold where users have to notice them. Naturally these apply to landing pages but can also work well on personal websites, blog posts, and eCommerce websites.

Each hero image should be used sparingly and with a specific purpose. They are best used to help define content visually and draw people further into a webpage.

The homepage of Cincinnati design studio Papertelevision is a great example of hero image design in the real world. It uses a stock photo of someone browsing their tablet to relay Papertelevision’s service: building digital interfaces.

papertelevision homepage hero image

This specific photo also has layered effects to help it blend into the background. Color overlays and varying contrast makes typography easier to read when it’s in the foreground.

But it’s worth noting that specific eCommerce retailers can benefit just as much from hero image placements.

CatScarf is, as the name suggests, a shop for cat-sized scarves. Their hero image photo is straight to the point and gives visitors a clear shot of what they’re selling.

cat scarf hero image layout

Each product sample is far more interesting once the visitor has seen the scarf in action.

Also note that both sites place links and text on top of the hero image. This is very common practice in web design to both save space and create a certain ambiance right above the fold.

Organize Photos Around Content

The use of a hero image by itself can improve page aesthetics, but additional content adds pragmatism to the design.

For example the Fireworx Agency homepage uses parallax motion as part of their hero image content.

fireworx agency hero image

Moving your mouse around the page gives life to the photo of the businessmen and the confetti they’re bashing out of a paper mâché horse. This motion in many ways brings the page itself to life and encourages user interaction.

But just because fancy effects can draw attention doesn’t mean you should always follow them. Hero images can work in many different formats.

Take for example the Jeff Bridges landing page. It focuses primarily on a new album and his music, but uses a dark nighttime photograph to reflect the domain “dreaming with Jeff”.

jeff bridges sleeping tapes landing page

Natural photography with some relation to the content often performs the best. It sets the mood for the site and draws people further into the page.

Metaphor is a big part of hero imagery and can work just as well as product shots or interior photos of a business space.

But in all cases remember to place content first and make the hero image follow.

Use Photos Appropriately

Don’t over-do the hero image design by forcing too many photos onto a website. I find that hero images work best on very specific pages:

  • Homepages
  • Blog posts
  • Landing pages
  • Product pages

Other examples might include longform content or personal info for a bio page. But if you use a hero image on every page of your site it can lose its effect—but this isn’t a rule, and I’ve seen many sites with hero images on every page that fit well together.

Take each project in stride with its own needs and learn where hero photo(s) can fit best. Design a layout and content to make room for these photos as appropriate.

henrik and sofia hero image background

Portfolio websites can use hero images to give a more personalized feel to the content. For example Henrik and Sofia use a photo of themselves for their Swedish creative agency website.

Again this technique works best on the homepage so new visitors know exactly what the site is all about.

Restaurants should also consider using hero images to showcase their food, location, and ambiance of the interior. This is done well on the websites for Sweet Basil and 5 Napkin Burger.

five napkin burger hero image

But remember that blog posts can run hero images beautifully when placed in the proper context.

My favorite example of hero image blog posts are on The Verge. They do longform content that has its own fullpage layout design. These longform blog posts include relevant hero images to draw readers into the ambiance of their writing.

Photo Quality Matters

Just like a website’s layout and user experience matter, so does the quality of hero images.

If you’re a pro photographer then you know how much a quality image can make all the difference. Since digital photos help build reputation for the site or brand, your eye for photographic brilliance needs to be on point.

Whether you take the photos yourself or find them online, don’t settle for sub-par quality.

And no matter how you get your photos it’s always worth editing them in Adobe Photoshop before publishing. This way you can boost/lessen contrast, alter colors, or make edits to help the photo(s) blend into the page.

Where To Find Quality Images

Unless you’re a quality photographer you’ll need to locate creative commons photos. And even if you are a quality photographer, you might not have access to objects or scenery that fit with your current web project.

Luckily other photographers often release their work online for free. Some require attribution but many release all rights under a CC0 license.

To see a huge collection of these genuine-looking stock photo sites just visit this GitHub repo. It’s a tremendous collection that’s growing larger every year.

But to get you started here are some of the best sites to consider, many of these websites even use hero images themselves!

Wrapping Up

Hero image design is mostly about placement and relevance. Whether you’re an experienced photographer or just scouring through creative commons photos, UI design skills make a world of difference with hero image placement.

Hopefully these tips and resources can get you started on the right path to designing quality websites with relevant hero images.

And if you’re hoping to learn more about photography in web design check out these related posts:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.