Imagery

General approach

Reducing the ‘weight’ of the website is important both for ensuring pages load quickly across all devices and that the website has minimal environmental impact.

All imagery must be optimised before uploading to the site.

Photography

Photography on the website follows the Museum brand. There is no absolute guideline for photography online but the following should be borne in mind:

  • If people are in the photo, is it clear they are carrying out an action?
  • Ensure groups of people represent the diversity of our local community. For example, families should include LGBTQIA+ and single carers; racial and visual religious diversity is also important.

If no suitable photographs can be found, please check with the Design department for advice when commissioning photos.

A photo of two children of south east asian descent. On the left is a boy thoughtfully looking at a fossil or a piece of rock. To the right is a girl who is looking through a magnifying glass at the boy. She is smiling and obviously enjoying the view!

This image is good because shows two children engaging with the specimens. The lighting could be better but there is still a sense they're enjoying themselves and being engaged.

An image of two children holding specimens. In the background, one child is blurred. In the foregroun, a young boy holds up beetles which are encased in clear plastic blocks. He is smiling at the camera, as though pleased with what he's found.

This image has better lighting but the studio set means the two children are outside of any relatable context, be it either of the Museums or a school or a seaside etc. They are not directly engaging with the specimens, but rather staged to present them to the reader.

Accesibility reminders

  • All photography should have alt-text. Any new component that includes optional photographic content should have functionality for editors to add alt-text as a default requirement.
  • Avoid putting text in imagery. As much as possible, use components like HTIs to ensure the text is readable for everyone. 

 

Icons 

Icons are helpful ways of pointing out key information as people scan through the content on a page. In most cases, bullet points will suffice.

In the case where new icons are required, they should be considered as part of a wider online language i.e. it’s better to re-use the familiar than develop bespoke icons that will only be used once or conflict with widely recognised meanings e.g. avoid using icons with eyes as these can be confused with icons denoting access needs or vision related disabilities.

Creating new icons

Below are some basic guidelines when creating and using new icons. 

 

Best practice for icons

A silhouette of a bird standing on one leg.

Icons must be solid filled. These make icons easier to notice and clearer to identify. It is also in line with the on-site brand.

 

Icon of a map pin

All icons should be designed in a square grid in colour #000. Colours are changed using css

icon of an svg format document

All icons need to be exported to .svg format

Icon representing code

All icons must have aria labels

Some helpful tips:

DO NOT create icons that are easily confused with established icons used elsewhere. Here, we have an icon that is easily confused with pointing out information for blind/visually impaired people

AVOID creating bespoke icons that can only be used once.

 

AVOID using icons without any accompanying text.

Illustrations

Illustrations are useful for several reasons. They help us communicate scientific processes and complicated ideas. They also help make our content be more accessible for a global audience of all ages.

Always aim for simplicify. Static and animated graphics should be created in a simple silhouette style where possible. However where anatomical details are needed, the style can be more of a technical line drawing. The lines should still be kept simple and clear, particularly for when viewing on smaller screens.

An illustration of an Archaeopteryx and Ambopteryx facing each other. They are both perched on branches, the Archaeopteryx on the left, facing inwards, cawing at the Ambopteryx who is also facing inward, in profile on a branch coming into the image from the right hand side.

In general illustrations should be kept simple and in silhouette form where possible.

A poster of a skeleton on a black background which says 'What can a skeleton tell you?'. The skeleton is drawn with a white outline and stands on the right hand side, the text on the left.

A more detailed illustration style to show anatomical details.

An illustration of a frog approaching a bombardier beetle. There is a cross section view of the beetle's thorax to show the organs responsible for emitting liquids that repel predators

Again, small details can be highlighted within the ‘silhouette style’ when needed.

A profile view of an Atlantic cod approaching a hook on a line from the right

In this instance, the details in the head and fins helped to define the species.

Data visualisations

These are important as help readers better understand the topics or data covered in some written content by reconfiguring the information in a different way.

Animated graphics and stings

Animations made for the web must be 60fps.

In order to avoid impacting page scroll performance and to be optimised for mobile viewing, stutter etc. should be eliminated. Animations should also be able to handle a browser resize.

References