Visuals communicate ideas faster than text. That's why hero images (those large photos or illustrations at the top of home pages) are a popular design element on home pages. It's the first thing that people see when they visit your site, so it should be professional and make a big impact.
A hero image is often a combination of image and text, and can be static (just one image) or dynamic (rotating several images.)
This graphic should make a great first impression, capture the visitor’s attention, and help convert users into customers. This image (or images) should boast a few key elements to take the top place on your site.
Visual impact: The photo should wow your audience. It should be a professional photograph with great lighting, color and contrast.
Storytelling: The image should support your businesses story. What problem you are solving for your customers? How will you solve it?
Text supporting your brand: The hero image is often used in combination with your brand's tagline and/or call to action.
Here are a couple of rules when shooting and designing for a hero image. (We shot this set of images for career coach Whitney Marshall.)
Horizontal format: Many of us are viewing site on our phones now, but the majority of sites are designed first for desk and laptops.
Resizing for quick loading times: Large images can be a drag when they take too long to load. Resize the image yourself, rather than letting the browser resize it. If you are designing in Wix, Squarespace or a similar platform, they should provide you with guidance for cropping dimensions.
Communicate with your photographer: When you are looking for a hero image for your site, let your photographer know that's the goal of the shoot. You will need to give them some information about your business so that they can pick an appropriate location, props and poses to tell your story.
Remember, a hero image isn't merely selected. It's planned, crafted and edited for maximum effectiveness.
