Making a website: main features
Making a website is a popular modern service. In Russian society, despite the relative "youth" of the Internet in General and websites in particular, there are already certain stereotypes about…

Continue reading →

Basic principles of Web 2.0 when creating websites
We often talk about Web 2.0. There is a lot of talk about Web 2.0. Today, you can find a huge number of offers to make websites in the style…

Continue reading →

Development of an online store: useful tips
Developing an online store is a fairly complex process. Some useful tips on how to create a "proper" online store are provided by webstudio2u web Studio specialists. Creating an online…

Continue reading →

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.

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.

relevant images
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.

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.

hero image
Tip: the main image should not present all the information, it is desirable to emphasize only the key and most important points.

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.

emotional design
Using emotions to connect with your audience is a great way to generate positive user attitudes that help build consumer loyalty and brand trust.

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.

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.

CTA buttons
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.

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
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.

Adaptive image
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.

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.

Website development. Advertising promo site
Excitement is in our blood. This is why various promotions, sweepstakes, and quizzes are a great way to advertise any product or service. However, traditional advertising on television, radio, Newspapers…


Creation of sites. Features of web design of a vcard site
Business card site, Internet portal, corporate site, promo site, online store – when creating all these types of sites, one of the most important roles belongs to web design, which…


Main types of user interface buttons on websites and apps
Buttons are one of the most well-known interactive elements of the user interface. They play a very important role in creating interaction with the user and creating a positive experience…


Creation of sites. Features of the web design of the Internet portal
Maximum useful information, maximum interactive services, maximum user convenience. This is the maximum Internet project. This is an Internet portal! The Internet Portal is a very rich site. You can…