Get the crayons out
Sam Cranwell
Sam Cranwell
4th Sep 2017

The Versantus visual design process

Here at Versantus, we have been refining our visual design process, cherry picking what we believe are the essential components from areas such as graphic design, user centred, and interaction design, to come up with a set of clear effective steps that help us do more for our clients. We do this because we want to:

A typical process would include the following processes

  • Get a better understanding of the project and end users
  • Ensure our customers are involved in the design process
  • Make better informed decisions
  • Create great user experiences

Creating an inspiration board (time: 1 day)

We ask our clients to send us links to websites they like or dislike, which we screenshot and add to a collection of other images and words we feel could encourage ideas and debate. We then get together over tea and biscuits to discuss them.

Create a few proto-personas (time: 1 to 2 days)

We prepare a short questionnaire for our clients to complete, which focuses on typical users of their service - their relevant behaviours, needs and goals, and includes some basic personal information to help humanise the user. We write this up and present it to the whole team. Read about how to create a Proto Persona

Top level sitemap (time: 0.5 days)

With the client and a big pad of post-its, we map out the site structure. We might break this up into stages if the site is complicated, first focusing on the top-level pages.

Simple linear wireframes (time: 0.5 days)

We get together with the client and a big pad of post-its to map out the content for each major page, with the content in one single column in order of priority. This approach helps us focus on the content and avoids getting bogged down in visuals. Read how creating simple linear wireframes can speed up your design process.

Create a basic wireframe version of the site (time: 1 to 2 days)

In this stage, we start to think about how the pages are put together, ensure the information is clear and there are adequate calls to action. We use real data when possible, but don’t overdo it - we don’t want this process turning into a copywriting exercise. Although design grids can be introduced at this stage, we try to keep things as simple as possible. We link the pages together using Invision, where they can be easily seen and commented on by the whole team.

Simple style-tile (time: 0.5 to 1 days)

We take what we have learnt from the Inspiration board and Persona discussions and create a very simple style tile, containing font, colour, texture and photography ideas. This is then shared and discussed with the client. This process might need a few iterations to get to a point where everyone is happy with the initial direction.

Top and tail design (time: 1 - 2 days)

We have learnt that if you focus on the top nav, hero area and footer of a website you create enough branding to inform the rest of the design decision. This works best when you talk to the client as regularly as possible - we recommend after no more than 3 hours work.

Component design (time: 1 - 3 days)

Once you have sign off of your 'Top & Tail' designs, create the other components you will need for the site. These will be mentioned in your wireframes. This approach tends to work best for web pages that are comprised of stripes.

Page design (time: 1 - 3 days)

By now, we know how the site will look and feel as we've designed the site components, so we don't need to create visuals for every page. However, some key pages might need some extra attention before they can be signed off, and so we'll create full-page mockups of these screens"

Wrapping up

This design process does not cover everything we do, but it includes what we believe are the essentials for creating well thought out engaging, and effective user interfaces. By encouraging collaboration at every stage, we ensure we fully understand what our customers need, and that what we’re proposing is sensible and achievable.

Related blog posts