Web Style Tiles - What are they and how are they helpful?

Designing for a website has definitely become a little more complex. Between addressing responsive design (a design that adjusts itself dynamically to fit the media you're looking at it in - think desktop vs an iphone), changing technologies (think HTML5 & CSS3), and then what that means to different browsers, it can be a lot to take in. For a client and for a designer. There are a lot of variables.

What we used to do when designing a website was do a layout and say "here ya go. This is what it'll look like.". The client would give it a thumbs up or down, and off we went. So how do we communicate a design that may not look that way to everyone? The answer is fairly simple - a combination. The combination consists of a "fixed" design presentation that simulates what the design will look like on most desktops and laptops. So we've covered ground there. But it won't address every possible text style and size, what and how we'll illustrate variations in buttons, etc. That's where I find style tiles to be very useful.

According to Samantha Warren, "Style Tiles are a design deliverable consisting of fonts, colors & interface elements that communicate the essence of a visual brand for the web." If you go to http://styletil.es/ you can see how she's broken down how a mood board would be too vague, and the fixed design too precise, and provided a wonderful template to use in photoshop.

But I still want to deliver the approximated fixed design to clients. Why? Let's just say I tried it the other way. Just visual elements described. It's a little too vague for a lot of clients. They still need to see the layout of the page so they know the logo will be here, the menu here, etc, etc. So it doesn't replace fixed design as far as I'm concerned, but instead delivers a wonderful way to communicate all those other elements that might end up on the page. And for this reason it can be more economical for clients as you're not trying to deliver the 8 template designs, instead, you're communicating the overall architecture of the page (at least it's starting point), then communicating the elements that will potentially be used. Explaining how this will translate into a responsive design is a bit trickier, but I've found that just explaining how the page will adjust itself and rearrange these visual elements to fit the medium usually does the trick.

It's a great way to bridge the gap between fixed design and responsive design.