Design pack
22 August 2012
How do you ensure that an organisation’s web estate conforms to consistent, high-quality design? It’s a problem I’ve recently been addressing.
Drawing inspiration from GOV UK’s work and the BBC’s Global Experience Language, I’ve developed a visual design pack, which has instructions for some of the common design choices and patterns. We’re hoping it will speed up development time as well as improve consistency across our websites.
One of the challenges has been balancing the need to record the current design choices and the desire to introduce new improvements to it. Without the help of an in-house web designer, it’s got to be a balance between where we are now and where we want to be.
I’ve drawn heavily on Twitter Bootstrap for some of the common elements such as buttons and tables. It’s a very powerful and comprehensive framework which should help us tremendously.
One aspect of Bootstrap which initially looked useful was its responsive grid system. However, after further investigation, I’ve realised that this will cause problems for our existing content - particularly images, which would have to be resized. Instead, the pack recommends that sites adopt 4 simple fixed breakpoints: 320px (mobile), 640px (tablet), 960px (desktop) and 1280px (large). Our current design is quite ‘blocky’ so should relatively easy to reflow nicely into the new templates. Here’s what the visual design pack covers:
- Grid
- Typography
- Colours
- Masthead
- Menu
- Illustrated banner
- Blocks
- Images
- Features
- Tables
- Icons and buttons
- Blockquotes
- Slideshows and lightboxes
- Footer
- Forms
- Miscellaneous