The Use of Hero Areas in Website Design

‘Hero area’ is a fairly new term in website design, but a well tried and tested part of print design and it has been for years.

It is from print design that the term ‘hero area’ comes, and it is a large area at the top of the page/screen that is usually full width, and gives the reader/visitor an idea of what the printed matter/website is all about.

It differs from large background images only really in it’s height – a hero area usually occupies about half to two thirds of the landing page depth, and is followed by the content, icons or text or even another slide show as you scroll down the page.

Hero areas can be a slide show or a static image, and they come in varying shapes, sizes and designs. Here is a selection of sites that use hero areas in their design.

Hero Areas in Website Design

Windy City Crossfit

This gym facility uses a hero area that contains a top bar with a couple of menu items and their logo, as well as a hamburger menu icon for all categories. The white area with a subtle texture contains a badge and the company’s ‘belief’. All designed to make visitors want to look further.

Windy City Crossfit

Sproing

This Australian game development company use a shaped hero area which is a two-image slide show.

Sproing

Herrenuhren24

This site uses what I would call a traditional hero area. A full width but quite small in height static image with their name in white headline text and a top navigation bar – this is what we typically see in print hero areas.

Herrenuhren24

Fy

The hero area on this site does not stand out as a hero area, but it is there! The larger white area with green squiggles, the company logo and a couple of taglines is a static hero area.

Fy

Charlie Deets

Charlie Deets works for Facebook in the ‘Privacy team’. He uses this FB illustration for the hero area on this site. The whole area is a link, although clicking it only refreshes this same page. The hamburger menu button, when clicked, takes you way down the page to the menu and contact form.

Charlie Deets

Giuliano

This Italian restaurant situated in England uses a hero area slideshow on the home page, with a carousel of three images, the plate of food shown below, bottles of red wine and a shot of the inside of the restaurant.

Giuliano

Aristide Benoist

This front-end developer actually uses ‘hero area sections’ – each section of his page is in a very pastel color, and the same height with a number in black, a text headline in white and a round call to action button.

Aristide Benoist

Your Leadership Edge

This site uses a pleasant image of smiling, students as the hero area, which is actually a video that you need to start using the play button in the middle.

Your Leadership Edge

Enro

Enro use a three image slide show for their hero area, followed by their selection of shirts presented in a manual slide show where you have to click the left and right arrows to move it on.

Enro

Istanbul Education Consultancy

The IEC use a slide show of three images for their hero area, each image has white headline text over a very blue/purple hued transparency, with a call to action button if you want ‘More Info’.

Istanbul Education Consultancy

Burger King

The Turkish version of the Burger King site uses a slide show of six images for the hero area, all images have different backgrounds, and show their products and current offers. Overlapping this area is another slideshow of further offers and products presented in individual boxes, then below that is a grid style layout of even more items – you don’t have to miss a thing here!

Burger King

Integrated IT Solutions

This site uses an animated image for the hero area, but rather than a fly-out menu that is very common these days, the site menu section is static on the right side of the screen.

Integrated IT Solutions

The Base

This is the promotional site for a shopping mall in New Zealand. The hero area is situated behind the main body of this design and contains the logo and the top navigation bar. If you refresh the page you will find there are a few different hero area images.

The Base

Saffola Fit Foodie

This healthy eating recipe site uses a slide show of four images for its hero area. The rest of the page, as you scroll down, is presented in a grid-style layout with mouse-over animations.

Saffola Fit Foodie

Consolidated Container Company

This plastic packaging company has chosen to display a washing detergent bottle to promote their services on their hero area.

Consolidated Container Company

KODA

This branding agency uses a large hero area with very little populating it. Large rotating headline text with a tagline below it, the company logo and a hamburger menu button are all that is on this area. As you scroll down the page each section is clearly defined by a background image or a different color.

KODA

Birmingham Community Healthcare

This UK National Health Service department uses a full width hero area using an image of children with a nurse. Large white headline text and a search box sit over the image.

Birmingham Community Healthcare

Amtrak Train Days

This is the site of the American railway company Amtrak, and they have chosen a beautiful image looking along a train track in the sunset for their hero area. They use white headline text and a blue call to action button over the image.

Amtrak Train Days

Big Omaha 2015

This site uses a white hero area with blue headline text and a rotating last word of the sentence – it changes as follows: Join us for the nation’s most creative/energetic/inspirational/collaborative/ visionary conference on innovation and entrepreneurship.

Big Omaha

Erican College

This Malaysian college uses a slide show hero area with images of happy students. A static side bar follows the screen down the page including social media buttons and an ‘Apply Now’ link.

Erican College

Conclusion

In many ways web design regresses back to the past in order to move forward, and hero areas is one of those ways. In the past all kinds of websites used hero areas – and they were referred to then as headers or large header areas. Most current trends are in place to accommodate viewing on mobile devices, and hero areas are no exception.

Have you created any designs using a hero area? Do you think hero areas will grow or decline in popularity? Please share your links and thoughts with us in the section below.

Advertisement