Creating an effective Hero Image for your site (8 tips)
It only takes a user 50 milliseconds to form an opinion about any site? Web developers and designers really have very little time to make a good impression on a person when visiting a resource. That is why it is so important to have the right design of the main page + site header, which everyone sees first.
Many web projects on the web share one common way to attract the attention of the audience – the use of bright colorful designs, in particular — placing a large background image or a large banner at the top of the website. It is also called “hero image”.
Images hero image
This “main image” is not just a beautiful illustration on a site to capture attention, it should become something more. Developers need to try to make a powerful visual communication tool that can increase sales and become a real “hero” of your online business.
In our translation of the original article, you will find eight useful tips to help create the right hero image – one that would attract attention, help convert users into regular customers, and become a useful addition to the design of your website.
1. USE RELEVANT IMAGES
This is a very important point. Suitable high-quality graphics will help to increase the overall rating of the site, while an incorrectly selected illustration risks ruining the entire impression of the design.
When choosing hero image, give preference to images that match the theme, content, and idea of the site, for example, as done here. Otherwise, the hero image and content will be inconsistent – this will confuse the user, and they will leave the site.
Materials from photostocks on the main page are already cliched. There is nothing wrong with them, but if you really want to quickly familiarize users with the main idea of your site, or do not want to be like many other companies, then you should avoid this approach. These are mostly irrelevant photos that do not arouse much interest among users.
2. CREATE A DAZZLING MASTERPIECE FROM HERO IMAGE
As Saul bass put it, ” Design is visual thinking.” Indeed, this is the same content, only presented as an image. It allows you to highlight the content of a web page.
Carefully designed banner hero image will please the eye and capture the attention of users. Look at this great example from Apple.
Tip: the main image should not present all the information, it is desirable to emphasize only the key and most important points.
3. TRY TO BE EMOTIONAL
According to surveys, 70% of consumer loyalty and the decision to make a purchase is based on emotions. If your graphic banner has a personality and a story, it will definitely provoke a response from users. Expressive, inspiring images transform an inanimate product or Corporation into something that can evoke normal human feelings.
Effective web design that reflects emotions is created primarily for people, not for indicators, algorithms, or SEO robots. And this rule works in all cases – for goods, large companies, or individual entrepreneurs.
Using emotions to connect with your audience is a great way to generate positive user attitudes that help build consumer loyalty and brand trust.
4. HIGH QUALITY GRAPHICS
Images should not be blurred or retouched. Photos of poor quality look unsightly, in addition, it is difficult for users to understand what is depicted on them. The use of such variants in web design indicates a lack of professionalism. The hero image banner is the face of your brand, so try to avoid using “pixelated” images (unless they are works of pixel art).
high quality photos
Tip: if you don’t want images to look blurry, the best way is to use vector image editors such as Adobe Illustrator and others when developing your site.
5. ADD CTA ELEMENTS TO IMPROVE THE CONVERSION RATE
Most often, the buttons placed on top of the large image at the top of the screen are used as a call to action (CTA). It is very important to achieve visual harmony between the hero image, content, and the CTA button, especially if you are developing a landing page.
When content is placed on top of a photo, web designers usually adjust its contrast or brightness. This is necessary in order for the text/button to be clearly visible.
In the example above, hero image supports the design of the page header, drawing users ‘ attention to the CTA element (by the way, the girl’s gaze is also directed towards the text block with the button). In addition, part of the background is deliberately darkened so that the white font is better visible.
6. USE CONTRASTS
One of our main goals is to win the attention of visitors. In the famous iPod ad, contrast is skillfully used to attract the audience’s attention to the audio player. The dark silhouette and white headphones stand out clearly against a light green background.
contrasts in the image
7. OPTIMIZE YOUR IMAGE FOR DIFFERENT SCREEN SIZES
Make sure that the size of the photo corresponds to the size of the displays of any devices. Adapt the image to fit different platforms, even if you have to change its size.
Tip: use tools that allow you to adjust the size of images. For example, Cloudinary is a cloud-based web project that allows you to track image checkpoints interactively.
8. LET YOUR CREATIVE IMAGINATION RUN WILD
Creative illustrations and hand-drawn web designs are quickly becoming a popular alternative to simple hero image banners. They give designers some advantages over “traditional” photos, for example:
they provide more opportunities for transmitting information about different abstract concepts that are difficult to capture in a single frame.
they are easier to adapt to a specific brand — this makes it easy to link the philosophy of your company that makes it unique, the services provided, and even your team in a single image.
image hero image
The above is an excellent example from the graphic design Agency in Singapore – Ingrid Design, which has been successfully providing services to companies from a variety of industries since 1998.
Tip: if you place multiple illustrations, make sure that they fit together as if they were drawn by the same artist. Ingrid Design consistently uses smooth color transitions – gradients throughout its graphics.
Image hero image
Conclusion. Hero image is an effective tool for improving the design of any web project. You just need to remember a couple of simple rules: images must be of high quality, match the rest of the content, and be interesting to view. All elements of the visual design of a web page should be clearly visible and readable, so that users quickly understand their main meaning and message.