Mr. Bruce Wayne himself couldn’t have thought of a more impactful trend in web design. Hero images have become the model for large and flashy headers. It’s crucial that you understand how to draw attention onto any part of a website. The application of this technique using a fantastic hero image can spruce up the design while also building depth into page content.

Although hero images may not be donning capes and scaling skyscrapers, they are doing the next best thing: aesthetically pleasing folks on the Internet. I want to delve into the topic of hero images and how they apply to the field of web design. Photography will always be a part of this subject but there’s quite a few talking points worthy of consideration.

Large Headers

The trend of hero images may be summarized as large attractive headers. Most of these images are photographs which 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’s hard to find anything which 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 fullscreen 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 which 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 which scales to take up the entirety of your monitor. Then as you scroll down each individual section has it’s own background or photo. This is a different approach to the same concept using large background images to incite curiosity in the viewer.

Single-Page Design

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 into the page and offer space between 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 which contains a fixed navigation bar. Then as you scroll further you’ll notice a smaller image which spans the full width of your browser, yet doesn’t take up the full screen.

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

Fullscreen Backgrounds

Depending on the type of website, a fullscreen image header may just take the cake. A delicious strawberry cheesecake representing one heck of a brilliant idea. I would actually consider fullscreen backgrounds an offshoot from the hero image concept. It’s similar and definitely related, but not quite 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 & 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.

Featured Post Content

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.

Rotating Galleries

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.

Closing

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. 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, and make Bruce Wayne proud to call himself the hero that Gotham deserves.

You should also check out our post on Video Backgrounds in Web Design. We assess the importance of having video backgrounds in your web design projects, as well as mention a couple of down-sides.

You could also have a look at these beautiful & high resolution hero image templates as well.

Discover some beautiful Background Hero Images on PhotoDune →