Visual identity for digital






Use the digital identity guidelines as a reference when you’re creating and designing digital products.


Ask yourself


  • If we took the logo away, could people still recognise it as Which?

  • Does the way the brand behaves match what users expect?

  • Is it authentic to our experience principles?


Contemporary design, bold colourways and engaging imagery

Good use of white space means our layouts feel uncluttered, and our copy, images and interactive modules can breathe. Bright, airy and engaging visuals allow us to create elegant, simple interfaces and layouts that connect with our audiences.

Five basic rules


Embrace white space

Use well-structured grids to give content plenty of room while avoiding overusing whitespace.

Be bold and bright

Use vibrant colours, but don’t overwhelm the viewer. Keep the colours flat.

Use arresting, engaging images

Help users identify by incorporating a human element – so, an advice guide about TVs would show people watching and enjoying TV, rather than just the TV itself.

Be consistent

Whether you’re using the logo or navigational metaphors, be consistent and obvious.

Remember elegant simplicity

Focus on giving people what they need to achieve their goals. Give them simple tools that do powerful things in a way that goes beyond graceful and refined
Read more about elegant simplicity




Colour palette

Use white space with bright colours to lift areas of information or text. Bright colours are great for drawing the eye, but be careful not to overdo it. Think about the hierarchy of messaging – especially with complex adaptive digital design frameworks.


Primary palette

Use our primary colours – red, white and black – in every design.


Which? White
#ffffff
Which? Red

Which? Black
#05171d
#e30613





Secondary palette

Use our secondary colours for impact and vibrancy. They’re bright, positive and engaging, so they reflect our personality. Use them to support our primary colours in all designs.



#A16700

#cf9500

#fdc300

#ffd916

#FFFF44


#8C0000

#A30010

#e83755

#FF6482

#FF92B0


#002971

#002971

#0085cd

#2DB2FA

#5BE0FF


#180235

#463063

#745e91

#A18BBE

#CFB9EC


#962100

#C44F00

#f27d2b

#FFAA58

#FFD886

#23480B

#517639

#7fa467

#ACD194

#DAFFC2



Tertiary palette

Use our tertiary colours to add contrast or to cover large areas where a bright colour would be overpowering. They’re softer and more neutral, so they help us add personality, while keeping the feeling of space. They also give us more choice and flexibility. That’s crucial for digital design, where contrast and legibility are important – for example, you could use them on a button with a direct call to action.



#520017

#801D45

#ae4b73

#DB78A0

#FFA6CE


#001753

#0C4581

#3a73af

#67A0DC

#95CEFF


#003A3E

#12686C

#40969a

#6DC3C7

#9BF1F5

#625800

#908606

#beb434

#EBE161

#FFFF8F


#9C4400

#CA7200

#f8a016

#FFCD43

#FFFB71

#920000

#C02C12

#ee5a40

#FF876D

#FFB59B

Typography

Our primary typeface is Stag. Use the clean, sans-serif face as the base font. For headlines and pull-out quotes, use the stylish, serif face sparingly to complement and contrast.


Our typefaces

Stag Sans Light

Stag Sans Book

Stag Sans Medium

Stag Sans Semi Bold

Stag Book

Open Sans Light

Open Sans



Our hierarchy

Alice was beginning to get very tired of

H1 - Headline
Font family: Stag Sans Semibold
Font size: 48px
Line-height: 60px

Sitting by her sister on the bank, and of having nothing

H2 - Subheading
Font family: Stag Sans Semibold
Font size: 36px
Line-height: 49px

She had peeped into the book her sister was reading,

H3 - Subheading
Font family: Stag Sans Medium
Font size: 32px
Line-height: 49px

And what is the use of a book,’ thought Alice `without pictures or conversation?’

H4 - Title
Font family: Stag Sans Semibold
Font size: 28px
Line-height: 42px

So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be

Standfirst - Stag Sans
Font family: Stag Sans Book
Font size: 24px
Line-height: 36px

worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her. There was nothing so very remarkable in that; nor did

Standfirst - Open Sans
Font family: Open Sans Regular
Font size: 24px
Line-height: 36px

Alice think it so very much out of the way to hear the Rabbit say to itself, `Oh dear! Oh dear! I shall be late!’ (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time

Body
Font family: Open Sans Regular
Font size: 18px
Line-height: 28px

took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen

Section title
Font family: Stag Sans Book
Font size: 13px
Line-height: 36px
Letter-spacing: 2px

Typography for web

For web content, embed the Stag Sans and Stag Serif custom fonts into the browser using the @font-face function. We’ve tested these across browsers and OS combinations. Use these ‘font stacks’ to support older, non-compliant browsers. They’re the only custom fonts we have licensed for the web.


Bold Headline

font-family: ‘Stag Sans Semibold’, Arial, Sans-Serif


Regular Headline

font-family: ‘Stag Sans Medium’, Arial, Sans-Serif


Complimentry Headline (Light Serif)

font-family: ‘Stag Light’, Georgia, Serif Serif


Complimentry Regular Headline (Serif)

font-family: “Stag Book”, Georgia, Serif


Body copy

font-family: “Open Sans”, Arial, Sans-Serif


Quotes/Italics

font-family: Georgia, Serif
font-style: italic;


Typography for native operating system applications (‘apps’)

For these products, the custom font is installed as part of the app itself. This gives us a more flexible and consistent rendering. Here are the Stag fonts we’ve licensed:


Stag Sans Bold
Stag Sans Semibold
Stag Sans Light
Stag Sans Medium


We’re investigating the use of Open Sans as a body copy in app – this will be possible on Android apps (using Droid Sans). But iOS devices may have to default to Stag Sans Book &/or Arial if unavailable.


These are the only custom fonts you can use for apps. With web content, there’s more choice.


There’s a limit to the number of apps we’re licensed to develop, so please check with the Digital team before you start.


Don’t use Trebuchet. Ever.

Common iconography

We’ve developed a new icon set. It’s simpler, it’s clearer and it fits perfectly with our new branding




    ⌂ ✏ ✐ ✄ ♬ ♚
✹ ✱ ✺ ❋ ↛     



Functional
These icons are part of the core set we use every day. They’re designed to be as informative as possible to help interactions.
These icons reflect the latest current branding of common 3rd party networks. They should be used across all devices and platforms. Please note these may change in time with the third party re-branding.
Social & third party
These icons reflect the latest current branding of common third-party networks. They should be used across all devices and platforms. Please note these may change in time with the third party re-branding.
Status
These icons reflect the latest branding of common third-party networks. You should use them across all devices and platforms. They might change if third parties rebrand.
Wayfinding
These icons let the user see exactly where they're going. Use them to create clear navigational sign-posting and recognised affordances.
Categories
With categories, it’s important to reflect as close as possible the subject matter in a clear and concise manner.
Mobile
The membership icon has been tested with users, and is currently the defacto icon to represent content that is locked/ inaccessible to non-members. However it has to be noted that current limited testing has indicated this may not be the most appropriate icon and may well be replaced in the near future.
Membership
The membership icon has been tested with users, and is currently the defacto icon to represent content that is locked/ inaccessible to non-members. However, current limited testing has indicated that it might not be the most appropriate icon so we may well replace it in the near future.

Which? badges

Please use flat brand colours when making badges.


Worth a Look Don’t Buy Best Buy Just Tested Evergy Saver First Look
Great Value Coming Soon


Worth a look

These products haven’t performed quite well enough in all our tests to become Best Buys, but are still worth considering.

Don’t buy

These are products that performed extremely poorly in one or more key areas of our tests, so we suggest you avoid buying them.

Best buy

This award is given to products with high total test scores that perform consistently well in our laboratory tests and excel in all main measures.

Just tested

These are products that are new to market and have been tested recently.

Energy saver

We award this to Best Buys and Worth a Look models that meet our energy efficiency criteria. The logo is a Which? rating and is not associated with official EC laws or regulations.

First look

These are products that have just come to market and and the first time we have tested them.

Great value

This award is given to products that are rated Best Buys in our lab tests and which also offer outstanding value for money.



Imagery and graphic elements

Imagery plays a vital role within our visual identity. Images can either be photography, illustration or information graphics. We use imagery to add value, by innovatively expressing an idea or communicating a message.


Think about how the image adds value, making sure it isn’t just decorative. Use imagery to make a statement, to prove or support the information and show that Which? understands the issue. The imagery should be eye-catching and thoroughly ground the design layouts and where possible should reflect one or all of the Which? brand personality traits: human, engaging, intelligent and courageous.

Sample Images

Featuring people in their real life settings or going about everyday activities can make our stories more relevant and accessible. It can help people relate to the image and connect with the human story.

Surprise our audience with clever use of imagery. Look for different angles, crops, lighting or points of focus that will show the subject in a way that people are less familiar with - this helps us engage with our audience.

Think carefully about the link between the image and the content of the text - make it make sense. Treat the audience as an equal in intelligence and avoid tired clichés and dumbing down.

Create a sense of drama to help tell the story. Take an unusual or even courageous point of view. Look for clever and unique angles, lighting or visual metaphors to add interest. Don’t be too literal with image choices and don’t go for the obvious.



Photography

We’re trying to achieve the same things with photography in the digital world as we are in print. Having said that, we should be more restrained with the use of stock photography.

Using people in an image is the most obvious way to communicate our human personality trait. But you don’t always have to show the whole image. A close-in crop of feet, hands or eyes can sometime be more intimate or interesting.

Showing real people rather than models in a natural, believable way helps us to come across as honest. So, when choosing an image that helps to come across in a human way, make sure the people you feature are not over-styled or forced in their pose. Where possible make the person or setting credibly aspirational for the audience.

If briefing in a bespoke photo shoot please liaise directly with Picture Desk to discuss details and budgets.




Creative commons and social

Facebook, Twitter, Instagram, Pinterest, Flickr – thanks to social media, people are conspicuously sharing stories and imagery about themselves every day.

Getty Images are heavily engaged with the public through Flickr and actively ask people to contribute images for a client on their behalf. This builds up a bank of emotive photography that people can identify with, no matter what the subject matter is. This keeps imagery fresh and counters the feeling sometimes generated by standard ‘stock imagery’. Because Which? is a not-for-profit organisation, we can use Creative Commons imagery, providing we credit the originator (see Creative Commons Guidelines at creativecommons.org/).

Consider sourcing images this way when you want to add variety and depth, or bring out our human and engaging side. It’s also a good way to find great images when we can’t commission a bespoke shoot or illustration, because of limited time or budget.


Illustrations

Illustrations are often able to communicate a message that photographs can’t – because the subject is difficult to portray or the idea’s too conceptual. Our illustrations should be clean, crisp and graphic. They should show one key issue or an idea that has immediacy and is obviously relevant to the story. Keep illustration simple and unambiguous with a clear focal point - please look at some of the examples we have commissioned or created in-house.



Infographics

Infographics help us demonstrate both our knowledge of the subject and the depth of our research. Information must be presented in a fresh and engaging manner but must also be clear and purposeful.

Make complex information clear and easy to navigate. Represent things in a logical way - for instance, in chronological or size order. Think about clever and interesting ways to present information using shapes, graphics or illustrations. Add dimension and depth but be careful not to overcomplicate or make it difficult for the audience to interpret.






Structure

Grids


When we develop our web-based products, we use an adaptive grid. It’s predominantly fixed-width, not fully fluid, and it lets us keep the properties that are useful in developing for a multi-device, multi-platform approach. The grid has four fixed breakpoints of 4, 9, 12 & 18 columns. You can see how this works below. This gives us tighter control over design at different resolutions. We’re also looking at introducing an extra breakpoint at 6 columns to cater for large ‘phablet’ devices. Because there are so many different mobile screen resloutions, we might make the grid fully fluid between 4 and 6 columns in the future. If you need to implement the grid, ask the Digital team for access to the Github framework.





Wayfinding

We give our users a simple way to discover content. That means giving them a consistent way to find information, navigate our digital ecosystem and access search (which is paramount). Labelling needs to be consistent and intuitive across products and devices (see also ‘Clearly signed’).


Mastheads on the web




Mastheads - cross device

There are different contexts that use a masthead - from web, to tablets and smart phones.




Buttons, icons & other elements

These are important design elements. Most let users perform an action, like submit a form or change the state of something. Links should be used for navigation between pages and views, not buttons.

As well as their default state, buttons and icons can have three other states: ‘hover’, ‘active’ (when it is pressed), and ‘disabled’. It’s important that these states look different so users understand their interactions clearly.

Button Styles

Button Styles

Button Styles




Dropdown menu





Form fields

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(





Messages

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet




Loader

loader



Carousel





Pagination

pagination.png




Linking conventions

Text link styling has a big impact on usability and accessibility. Well-styled text links can enhance user experience and help make our digital brand consistent, whereas poorly-styled text links can detract from an otherwise well-designed page.


  1. Style for scanning
    When you style links, remember that users don’t read, they scan, so make sure links are obvious. If the link will open in a new tab or the link is to an external site then indicate this.

  2. Make links stand out
    Use colour and contrast to make your links stand out - not only from their background, but also from the surrounding text. Don’t underline text that isn’t linked - users expect underlined text to be a link. Also keep in mind that visually impaired users and users with colour blindness - links must be accessible.

  3. Write directive anchor text
    Write meaningful anchor text that speaks for itself, such as “see how we tested this toaster”. Do not use text like ‘click here’ or ‘read more’ - it forces the user to read around the link to understand why they need to follow it, reducing comprehension and accessibility. Good link text is also more SEO-friendly.

  4. Implementation for Which?
    (A) In general, links should be in a regular weight sans-serif face - either Open Sans, Arial or Stag Sans. They should be coloured blue, and underlined on hover.
    (B) On coloured backgrounds this will need to be reversed out - we suggest white underlined on hover.
    (C) Sometimes, text links in a paragraph might warrant a more neutral text colour. This is fine, as long as it’s underlined – just make sure it also stands out more on rollover, by changing colour and/or increasing contrast.


Tags

Tags give a quick and dynamically updated overview of the main topics covered by the site’s content and enable navigation to them. Where appropriate, tags can include counts to indicate frequency of usage.