Choosing image backgrounds for hero banners
Selection criteria for images appropriate for hero banners can be quite complicated. There are plenty of stunning photographs that would work well to welcome positive first impressions of a website, but are they fit for purpose?
The hero banner pattern sits within a full-width container. It fits a browser window edge to edge and the background image scales accordingly. For example, here is what the hero banner on the University homepage looks like on a mobile device.
Let’s compare that to viewing the website in a browser window that is 5000px in width, 14 times the width of the mobile device.
It might be overkill, but it’s a possibility.
The hero banner has been designed so that the background image is fluid. It is flexible so that it views appropriately on any device. Computer, laptop, mobile phone, tablet, games console, the list goes on.
While there is an attractive appeal to using great photographs in hero banners, they do not assist the function
Some quick rules
- Image dimensions: 1905 × 362 pixels.
- The main focus of hero banner sections is the call-to-action text, search field, and link buttons. The background image shouldn’t be so complicated that it deters usability.
- Multiple images must not be used (for example, to form a collage) as they are complicated.
- Photographs including people are encouraged in the hero banner.
- Photographs of the St Andrews skyline are encouraged in the hero banner.
- Close ups of subjects, such as people’s faces, are discouraged. The hero banner image should have room to breathe.
Landscape photography
This is the most common example of hero banner images. This style is used frequently on the University homepage. There is a strong marketing approach with landscape photography as it allows us to feature the town as a whole. There is plenty of depth to these photographs which allows the text on the banner to be the focus.
Close ups of people
There is an art to using close up photography of people for hero banners. If there is too much of a person in frame then the hero banner will only letterbox a portion of that person. Only their images will be featured, which may be rather intimidating. To perfect the art, the subject can’t be too close to the camera. The provided example shows enough depth for the person to be predominately featured but still allows enough room for the rest of the hero banner to breathe.
Behind shot of people walking
There is a sense of wonder to the composition of these images. Again, there is a strong marketing focus to these images. The example image has a romanticised tone with the town of St Andrews. Composition of the photograph is important to consider for these photos. The direction of lines and the viewing angle of the people photographed could help to direct a user’s attention to a call-to-action button.
Interiors
A combination of depth and symmetry is the key to successful interior photography for hero banners. There is no clear focus, but the back wall acts as the compositional focal point. The further a back wall is, then the more depth the image has.
Aesthetic textures
Texture photography is largely abstract, often using macro lenses. It helps to set a tone or style and can communicate character to a user. It isn’t overly complicated, which is perfect for the usability of hero banners. This style is probably ideal for images of objects and items.
Letterbox view
Here are examples of the amount of detail that is sacrificed when selecting images for hero banners. This is important to keep in mind when selecting appropriate images. Is there a key section of the photograph that will work? Will the photograph work with only a small fraction of the detail?
Future thinking
Currently, selecting images for hero banners is a complex process and there are a lot of acceptance criteria that they must meet to succeed. There are a lot of great images that help showcase the University’s character, but they are often thrown aside because they do not function correctly in the hero banner pattern. That is why we are looking to re-design the hero banner pattern to hopefully negate the complicated process of image selection while emphasising user accessibility.