The next type of hero image used by online businesses takes an alternative approach to showing their added value: showing their customer using the product. This is where background overlays and filter effects can be extremely helpful. If you’re adding text in front of your hero image (or a component of any kind) - make sure the contrast between the website elements is strong and easily visible. Whether your background image is a photograph, a video, an illustration, etc., the image file should be as lightweight as possible, with crystal-clear resolution.
Invest in the Quality of Background Images.Prospective subscribers are avocado enthusiasts seeing an up-close, intricate photograph of the produce is exactly what they’re looking to see. Prospective shoppers expect to see real product examples, fostering educated decision-making about the store’s relevance to their shopping needs.Īvo lover used Elementor to build their e-commerce site, used by their customers to sign up for weekly subscriptions of fresh avocados delivered to their door.Īvo lover’s customer base is a niche market within a narrowly defined area of interest, and so their product hero image choice makes perfect sense. Product hero images are commonly found on e-commerce sites (although not exclusively). A screenshot of a digital product interface, such as a dashboard.A detailed example/snapshot of an individual product, as we see above on Australian subscription company avo lover’s site.Popular ways among web creators to present and style their product hero images can include: These images can be presented in static or in motion/in action - as long as they visualize the product’s value proposition. The value proposition is as clear as the pool water, and users comfortably absorb all the information necessary.Ī product hero image is a large, high-definition image of the brand’s product. Taking this one step further, the styling choices of full-height and “Cover” sized background image indicate the company’s robust talent for creating luxurious residential properties. The appealing, crisp photograph of a blissful, modern home and outdoor pool triggers positive, relaxing vibes. For their Elementor site, the homepage hero image makes perfect use of its “above the fold” interface. The screenshot above is taken from Millbrook Construction, a Perth-based construction company specializing in “residential construction with a high-end finish and attention to detail”. Honing down on effective brand imagery will capture your entire story in one visual medium. Instead of verbalizing your brand story and proposition, you may be able to lighten your user’s cognitive load in a simple, user-friendly way. In this sense, using a picture, illustration, or video is worth 1,000 words. You might be familiar with the concept “ information overload” in website design and user experience: we want to prevent using too much content, especially written content, when representing our brand and business value. Ultimately, the more you invest in your hero image and content, the less likely users are to make a quick exit. If your hero image and its surrounding above the fold content are clear, engaging, and well-representative of your value proposition, he’s more inclined to stay put. If a site visitor is confused by your above the fold content and imagery, he may be quick to exit your site. This is exactly why your above the fold content can be a major deal-breaker in your website success. We all know what it’s like to immediately notice something on the top half of a front page, and it’s even safe to say that front page content is often what makes us decide whether or not to buy a newspaper, or simply stop at a newsstand. The “above the fold” concept originates in print design and publishing, long before the days of digital media. If the content requires scrolling in order to be seen, it means it’s located “below the fold”. A webpage’s “above the fold” section can be defined in simple terms: the content that fills your screen/appears above the web browser window’s bottom border once your page loads.
0 kommentar(er)
