CentralNotice/Design guidance

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

Programmatic banner design guidelines

edit
  • 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.

Public template

edit

Community template

edit