What do you imagine when hear the words “Hero image”? Most of younger population people will imagine pictures of Batman, Superman or other graphic novel characters. But for a web design this term has an absolutely different meaning. A trend for the use of huge photos and images on a Home Page emerged in web design during recent years. These photos got the title of “Hero images” and today hardly any cool website design goes without those big pictures in headers or backgrounds.
![](data:image/svg+xml;charset=utf-8,<svg height="342" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Hero images in web design today are the real heroes. They became so popular thanks to larger screens popularity and higher bandwidth use when bigger size photos can be loaded without any harm for website speed. Additionally, if we remember that most users are more likely to watch videos or see photos than read text, Hero images become great means of traffic and conversion boost.
Use of Hero Images in Web Design
Typically hero images are used for headers or backgrounds. A web designer should keep in mind a few rules for large images use to avoid overwhelming feelings and cluttered layouts. Here are a few pinpoints you should be aware of when using hero images in the header.
Images:
- Think responsive! In our era of mobile technologies using static images as well as other website elements is a suicide. Your design and hero header should look perfect on any screen size;
- Try using transparent overlay over a hero image. It will shift visitors’ focus to your message without hiding away an image;
- Don’t use too “busy” photos for hero headers and backgrounds. They will create a messy layout and distract people from your message.
Website Template for Tea Company
![](data:image/svg+xml;charset=utf-8,<svg height="314" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Sculptor Portfolio Web Template
![](data:image/svg+xml;charset=utf-8,<svg height="373" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Monochrome Photo Portfolio Website Template
![](data:image/svg+xml;charset=utf-8,<svg height="356" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Charity Organization Web Template
![](data:image/svg+xml;charset=utf-8,<svg height="346" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Water Sports Website Template
![](data:image/svg+xml;charset=utf-8,<svg height="380" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Text:
- Go for bold typography. Large images will grab attention, so you need to use bold fonts to deliver your message to users;
- Large-size font with thinner letters will look trendy on big images and stay readable;
- Don’t overdo with colors when you use large images. If you use bright colorful photos, go for black or white for other elements and text;
- Don’t use big type for a navigation menu or secondary elements like social media or non-title text. Large type for these secondary elements will create a messy picture.
Web Template for Insurance Company
![](data:image/svg+xml;charset=utf-8,<svg height="339" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Web Template for Video Production Studio
![](data:image/svg+xml;charset=utf-8,<svg height="360" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Personal Website Template for Psychologist
![](data:image/svg+xml;charset=utf-8,<svg height="318" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Web Template for Fishing Club
![](data:image/svg+xml;charset=utf-8,<svg height="317" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Travel Agency Web Template with Fixed Menu
![](data:image/svg+xml;charset=utf-8,<svg height="323" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Elements:
- Try to find the best place for navigation menu within your hero image. Make the navigation bar fixed to allow users easily scroll and click around the page without losing opportunity to navigate to some other place;
- Don’t forget about branding! Place your logo above a hero image, usually – on the top left corner of the page. Try not to use bold colors for logo;
- Use ghost buttons over hero images. This another popular trend today seems to make a perfect combination with huge photos due to its subtlety and lightness;
- Place text, buttons and other design elements in such a way that they don’t cover important parts of the photo like human faces or brand products.
Interior and Furniture Studio Web Template
![](data:image/svg+xml;charset=utf-8,<svg height="341" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Web Template for Web Development Studio
![](data:image/svg+xml;charset=utf-8,<svg height="324" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Clean Website Template for Entrepreneurs
![](data:image/svg+xml;charset=utf-8,<svg height="334" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Travel Website Template in Dark Colors
![](data:image/svg+xml;charset=utf-8,<svg height="315" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Website Template for Scrapbooking Studio
It seems that the hero images trend will continue in web design at least in 2015. The main reason of using hero images is that they can be applied for many styles, from flat and minimalism to retro and high-tech. Do you consider using some hero images for your website design?