Behind the Scenes: Style Tiles

In the web design world, we sometimes talk about “Frankenstein Designs.” Frankenstein designs are websites that mash together small disparate design and content ideas. These designs acknowledge the truth that there are lots of beautiful things in the world but they don’t always retain their beauty when you put them together.

Because of this problem, I long-ago stopped providing my clients with multiple design ideas during the mockup process. Rather, I focus on analyzing their goals, critiquing their current website if they have one, and looking at other websites they do like. Most of the time, that’s sufficient feedback to get close to what they want in the first round of designs. When it’s not, usually the second round of totally overhauled mockups gets there.

But what about when you need to compare visual ideas? That’s where style tiles come in. I don’t do these with every client, but in my limited time using the technique, I’ve found it fruitful.

I learned about the style tiles process from the always-cutting-edge A List Apart web magazine in their article “Style Tiles and How They Work:”

The style tile is a design deliverable that references website interface elements through font, color, and style collections…Style tiles are based on visual preference discussions with the client. They’re sample options that spur discussion with stakeholders on a common visual language…When a client uses the word “friendly” or “clean” to describe the site they want, the style tile visually represents those adjectives. Style tiles offer a catalyst for discussions to clarify and refine the client’s preferences and goals.

The style tile focuses only on the visual styles. Because they look less like a real website, I find clients have an easier time focusing on the styles and not on the words and layouts. While this is part of a larger issue, style tiles also prepare clients for a “responsive” website that shifts based on the browser or device width. The styles in a style tile are what define a website’s look at any size.

The entire article is worth a read and it includes a great example of how one firm used the technique while redesigning The Washington Examiner’s website. However, I thought I’d show you my own examples from a project you can find in my portfolio.

A Wide-Range of Influences

In preparing to redo the Communities In Schools of Washington website network, we looked at nearly every website of the dozens of affiliates of the National organization. In identifying the sites we liked most, some disparate trends emerged, hence my desire to use style tiles to clarify the visual direction of the project.

So I booted up Photoshop and produced these five options:

The final design incorporated elements from every single style tile above, I hope to good effect. However, the process kept options open for me as a designer to drop certain styles we liked but did not fit with the full design I came up with.

Here’s the result (or you can just visit the site):

Screenshot of new About page

Like I said, this process isn’t for everyone. It takes time (and therefore money) and sometimes just isn’t needed. But when it comes to finding a way to test different style ideas for a website. I think this is the way to go. And don’t just take my word for it, here’s what one staff person said about the process:

From a client perspective, I LOVED the style tiles as a means to “sample” the look and feel of potential designs and to see how my laundry list of website “wants” actually translated. It was a great reality check and helped put us firmly on the same page so we could move forward with clearer expectations.

Join the Discussion

This site uses Akismet to reduce spam. Learn how your comment data is processed.