Capture the viewer’s attention, increase time on page, and improve user experience.
The hero section of a website is a design trend where the top section of the website fills most of the screen or the entire screen to grab attention and share important information. Example hero section goals:
- Promote a product launch.
- Introduce your brand’s unique selling point.
- Explain what your brand does.
- Get viewer to convert.
- Promote a sale.
- Establish brand voice.
- Increase time on page with an interactive hero section.
These are format considerations:
- Video: Tells the brand story, introduces services, and increases time on page. Videos typically are automatic, loop, and should have no sound like Beta rock climbing gym’s website that uses a video to silently establish who they are and what they offer.
- Carousel or slider: Lets you feature more than one hero message in the same space and is interactive. Peep Laja, CXL Founder, does not recommend carousels for hero sections because they can distract from their messaging and are not always user friendly.
- Image with overlaid text: Provide context about the brand and deliver a call to action.
- Product image: Features a specific product or campaign with a call to action to check out that product.
- Graphic or illustration: A visually appealing way to establish brand voice that pairs well with compelling copy.
- Adaptive design: Creates a reusable design structure for different campaign launches, like this Nike example, that could be reused with different pictures for the next campaign.
Find persuasive visual media for your hero section by looking through media libraries or using original content.
For example, if your brand sells ice cream flavors, a persuasive hero image would:
- Be contextual, relevant, and descriptive: For example, an image of ice cream cones, not a starry sky or a plate of a variety of desserts.
- Tailor to your target audience: For example, feature a family enjoying ice cream if your target audience is parents.
- Demonstrate your unique selling point and customer benefit: For example, if your USP is that your ice cream doesn’t melt, choose an image that reflects this message instead of a stock photo with a dripping ice cream scoop.
- Be benefit oriented and reflect brand values: For example, an image of a smiling and laughing family that shows that your ice cream makes people happy and brings families together.
Find high definition images, vectors, and icons on the following sites:
- Royalty free images: Burst by Shopify, Unsplash, Pexels, PicJumbo, or Pixabay.
- Paid images: Creative Market, Stocksy, or 500px Prime.
- Fonts and icons: Font Squirrel, Google Fonts, DaFont, Typekit (paid), Webtype (paid), Flaticon (icons), or Iconfinder (icons).
Compelling hero section copy should:
- Be written with your target audience in mind
- Tell the viewer about your brand, product, or service: For example, Farmigo’s hero section explains that they ?are Software Designed to Grow and Manage Your CSA or Food Hub.
- Be benefit-oriented: For example, BuzzSumo’s hero section says Find the content that performs best.
- Include a call to action that starts with an action word: For example, Shop Now, Learn More, or Get Your Free Trial. Not all hero sections include a CTA.
- Be concise: Build on the background image or graphic by providing more context. Copy does not have to include every aspect of this list all at once. Prioritize one or two methods, like benefit-oriented and CTA, to be concise and meet your goal.
Prioritize contrast when choosing font colors, font thickness, button sizes, and call to action colors to make the image and text easily legible within a second of opening your website. For example, Tubik’s hero section mockup for a solar energy company has a dark image of a house at night with the text in white and the call to action in bright yellow for contrast and visual appeal that fits the brand message of bringing light to homes. The font is easy to read, and the word future is bolded for emphasis.
Wireframe tools, like Adobe XD, Figma (free), and UXPin are useful for mapping out your hero section design without needing coding experience.
Image best practices include:
- Image width should be between 1500 and 2500 pixels.
- File size should typically be under 500KB for a fast loading speed.
- Image or video should be high definition. 1080p is considered full HD.
- Make the hero section responsive by using multiple image sizes that are cropped for each device size. Use a responsive breakpoint generator to crop images to the right sizes.
- Text should be on a separate layer and coded properly with HTML, instead of being in the image. If there is text in the image, upload as a PNG to reduce blurriness.
Experiment with the hero section’s written text, call to action placement, color, visuals, and more, through A/B testing.
Set up A/B or multivariate tests for your website hero section to see which elements convert. Create variations of your hero section, like different call to action placements or colors, different messaging, or different visual media types to see which hero section resonates the most with your audience.
Last edited by @hesh_fekry 2023-11-14T12:20:33Z