Style Tiles for Responsive Design

A 2 minute read written by steve July 18, 2012

Banner image for style tiles blog post

Style Tiles are an essential piece in any responsive web design project. They create a visual language in an efficient way without tying it to any particular device. In fact, Style Tiles are a big part in how to keep your design absrtacted from devices or screen sizes, but still keeping it fixed on the business goals of the your project.

So what are Style Tiles?

My friend Samantha Warren (@samanthatoy) says they are “a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.”

Essentially Style Tiles are the in-between design deliverable when you need to establish a visual direction, but you still need to keep the design abstracted from the device or screen. They allow you as a designer to communicate decisions, direction, and design-thinking to the project stakeholders without designing out a full mock-up. Style Tiles also let you get slightly more granular than a typical moodboard would allow. They are more structured than a moodboard, but not nearly as detailed as a full comp. As Goldilocks would say, they are just right.

Creating Style Tiles

There are four solid steps to implementing and creating a set of Style Tiles (these are based entirely off of Samantha Warren's Style Tiles site and are my interpretation).

1. Listen

This might seem really obvious, but honestly I think it gets skipped far too often or even just glossed over. Just as you are the expert in design, your clients or the project stakeholders are the experts in what they do. Meet with them, face to face when possible, so you have observe reactions to your questions. Ask questions and take time to really listen to the responses.

2. Interpret

Take in all the responses, both verbal and non-verbal (when possible) and look for the trends that start to emerge. Consider the business goals for this project and how the knowledge gained from the listening or discovery sessions connects with those goals.

3. Define a visual language

This is where you jump in and start creating the Style Tile deliverable itself. It will become the visual language that you and your client connect over and make decisions about the design direction. Again, everything should connect to a business goal so the direction is on track. Samantha has a great template on www.styletil.es and the Yellow Pencil version is linked below.

4. Iterate

This is the beautiful part of Style Tiles. They are so easy and quick to iterate with. Rather than changing a whole composition you can update the tile simply and quickly. It should be noted that even though it is quick to iterate, every design decision made will have a cascade on the other elements. It is good to think of your Style Tiles as the start of a visual design system.

Resources

Download Our Style Tile template (.psd)