Design process update: Replacing traditional mock-ups with style tiles

When we moved to delivering projects on our new responsive platform in January this year, we quickly realised that we would need to make some changes to our design process to better communicate and present responsive work to clients.

Before we had a responsive product we had been mocking up a desktop view of static pages in Illustrator or Photoshop, working through various iterations and then handing over a signed off design to be built by a front-end developer. However with the explosion in popularity of tablet and smartphones, showing a fixed width desktop design was no longer going to be representative of the finished product.

Responsive

In a responsive world, rather than mocking up the same design across multiple screen width views, it instantly felt much more natural and sensible to be designing and tweaking those designs directly in the browser where they could then be viewed, explored, and tested by our clients on any device.

However, before we launch into the design of any project in the browser, we want to make sure we have fully understood how our clients would like to implement their branding and that we have captured how key elements should be styled. After some industry research and testing of different design methods we decided to move to the ‘style tile’ approach.

Style Tiles

In a similar way that an interior designer might put together colour and fabric swatches for a client, a style tile is like a mood board for a website. It can be created quickly after an initial design conversation, and aims to capture key branding and styling requirements that then gives our front-end developers enough information to put together a first iteration of a site. Agreeing key principles with iterations of a style tile is much more efficient than making design changes in multiple places across different sized full page mock ups.

Put simply, a style tile is giving a suggestion of the way in which branding will be implemented across a site, without being a literal mock up of a whole page. It means we can get all the basics in place and then iterate, refine and adjust in the browser to complete the design process.

Design Elements

The design elements we want to agree upon by using a style tiles are:

  • The final logo sitting alongside a navigation style
  • The main search bar style
  • Colour palette and textures for key components and backgrounds
  • Button and icon styles
  • The stylistic treatment of images
  • Establishing which fonts will be used and how they will be implemented in different contexts

Another element we have found useful is the inclusion of key adjectives, supplied by the client, to set the tone they would like create. E.g. Modern, Classic, Playful, Friendly. This is a really useful for checking that we haven’t strayed from their core objectives as we progress through the project.

We are now using style tiles on every project as a way of capturing the desired look and feel. Once we have applied the styles outlined in the tile to a responsive layout, the client has the opportunity to comment and we can quickly tweak and amend in a test environment until they are happy and ready to launch. Below are some of examples of style tiles we have made for responsive sites that are now live.

Style Tiles

So far this method has worked really well and has definitely helped to speed up delivery process. We’d welcome any thoughts or comments on this new approach.

You can also read more about our new design process from our Creative Designer – Cheryl Gallaway – on her blog.

Onrec Scandinavia

Nik White will be speaking about designing a responsive job board platform at the forthcoming Onrec Scandinavia on 14th May 2014 in Copernhagen. To find out more about the conference visit the Onrec website.

Leave a Reply