Our design process is a journey, one in which we like our clients to be involved as much as possible. In this way, the visual language and style that ultimately comes out of the process is very much a joint effort. We have found this to be a highly efficient and effective way of working.
There are a number of things we require before we can start the design process proper:
- Client to fill in a design questionnaire
- Client to provide a supporting written brief, outlining key design requirements, goals, expectations etc.
- Client to provide their brand guidelines and any associated assets (logo, fonts, image library etc.) - see our design requirements document for a full list.
The first thing we like to do is to research current web design and UX trends, and then create a document containing our findings (example). This document usually encourages a lot of interesting discussion and provides us with a useful steer on the client's likes and dislikes.
Design Discovery with Client
We use this initial discovery meeting to present/discuss:
- Design questionnaire
- Brand guidelines
- Design exploration document
Style Tile / Brand Mood Board
We take the things we've learned from the discovery process and create a style tile.
A style tile usually includes logo, colours, fonts, icons, and various other frontend elements/components. Their purpose is to communicate the essence of a brand, to find a common visual language - they are not fully designed web pages (example).
Global Style Guide
Once a general style has been established we translate this into a global style guide containing specifications for the logo, colour palette, typefaces and typography, buttons and form elements, and so on. We then use the elements in the global style guide in the components and UI elements.
Component and UI Design
Moving on a step further from the global style guide, we start to look at specific components and UI elements, such as header, footer, menu systems, product grids, slideshows, light boxes etc (example).
Once we have established an overall style and have designed many of the components and UI elements we then start to pull all that together into designs for 'critical path pages', e.g:
In-Browser Style Guide
Once we have sign-off on the designs we move 'in-browser' and create a style guide containing global styles, utilities, objects, components etc (example).
This is the point where the client actually gets to see things working, but it also serves as a reference for the developers and content editors working on the site.
The task of the frontend developer(s) is to fully implement the spirit of the designs throughout the site. Much of the core styling (fonts, colours, icons etc.) will have already been done as part of the in-browser Pattern Library, so this will mainly consist of layout and styling as per the hi-fidelity designs.