‘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.
This Australian game development company use a shaped hero area which is a two-image slide show.
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.
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.
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.
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.
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.
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.
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.
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’.
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!
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.
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.
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.
Consolidated Container Company
This plastic packaging company has chosen to display a washing detergent bottle to promote their services on their hero area.
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.
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.
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.
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.
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.
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.