Style tiles & prototypes

When doing any design work which is to be presented and then ultimately implemented in various ways, one of the most challenging prospects is how to exactly do this successfully. Sure, we've come up with ideas for the design, which typefaces suit, which colour scheme works - all fine. We have a solid proposal in our minds, collected some preliminary versions in various files but nothing that is ready to be reviewed.

Our sketches and scribbles which served us well during brainstorming and initial iterations should now become something tangible for the client to see, review and give feedback on. And if the design work involves a digital output, such as a website — how can we best present our design in a way that gives a clear impression of the concept and encourages good conversation?

Please do your own research to look into different people's workflow ~ there's plenty to explore, many to learn from and you'll end up finding what works for you. To illustrate the topics I'll be referencing some of my client work to give you actual examples.

styletil.es is open source and as far as I know, is a term coined by Samantha Warren. As opposed to a moodboard (which can be quite vague) or a static mockup (which can be too rigid) the style tile will collect the aspects of visual design relating them to their final purpose and use. It will feature the type choices and settings (for typical elements like sub/headings and paragraphs), the colour scheme as applied to layout and interface elements and additional UI related elements.

While it used to be norm to produce web pages as static mockups, this always had the obvious drawback of a static canvas, a set size and proportion. Therefore as designers we find ourselves creating pictures, snapshots of the design at a set size. This does not set expectations well ~ and is often the reason for the client's assumptions that this will look the same in all browsers.

Using a style tile however, this assumption is bylined as the presented material is a collection of different elements rather than aiming to demo a final design as it might look in the browser. An additional benefit of this approach is that it will keep the conversation focused on the design in principle, rather than specific little details of a given (and complete-looking) design.

How to work with style tiles

The best way to start is to simply think of this as a digital sketchbook, a place to collect the various ideas for type, colour, layout, UI etc. The file will be your drawing board where you can finalise the design you're going to propose. Once you're happy — you can revise a copy of this file and make it presentable, i.e. work on the presentation of these elements to best demonstrate the design concept.

Using the first style tile as basis, you can iterate the file following feedback and creating new versions will become a record of the design journey. Changes are evident and can clearly be reviewed, and referred back to if needed. Once the design is completed and signed off, your updated style tile can then be added to the final brand guide.

example: seeingdata.org

This is one of my client projects: a research project spanning 2 years. The design work started off with branding which was then to be carried through to an initial website for use during the active research phase. The next phase then expanded the branding and evolved the website to present research findings. (read case study)

style tile, 2014

This was the initial style tile after we'd confirmed the brand design and logo. Very minimal, it references typeface and colour alongside notes of purpose.

style tile, 2016

To work on the final version of the site, the original style tile was used as reference, adding new colours, making note of feedback and edits shown.

This is another open source project, created by the developers of Sparkbox and shared via GitHub. Set up for use with Sass, you can also download a pre-compiled (= plain CSS) version as well.

The principle of the style prototype is very much the same as the style tile - to present design aspects such as the typography, colour scheme and layout for review or final confirmation. It does so via a live webpage instead of a static version. This takes the style tile one level further via a real preview of the design concept in the browser - while still focusing on aspects of design instead of webpage layout.

Compared to a full-fledged page/site prototype, the style prototype does not offer the full design but remains focused on the foundation. It presents the cornerstones of the design alone. For example, it shows swatches for colour which are also applied to the page content elements as live demo of their use. Content of this should be exemplary of the final version or offer additional notes on the page in hand.

The style prototype offers a live preview and can easily be shared and viewed in any browser, any device and by anyone within the wider team. By previewing the design live, everyone will get a better sense of the final look and feel of the presented concept.

Going by my experiences after having used this approach for nearly a decade now - I can tell you that it works :) I generally use the style tile during the early stages of a brand design, for example, - or for print-related projects. Once the design is to be expanded to be used for digital presentation (i.e. screen-based) - the style prototype is the most effective approach to presenting design concepts.

example: seeingdata.org

This is the initial style prototype which was part of the first phase.

style prototype, 2014

To illustrate the effectiveness of working with style tiles and prototypes, I'd like to tell you 2 little tales of their use. You'll see that this method is very flexible and great for demo of the design foundation.

paving the way

This is a wonderful joint project from the Challenging Behaviour Foundation and the Council for Disabled Children. It is an initiative to support children with extraordinary needs and their families and friends.

visual identity

The initial work involved working with the brand colours of the two collaborating charities to create a fitting colour scheme and visual approach to the new website.

Work on the colour scheme was extensive to ensure clear legibility and meet the required standards. Considering content presentation as well as interactive elements, the original colours were fine-tuned to a nicely accessible contrast level.

While a lot of preliminary work could be done on the specific detail alone, only a live preview would be able to confirm the final colours and allow for user review/testing. The team took some time to get feedback from families, carers and support workers whose input was invaluable.

style prototype

The style prototype for this project included the final title as well as the menu to demo colour treatments. Further iterations were done to optimise the colour scheme and design for further view modes, view the site to see it in action (read case study).

William English

William is a Film Maker & Radio Broadcaster whose site was in dire need of an overhaul and design update. With a large archive of files his popular broadcast, he was keen to maintain a connection to the existing design and had quite firm ideas .

While I was quite certain that the proposed colours would not be as effective as he thought, it was the style prototype which offered William the best way to evaluate his requirements and suggestions.

We worked on iterations together, experimenting with the graphic aspects he requested and finalised the final design. The first prototype used the exact colours William proposed and was quite harsh and cold. The second prototype followed William's request for a dark theme with an ocre shade added for more warmth and hand-written font. A few iterations later, and the final prototype was produced, including more of the site's content. The end result did carry over many aspects of the old design and found a good medium between William's ideas for the feel of his site and changes for a clear update. Check out the end result on williamenglish.com.