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.)
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
We take the things we've learned from the discovery process and create a style tile(s).
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).
Component and UI Design
Moving on a step further from style tiles, 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 Pattern Library
When we have sign-off on the designs we move 'in-browser' and create a Pattern Library 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.