Foundations

Photography

Purpose

Photography should be used when we’re trying to connect with customers on an emotional level. We also use it to break up a page design or give context to the content.

The photo filter

To guarantee consistency with the rest of our website and reinforce our brand identity, try treating your imagery with an “MSM filter”. You’ll find the filter in the Wallet Photography Library. Simply place over an image and resize to fit. Ensure to group the image and filter together before exporting.

The filter is a 50% opacity layer in “screen” blend mode using the 3 primary colours as a gradient. This can be adjusted depending on the photo used. (Apply this filter to the image rather than in code to avoid browser problems).

Sketch Library

Top tip:

Try to avoid images that already have a heavy filter applied.

Setting the scene

Anything can feature in the image and it can be with or without people. Try think of how the object or content would appear in real life and try to mimic that with the image.

Part of this is also making the scene relevant to the customer. As all our customers reside in the UK, try ensuring the scene in which the image is presented looks British.

Along the same lines, ensure any vehicles shown are the correct right-hand drive for the UK. This can be done by flipping the image of a left-hand drive car, but pay attention to any text or logos in the image which may need mirroring back.

Diversity & Inclusion

Our customers are all shapes and sizes, and this should be reflected in our photography. Try to be diverse in your selection of age, gender, race, ethnicity, ability, disability and relationships. Life is full of diversity, so we should include it!

Colour & contrast

The tone of images should feel warm and calming as opposed to cold and stark. Opt for images which have colour and a warm tone. Images can be dark but make sure that ‘warm’ feeling and contrast is still there.

Usage

Using the brand mark

Where appropriate, you can choose to isolate photography within the brandmark. This gives an added sense of brand personality through the page. Below specifies the minimum and maximum sizes it should be used at.

Within components

Top tip:

The brand mark can be used in both emotional and functional spaces.

Functional spaces

By functional spaces we mean on a white or paler background. Try to use more vibrant and contrasting photography here to create stand out from the background.

Emotional spaces

By emotional spaces we mean on a gradient or coloured background. When using photography in these spaces try to ensure the colours within the photograph don’t clash with the gradient or background colour used.