Exploring the Hero Image Trend in Web Design

Although hero images may not be donning capes and scaling skyscrapers, they are doing the next best thing: aesthetically pleasing folks on the Internet. The application of hero images can spruce up the design of a web page while also building depth into page content.

The trend of hero images may be summarized as large attractive headers. Most of these images are photographs that directly relate to the content. But designers have gotten crafty with vector backgrounds, illustrated artwork, and even animated video.

When push comes to shove, it is hard to find anything that can be as relatable and descriptive as a photograph. It drives visitors further into the site by giving them a peek beneath the surface. The portfolio of Andrew Elsass is a prime example of this technique.

His homepage uses a large header background image with a photo of himself. The colors blend nicely into the layout, and it gives an immediate personal touch. Browsing through the rest of his site you’ll notice each page also has a small header image background. For example his about me page uses another picture of himself.

Large headers are the bread and butter of hero images (I’m not sure if the hero is the bread, or the image is butter).

Basically, the hero image style is a fundamental concept that can be applied to any large “oversized” header design.

For a slightly different approach take a look at Cleverbird Creative. Their homepage uses a fullscreen background image that scales to take up the entirety of your monitor. Then as you scroll down each individual section has its own background or photo. This is a different approach to the same concept using large background images to incite curiosity in the viewer.

Related article: Creative and Unique Ways to Use Stock Photos

Large fullscreen backgrounds and hero images can be used in single-page designs with ease. Most of the time these landing pages or parallax websites only have a small amount of information to provide. Therefore, fancy aesthetics can add real value to the page and offer space between the content.

The example found on Gladz is cool because it utilizes a number of different hero images. The very top of the page uses a fullscreen background that contains a fixed navigation bar. Then as you scroll further you’ll notice a smaller image that spans the full width of your browser, yet doesn’t take up the full screen.

It’s almost like a non-contextual heading that designates a new section on the page. This is definitely a great website design and fits beautifully with the single page style.

Depending on the type of website, a fullscreen image header may just take the cake. A delicious strawberry cheesecake represents one heck of a brilliant idea. I would consider fullscreen backgrounds an offshoot from the hero image concept. It’s similar and definitely related, but not the same.

Christian Woo has a website showcasing his furniture, interior design, and architectural prowess. Each individual page uses a background photo to expand upon his body of work. The pages themselves are very small and do not require a whole lot of content. Therefore instead of leaving the pages devoid of color, his design uses a photograph to liven up the page.

An alternative yet beautiful technique can be found on the August digital marketing agency website. Their header isn’t completely fullscreen but it takes up a very large portion of the monitor. Interestingly enough it’s actually not a photo, but a custom illustration.

This is one of the best ideas for creative artists and agencies who want to show off their skills. People who land on your page may not know a whole lot about you or what you do. So it helps to immediately demonstrate your value by incorporating samples of what you can do directly into the website design.

To add something a little bit different into the mix check out Sweet Basil. Their homepage uses a series of rotating photos which immediately demonstrate the value of their restaurant. As you check out different pages on the site you’ll notice some of them also use small hero images for accentuation.

The number of online blogs and magazines has increased tremendously over the past few years. WordPress is currently one of the most powerful open source blogging platforms which many websites use for content management. Ever since WordPress came out with featured images there has been an influx of exceptional magazine themes.

One point to note about these themes is their use of different featured images on the homepage. Yes, each article page uses its own image, but the homepage is where most visitors get introduced to the site. By incorporating a large hero image into the header it draws attention to that article and possibly other articles.

DIYMag has a large image tagged onto the top article. Every other article has a similar image but the thumbnails are sized a lot smaller. Granted once you click on the article it’s also used as a large heading display. Definitely a perfect method to draw visitors further into the blog.

You’ll find another example on GOOD Magazine which uses many similar featured image sections. The most important posts appear towards the top of the page with larger images and headline text. The purpose is to draw attention and captivate new visitors further into the site.

Some designers prefer to get dynamic with their heroes – and yes that is a Batman & Robin reference. You see, much like Batman’s utility belt, rotating backgrounds offer a panoply of resources and options. You can include photos of a person, a building, office space, or even creative work.

A cool example can be found on Matter of Form which is a branding agency. Their fullscreen image display allows visitors to switch between different pieces of content on a whim. It’s captivating, insightful, and provides a deeper look into the company’s purpose.

For a slightly different approach take a look at the homepage of JanSport. This layout doesn’t use fullscreen anything but it still incorporates a slideshow of hero images. The header is meant to advertise their products with a seemingly popular method – photography!

The slider automatically rotates but also gives the visitor control through arrows and small dot-navigation links. This is definitely a good choice for e-commerce shops that wish to bring attention toward their products or services.

Some may not consider this example a full hero image because it doesn’t take up an enormous part of the header. But I would define a hero image as any type of banner or large graphical component in the heading section. JanSport’s hero image may be subtle, but it’s also boisterous enough to catch my attention and still looks great with the overall layout design.

One final example can be found on the portfolio of Melyssa Robert. These rotating images link out to external pages which demonstrates a more pragmatic purpose compared to static photos. But the design concept is still very much the same by placing a focus on content and user experience above all else.

By following these trends you should be able to recreate your own hero images that pop right off the page. Web design is a long journey and there’s always more to learn.

Now that you know how best to use hero images, take a look at some web design templates from Envato Elements that are designed to be aesthetically pleasing.

By investigating the most popular trends you can analyze why they’re popular and determine their value in your own work. So get out there, try your hand at designing some hero images that fits your web design, and make Bruce Wayne proud to call himself the hero that Gotham deserves.