Introducing our online design guide
Our website redesign launched just over a year ago and ever since we’ve continued to work on updating the site. It’s a big challenge and a long journey but we’re getting there!
Alongside these much needed changes we are developing a way of documenting the new design itself: a way of demonstrating how content should be arranged and displayed on screen. This will be a transparent and ultimately public guide, mainly for anyone involved in the production and maintenance of our sites. It will ensure standards are met visually (primarily user interface aspects) and in terms of accessibility (primarily user experience, or UX, aspects) as well as technically (based on W3C standards and best practices for optimisation of markup, scripts and code).
The design guide is essentially a big list of the different components that make up our sites and webpages, how they should appear and how they should behave. The idea is that with this guide to refer to we can avoid unintended inconsistencies in appearance and behaviour more easily. With so many people working on such a large website every day, visual consistency can be a problem.
A key part of the redesign’s aim was to ensure that the many sections of The National Archives website would have stronger visual and behavioural connections than they have done to date. This includes Discovery – our catalogue, our core service sections, the Archives Media Player and this blog itself. As each of these sections are redesigned the amount they share in appearance and behaviour will increase. Cosmetic differences may well be restricted to any use of decorative imagery (banners and backgrounds) although variations in colour palette and typography are areas we are keen to explore further in accordance with accessibility guidelines.
So the point of the guide comes from the need to match the technical cohesion of these sections, all adopting a responsive ‘mobile-first’ behaviour, with a stronger aesthetic cohesion – a robust yet flexible, shared visual language. We would then manage certain aspects of each section’s visual identity, such as any use of decorative imagery, more effectively, with a greatly reduced chance of making that section look too different or detached from any other part of the site. Exceptions may occur where a section has a specific commercial purpose e.g. our image library or our bookshop – neither of which were developed entirely in-house.
The guide will be created, published and managed in the same way as the rest of our site, becoming a built-in manual sharing and following the rules it lays out.
As an example of a component, consider our logo. For the redesign we selected an entirely white version of the logo to appear on a dark grey band which constitutes the site header. But besides colour there are other considerations as to how the logo should appear, such as position on the page, dimensions on-screen, file size and format. The guide would contain a page on considerations for use of our logo online – not just at the top left of each webpage on our site, but all uses of it online. This information would then be immediately accessible and useful to any third party that required the use of our logo.
The components and elements of content we intend to provide guidelines for so far are:
- Layouts: the header, the footer, the grid arrangements and tables
- Text and type: headings, body text, quotes and links
- Lists: bulleted information lists, bulleted navigation lists, alphanumerically ordered lists, dropdown lists and pictorial lists
- Dynamic elements: accordions, slideshows and carousels, navigational tools (eg. our ‘mega menu’, tabbed content)
- Forms: searches, option selection, commenting and their interactive elements (e.g. buttons)
- Images: photography, captioned images, images of our records, banners, backgrounds, thumbnails, icons, diagrams and visualisations, logos and branding
- Colours: core and custom palettes
In each case the aim is to provide explanations and evidence for why the elements appear and behave as they do. This involves a lot of time researching, discussing and naturally a little arguing on our part, but we always try to keep it constructive!
Our approach to this design guide has two particular sources of initial inspiration. One is the BBC’s Global Experience Language (GEL) which was published online several years ago. In their case the ‘GEL is the glue that ties all BBC services together’.
The other is the Government Digital Service’s design principles with a practical, holistic and transparent approach that we refer to in our own quest for quality and consistency (not uniformity) within the online work of our own organisation. The principles transcend any one organisation’s remit and are applicable across public services online and to much of the wider web.
As the look and feel of our new sites develop over time so too will the design guide with further research, exploration and feedback to provide evidence for our choices. It is something that should not just tell you what colour or height something is but also why. ‘Because it’s always been like that’, ‘because I saw it like that on another really cool site’ and ‘because that colour matches my umbrella’ are not answers we can accept if we want to achieve a higher standard of design – although they could be springboards for more substantial reasoning, and even present alternatives and suggestions for improvement.
The guide is still in progress but we will make sections of it available as soon as possible and we hope it proves useful to anyone working with The National Archives, anyone curious about our work or anyone curious about design.