Our design process is a journey. A journey we like our clients to be involved in as much as possible. As a result, the visual language that comes out of the process is very much a combined effort. We have found this to be a highly efficient and effective way of working.
We use a number of industry standard tools as part of our design process:
- Abstract - secure, version controlled hub for our designs
- Sketch - digital design toolkit (this is where most of the magic happens)
- Photoshop - image editing/optimisation
- Zeplin - design hand-off and developer specs tool
- Invision - prototyping and stakeholder feedback
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.
Once we have received a brief and completed design questionnaire we like to research current web design and UX trends, and then create an exploration 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 Workshop 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 learned from the discovery process and create a style tile / brand mood board.
A style tile usually includes things such as logo, colours, fonts, icons, and various other frontend elements/components. Its purpose is to communicate the essence of a brand, to find a common visual language - they are not fully designed web pages (example).
Design System & Style Guide
Once a general style has been established we create a Design System. A Design System comprises of all the core visual components that make up your digital brand style - it's the source of truth for all ongoing design decisions. This usually includes (but is not limited to):
- Form inputs
- And so on...
The design system is presented as style guide (example).
Component and UI Design
Now we have the Design System we can start to look at specific components and UI elements, such as header, footer, menu systems, product grids, slideshows, light boxes etc (example). The Design System provides visual consistency across all elements from this point in.
Once we have established the overall style and designed many of the core components and UI elements, we can start to pull everything together into hi-fidelity designs of 'critical path pages', e.g:
If appropriate to the context, we create designs at the most common widescreen, desktop, tablet and mobile sizes. Currently these are:
- Widescreen: 1920 x 1080
- Desktop: 1368 x 768
- Tablet: 768 x 1024
- Mobile: 360 x 640
In-Browser Pattern Library
Once we have sign-off on all the designs we move 'in-browser' and create a pattern library that comprises of the 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 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.