Hero-Images: This is how you use pictures strikingly

Let’s take a look at two seemingly contradictory trends in web design. On the one hand, websites are becoming ever more minimalist – fewer colors, clear fonts and simple forms. On the other hand, large-format, window-filling images – so-called “Hero Images” – are announced. What seems contradictory is only at first glance. At second glance, both trends complement each other wonderfully. Of course, this only applies if they are used sensibly and above all with a meaningful photo.

Use of “Hero Images” with CSS3

The use of large-format images is hardly a problem for two technical reasons. On the one hand, the speed on the mobile Internet is so high that even large pictures can be transmitted as far as possible without problems. Second, the CSS3 property “background-size“That a background graphic is always scaled to fit a”

“Container or even the entire viewport of the page fills.

div.hero {width: 100%; height: 400px; background-image: url ("hero.img"); background-size: cover; }

The value “cover” in the example ensures that the background graphic does not repeat and instead the entire width and height of the “

Element. If necessary, the graphics on the right or bottom side will be cropped.

display


wonder-woman-533667_640

If you center the background graphic via “background-position“, The cropping is done on two sides, so that the center of the background image is always in the center of the element.

div.hero {... background-position: center; }

Thanks to this technology, such background images can be realized without major CSS hurdles or the use of JavaScript.

Good “heroes” only with meaningful pictures

Anyone who sets an eye-catcher on their website as a “hero image” should place great value on the informative value and the technical quality of the image. Popular motifs currently are stylish desks, which are preferably Apple devices. Although many of these images are aesthetically pleasing, they are unfortunately also very arbitrary.

Unusual and individual subjects are much better suited to adding a touch of their own to the “Hero” trend. On the subject of image selection, we have written in more detail here.

Furthermore, it is important to find a good mix of succinct and present background image and the design of the foreground.

Here, above all, a reserved design is required. Often the foreground – consisting of a logo and possibly some text and the navigation – is placed in one color on the background. Overall, the “Hero Image” should not be overburdened by the foreground or be too covered by it. On the other hand, of course, you also have to ensure that the logo and texts are readable despite the background image.


hero-image-molly-and-me
Website of “Molly & Me” from South Carolina

The website of “Molly & Me”, which sells products made from pecans, uses “Hero Image” to present its product in a very impressive and present way. Logos, font and link button are displayed completely white. You can also see the use of so-called ghost buttons here.

Instead of putting products in the limelight, one can also represent the employees or the team of a company as an “image hero”.


hero-image-honest-folks
Agency “Grain & Mortar”

The design agency “Grain & Mortar” from Nebraska has set itself up on its website about “Hero Images” as a stable and sympathetic team – including a rustic wooden table, table decoration and beer.

Unlike many other websites, the agency from Nebraska captivates with its individuality and dispenses with classic desk motifs, which are quite common in the design industry. But they accept that you do not immediately recognize what awaits you on this website. Grain & Mortar could also be a construction company.

“Heros” are also discreet

Those who like it a bit more discreet, can use “Hero Images” less present. With low-contrast photos or those that are very reserved in terms of color, it is possible to create succinct websites.


hero-image-syke
Websites of the designer Jamie Syke

The website of the designer Jamie Syke shows the classic desk set, but looks much more individual due to the perspective and the equipment. Due to the coloring and the contrasting colors, the picture is not as present as in other examples before.


hero-image-alto-labs
Agency “Alto Labs”

The agency “Alto Labs” also relies on a rather restrained “hero image”. Covered in muted sepia colors, the background is particularly evident thanks to the pink graphic elements in the foreground. From the image statement, however, the design is difficult. What does “Yeah, we can do that” mean? Yes, we can go to the beach ?!

The more present the photo, the better it has to be

How much presence you want to give a photo on a website also depends on how high-quality the photo is. Exposure, sharpness, perspective and color must be correct and very precise. Who, like the Canadian “Tatamagouche Brewing Company” almost exclusively on a “Hero Image” sets can do that only with a brilliant photo.


hero-image-tatabrew
“Tatamagouche Brewing Company”

Here is the “Hero Image” next to a small navigation icon, the only thing you get to see as a visitor to the site. If the photo did not work in this case, you would not have the “hero” trend.

The examples show how different you can use “Hero Images” and how differently the navigation is integrated into the website. Some websites rely on off-canvas navigation, others put navigation in the “hero image” or below. In the latter case, you have to scroll down to see the navigation.

Conclusion

“Hero Images” is a beautiful thing. But above all, individuality is required. Stock photos are not really eligible as a “hero image”. Even classical, in the sense of arbitrary-looking desk views should be avoided. If you rely on finished mock-ups, you should individualize them, for example, by adjusting the colors to the website or bringing in other picture elements.

Photos or graphics must be of high quality and correspond to the design of the website. Tone adjustments can be used to color-integrate the “Hero Image” into the website. Blurs, gradient and pattern overlays can also be used to add useful effects to a picture, creating a style of its own.

The foreground should be reserved and attuned to the picture. If the “Hero Image” has a focus on content, the foreground should be located next to or around it. A few more tips we have given in the article “Emotional Web Design”. Look there too …

Before I go: a whole heap of templates, pictures and other support for Hero areas, we have in this post on offer.

(Post Image:Elias Sch. / pixabay)