Connect with us

Web Design

Hero Images: Trends & Examples For Web Designers

Hero images are the large background photos you see in website headers. They’re prominent on ecommerce sites but have branched out to every major type of website.

These large hero images are a staple of modern web design but they all come with their own techniques. In this post I’ll showcase a bunch of hero image styles and how they fit into a typical layout.

Whether you’re looking for design inspiration or just want to learn more about hero images this post has you covered.

Personal Hero Headers

I typically find the best hero image designs on personal websites. These usually feature a single person or a group photo of team.

But personal portfolio sites are incredibly common to showcase work from artists, musicians, designers, programmers, and all types of freelance work.

The most common hero shot is a picture of yourself whether it’s from a pro photo shoot or a random photo from your smartphone. Check out Ellen Skye Riley's website as one example.

ellen skye riley portfolio

Her design uses a full-sized hero photo of herself posed in the background. It fits nicely with a pure black & white style which is common for background photos on the web.

Because this takes up the entire page it clearly defines what the site is about. It’s a website about Ellen & her work. The photo places focus exactly where it needs to.

This same technique can be seen on the portfolio of developer Fabian Irsara.

fabian irsara portfolio

Granted this page comes with a totally different background effect so when scrolling you’ll notice the photo fades out of view. It’s not really a typical hero design but you can see how this affects the overall page layout.

Look for these hero headers on personal sites and portfolios that you find around the web.

And if you’re launching your own portfolio site I absolutely recommend keeping some of these designs saved for inspiration.

Interior & Location Photos

Another technique for hero images moves away from people and more towards locations. These photos work well for travel websites to promote a certain city/country.

But these photos also work nicely for small businesses, agencies, and restaurants where a visual of the location directly affects customer perception.

cheesecake labs portfolio

Take for example the hero background for Cheesecake Labs. They use a blue overtone on the photo to create a see-through monochromatic style.

With this color scheme you can easily read the words on top of the page and figure out what the agency does. It shows a clear interior shot of the agency and you get to see their team hard at work.

Sometimes this works better with empty rooms or photos of the exterior of the building. It all depends on your team’s location and what the studio looks like.

For businesses I recommend exterior shots or long-view interior photos. One nice example is the hero image on Belmont Barbershop.

belmont barber shop hero image

What I like about this hero header is the darker style and clear photography. It takes on a professional view of the barber shop by displaying the interior and the patrons together.

One other example is the Chianina Steakhouse with a darkened interior shot of the whole restaurant.

chianina hero header interior

Again this uses the interior to help sell the location and the service. People go here for the food but every restaurant has its own atmosphere that affects the dining experience.

Businesses where the customer goes inside the location might use interior/exterior hero photos. If you search around for amazing restaurant websites you’ll notice this trend everywhere.

Magazine-Style Heroes

The rise of online magazines has been climbing steadily over the past few years. The divide between a simple blog and a detailed magazine has grown quite large with one major distinction: the quality of images.

Great online magazines all use high-quality images for their featured photos. Many of these appear as hero images at the very top of the article page taking up the entire header.

intercept blog hero photo

Notice in this Intercept post you can see the hero image spans the entire width of the screen. But it still leaves room for the headline to grab attention.

When you add hero images to your blog you want these to have a bit more flair than traditional featured images. Typically they’ll span the entire width of the screen and feature very high-quality photography.

I understand that not all bloggers can support these huge images so you have to take that into account.

wdd featured image hero

But heroes are a great way to immediately grab attention and help sell an idea. This is especially true for lengthy blog posts where visuals can help grab attention quickly.

Catchy Product Photos

Every marketer knows that great photography sells. And what a better way to sell something than with a huge hero image at the top of the page?

Strong product photos belong in hero headers for product-based websites. Many times these are ecommerce shops but they can also work for digital products or SaaS tools.

Take for example the LeanKit homepage.

leankit landing hero photo

The header image for this page showcases LeanKit as it would appear on your laptop. You get to see the full dashboard for visualizing your calendar and your workload.

Granted this image may not immediately have you clamoring to sign up for a new account. But it’s much better than someone smiling while holding a smartphone or some other cheesy stock background.

But while these cheesy stock photos are terrible, I actually do like the photos of people using the products in action. Detectivedot has this in their hero header with a kid reading through one of their books.

detective dot hero header

This site targets children who want to learn coding from a young age. They publish stories and guide books to get kids interested in programming and to learn the fundamentals in a fun way.

As you scroll down the page you’ll find a slideshow of photos with other kids reading these books.

None of the photos feel cheesy or out-of-place so they only improve the quality of the brand. If you can get high-quality personal product photos then you can build a solid brand design around them with hero images.

apple macbook product header

When I think of marketing and photography my first thought is Apple. They do amazing product photos that really showcase the product in a sleek, stylish manner.

But not every product is a groundbreaking personal computer. And not every product should be marketed like a personal computer.

Use your best judgement when designing a product hero image and consider how your average customer wants to use the product in real life.

Moving Forward

If you’re launching a business site or landing page then you might consider adding a hero image into the header. This is a great idea to grab attention and pre-sell an idea.

But with so many techniques you may not be sure where to start!

Hopefully this guide offers enough to set you on the right track for a beautiful hero header. As long as you focus on usability first with quality photos you’ll have no trouble crafting an incredible layout.

Jake is a freelance writer, designer, and illustrator. He currently writes articles on user experience design for web & mobile. You can see more work on his portfolio site and follow his tweets @jakerocheleau.

Click to comment

More in Web Design

To Top