By Gregory Smyth
What is the Hero Section (or Hero Shots) in Website Design?
A hero section (often called a hero shot) is a graphical representation of your web page’s reason for existence: the product or service that you are selling. The name sounds odd, but it is not just about the looks with no relevance to the effect. The hero section literally acts as ‘heroes’ for your website design, rescuing them from a life of ineffectiveness and not being read by visitors. We will look at how to use hero shots, including the best placement in relation to text, general creative guidelines, and some little-expressed rules for digital marketing success with the hero section.
Creating Effective Hero Section (Hero Shots)
Creating the hero section of an actual product is easiest in website design; however, it is still possible to have a hero shot of a service, presentation, or white paper. For presentations, use a photo of the presenter; for white papers, use a mock-up of the cover. If it doesn’t have one, create a digital mock-up – analytics tools reveal that your marketing strategy is best supported by using relevant graphics, even if they are simple. The authenticity is the primary driver of the conversion. Stock photos or clip art should be generally avoided in the website hero section, as consumers tend to see the product being sold as ‘fake’ or ‘imaginary’.
In cases where your marketing efforts are directed towards selling a service, you can use a hero shot of the service in action. Landscape gardeners can use photos of lawns in the process of being mowed, and so forth. For more intangible services, a photo of your office building, your team, or even a behind-the-scenes look can be most useful. Using these elements as hero shots helps reassure customers about the validity of your business. Charts depicting your business results, client logos, or award badges are also frequently recommended by online marketing agencies.
Placement and Design Guidelines
For hero sections, make sure that any lead-up to your landing page matches the website design guidelines as much as possible to maintain the visual continuity. Keep colors, logos, and fonts consistent. Analytics platforms reveal that landing pages with a visual disconnect from the ad or email that a visitor first clicked on tend to cause quick exits.
Placement is also another important factor for the hero section. They should be placed in a prominent position on the page, usually above the fold and near the primary call-to-action for all devices. Placing a hero section to the right of your text can reduce attention on the copy. Online marketing agencies and landing page creators advise limiting yourself to a single hero shot for a page (except on e-commerce results pages, where multiple product images are expected). Marketers see best results when hero shots are well-placed, responsive, and not covered by copy.
Relevance and Trustworthiness
In this AI era, where everything seems to be unauthentic, real and authentic photos perform better. Using authentic photos signals that your product or service is real and reliable. Despite sometimes looking less polished, a photo of your actual service or product is seen as more trustworthy than a generic stock photo or any photos that are generated by AI. If you are using a customer photo for a testimonial as your hero shot, images showing ordinary people in real situations tend to deliver better marketing results than glossy studio portraits, which are often perceived as less authentic.
By turning your hero section into a functional tool, your website converts visitors into premium leads while making a powerful first impression.
