CentralNotice/Design guidance

The aim of this page is to provide a descriptive set of guidelines.

Programmatic banner design guidelines

• Colour Contrast (Administrators are strongly encouraged to ensure banners comply with Web Content Accessibility Guidelines. Realistically there is no reason for banners not to comply.)

- Text/Background contrast should a minimum of 4.5:1.

- You can test colour contrast with this useful tool

- This browser extension helps with picking colour from webpages to get colour hexacode equivalents.

• Colour Palette

- Did you know Wikimedia has a UI colour palette? It's encouraged that banners move to using this colour palette wherever possible. This is important for maintaining the look and feel of the site interface.

• UI designs

- Banners with more complex functionality should aim to bring themselves into alignment with the Wikimedia UI

• Height

- Banner height should be generally between 60-70 pixels with a recommended maximum height of 80 pixels.

• Close button

- All banners must contain a close button.

• Font sizes

- 14pt or 16pt

• Font style

- Typical: SansSerif

- Optional: Serif

- It's generally not recommended to use none default fonts unless they are installed into the Mediawiki codebase.

• Logos

There are important considerations to weigh up before creating a logo. From a design point of view think of the following:

Scale - Make sure the logo works at small scales (as small as 50px). It shouldn't contain small or intricate details

Colour - Logo's need to be accessible to all our readers. Take into account those with poor vision

• Images, Photos or Infographics

Although visually interesting, these things tend to act as more of a distraction than an incentive to users. Although such usage is not prohibited, it's generally discouraged since it more often than not reduces a banners effectiveness.