EUAA Design System

Hero image

Using well chosen "hero images" on the landing page of public websites make them appear more accessible and help illustrate the topic of the site.

Best practices

The image you choose should reflect the core topic of the website it will be used on. As the topic often cannot be depicted directly, think of a symbolic representation.
If you have access to online stock images and a program to edit vector images (i.e. Adobe Illustrator), consider choosing a vector image that you can then further modify.

Possible image modifications

Harmonizing/reducing the colours to the colour scheme of EUAA (blue & yellow) or of that particular web application.
Diversifying the characters with regards to gender, skin colour, age or physical disabilities.
Rearranging/removing elements to make best use of the space

Hero image examples

Layout example

Background radial gradient

A radial gradient with the lightest part directly behind the illustration can help to emphasize it. Using shades of the main colours of the website creates an overall harmonious impression.