Global design direction

Docs Design

By Ian Axton, Julia Sang - 26 October 2020, updated 27 October

This week, W3C approved the global design direction. Here we explain the design process so far, share some design work, and look at next steps in the design process.

Defining design objectives

Back at the start of the project, we talked to W3C about what they are looking for in their design solution.

We defined the needs of the design solution - based on both W3C’s organisational needs and user needs. These were to:

Display dense content in a way that makes it easy for users to scan and find relevant information
Set a base-style for the site to house content for many years - while allowing the site style to evolve over time through the use of photography and illustrations
Create a scalable system, where each component designed can be used in different places across the site
Be able to build the design to meet WCAG 2.1 accessibility standards

Design process

Ian started the design process by defining styles for the site to make the content and site feel like W3C: colours, typography, spacing, etc.

If you have been following this blog, you’ll know that we spent a lot of time reviewing existing site content, creating wireframes for key pages of content and iterating the site map to confirm what template types would be needed. From this work we created the following list of items to be designed:

Components, which are reusable parts of the user interface that will support a variety of different use cases. Individual components are assembled to build the page layouts or templates.
Templates, which are complete page layouts made up of a combination of different components.

Ian used the styles to design components, and built them up into page templates with example content. This way we could check the design solution worked both from the ‘big picture’ view as well as the reusable component view.

Each component and template started was designed mobile-first, as this is one of the most challenging views to make content work within. Once Ian was confident the content worked for smaller screens, components and templates were then adapted for medium and larger screen sizes.

Using real site content helped to ensure that the designs were going to meet the site needs and details were not forgotten.

We talked to W3C several times during the process, and shared the design work at different stages, to make sure we were meeting the organisations needs and objectives. Coralie gathered and organised all the feedback from W3C and confirmed the global site style was approved by W3C last week.

The designs

To illustrate the site design and what W3C have approved, here is a selection of screens. Please do not be concerned if imagery and text is incorrect. You may see areas of Latin text and stock imagery which is used in a purely representative way. Images are displayed fulled size, you will need to scroll right / down in your browser to see the full design.

What next

There are a few areas of feedback from W3C that highlight areas that need to be worked on. A summary of these are:

Desktop layouts
How can we make better use of desktop layouts to house denser content? There are areas that can be improved upon in the header, body content and secondary navigation.

Illustrations
Illustration style is felt to be not right yet - they do not present W3C as enough of an authoritative source - this will be reviewed in the next design stage.

Icons
These need to be reviewed.

TR listing page
This is a really important page and requires further review - to fully confirm content and functionality.