The main types of user interface buttons on sites and applications
Buttons are one of the most famous interactive user interface elements. They play a very important role in creating user interaction and creating a positive experience. Continuing a series of…

Continue reading →

The essence of design - what is it?
A few days ago I received a guest post from Viktor Fomin, author of the Kruffock blog, "chronicles of the living mind of a copywriter philosopher." To begin with, in…

Continue reading →

Effective split-screen design methods
One of the most noticeable trends in website design for 2017 is the split of the screen into two parts. More and more web projects are using a similar layout…

Continue reading →

Creating an Effective Hero Image Image for a Website

Does the user only need 50 milliseconds to form an opinion on 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 the correct design of the main page + website header, which everyone sees in the first place, is so important.

Many web projects on the network are united by one common way of attracting the attention of the audience – the use of bright colorful designs, in particular – placing a large background image or large banner at the top of the website. It is also called a “hero image”.

Images hero image
This “main image” is not just a beautiful illustration on the 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 the real “hero” of your online business.

In our translation of the original article, you will find eight useful tips to help you create the right hero image – one that would attract attention, help convert users into regular customers and would be a useful addition to the design of your website.

1. USE RELEVANT IMAGES
This is a very important point. Appropriate quality graphics will help to increase the overall rating of the site, while improperly selected illustration risks spoiling the whole impression of the design.

When choosing a hero image, give preference to pictures that match the theme, content and idea of ​​the site, for example, as done here. Otherwise, the hero image and the content will be inconsistent – this will confuse the user and he will leave the site.

relevant images
The materials from the photo stocks on the main page are already clichés. There is nothing wrong with them, but if you really want to quickly acquaint users with the main idea of ​​your site, or do not want to be like many other companies, then you better avoid this approach. Basically, these are irrelevant photos that do not cause much interest among users.

2. CREATE A Dazzling Masterpiece from HERO IMAGE
As Saul Bass correctly said: “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.

The carefully thought-out hero image banner will please the eye and grab the attention of users. Take a look at this great example from Apple.

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

3. BECOME TO BE EMOTIONAL
According to surveys, in 70% of consumer loyalty and the decision to make a purchase is formed on the basis of emotions. If your graphic banner is endowed with individuality and plot, then it will definitely cause a response from visitors. Expressive, inspiring images turn an inanimate product or corporation into something that can evoke normal human feelings.

Effective web design that reflects emotions is created primarily for people, and not for indicators, algorithms or search engine SEO robots. And this rule works in all cases – for goods, large companies or individual entrepreneurs.

emotional design
Using emotion to connect with your audience is a great way to create a positive user experience that helps build consumer loyalty and brand confidence.

4. HIGH QUALITY GRAPHICS
Pictures should not be blurry or retouched. Poor quality photos look ugly, in addition, it is difficult for users to understand what is shown on them. The use of such options 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 pixel art works).

high quality photo
Tip: if you do not want the pictures to look blurry, the best way is to use vector graphic editors such as Adobe Illustrator and others to design your site.

5. ADD CTA ITEMS TO IMPROVE THE CONVERSION PERCENTAGE
Most often, as a call to action (CTA), it is the buttons placed on top of the large image at the top of the screen that are used. It is very important to achieve a visual harmony between the hero image, the 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 so that the text / button is clearly visible.

CTA buttons
In the above example, hero image serves to support page heading, attracting the attention of users to the CTA element (by the way, the girl’s look is also directed towards the text block with a button). In addition, part of the background is deliberately darkened so that the white font is better visible.

Getting rid of guesswork in design
Creative breathes life into successful sites. However, creative ideas and solutions often look like guessing - a dangerous business, I tell you. What can designers do to convince the customer…

...

Mobile version of the site and responsive design: all the pros and cons
In the era of the mobile revolution, it is worth considering giving your customers the opportunity to work with the site using smartphones, tablets, etc. It is necessary to give…

...

Redesign: several indicators that his time has come
Redesign. This one word can make any web designer and developer shudder. The imminent danger in the form of constant revisions and refinements of the project, as well as shareholders…

...

9 site typography tips
Typography for a web site is a rather important design element, which in RuNet is somehow not very pronounced. This issue is often raised on English-language foreign design blogs, we…

...