A hero image is usually the first thing people see when they visit your website. It’s important that it sets the right tone and makes a good first impression. Ideally, your hero image will be:
- Consistent with your overall branding and messaging. Make sure your image reflects your overall visual identity (logos, color schemes, style, fonts, etc.) and tone (serious, playful, emotional, scholarly, etc.). Your image should also be consistent with the rest of the site. Your website should have as cohesive a visual design as a storefront would. Remember that everything you do is telling the story of your brand. You don’t want to send mixed messages to an audience that is already bombarded with information every day.
- Goal Oriented. Every design choice you make should be intentional and should serve a purpose. Your image should be directly related to the content of your site and your business’s overall mission and goals. Visitors should immediately understand what your site is about or be inspired to learn more. Ask yourself what the image is doing for you, and realize that your audience comes to your site asking what you will do for them.
- Engaging and motivational. When most people hear the word “motivational,” they think of “hang in there” posters and inspirational social media posts. Your website does not necessarily need to be motivational in that way; rather, it should be motivational in the sense that it motivates people to act. Your hero image should include a clear Call To Action, or, at the very least, an implied action visitors should take, even if it is only to learn more by scrolling. Always ask yourself what you want your audience to do.
- Evocative…in the right way. Your hero image should set a tone and make visitors feel something. What that something should be depends on your existing branding, your marketing goals, and your audience. If you’re a spa looking for customers, visitors should feel calm. If you’re a charity looking for donors, visitors should feel moved. If you’re an author of esoteric philosophical texts, the vibe should be cerebral. Whatever your goal is, your hero image should resonate with your audience in a way that supports that goal.
- High quality and well designed. No matter what kind of image you choose, it should look good. If you choose a stock photo, make sure it’s high quality, professional, and isn’t overused. If you take your own photo, make sure its resolution is high enough that it isn’t blurry or pixelated. It should have a clear focal point and good lighting. If you design a graphic, make sure it’s composed well, has plenty of negative space, draws attention to important elements, and is visually appealing. Make sure your image is not jarring or hard on the eyes (unless that’s something that specifically supports your brand).
- Genuine and authentic. It’s important that people see every element of your site as representative of your real business and real values. Stock images are most definitely ok as long as they convey a truth about your brand. If you have trouble striking that balance, remember that real is often better than perfect. Real customers, products, or staff are great in hero images because they make your audience feel connected to you.
- Responsive and correctly displaying any text. It should go without say at this point that anything you have on your website should display correctly across all kinds of screens. It’s especially important to test the responsiveness of images overlaid with text because the elements can shift around on different displays. Allow plenty of space for any written elements and make sure the contrast is high enough that reading them is easy.
- Optimized for speed. Last, but not least, make sure your hero image and home page in general load quickly. Slow load times are a pet peeve for most people; a lot of them will not stay on your site long enough to wait it out. Additionally, slow load times can hurt your search rankings. Never neglect the technical aspects of your site’s design. Performance is at least as important as appearance.
Substance and Style 