Why I Use Style Tiles

You may have heard of style tiles before. Samantha Warren introduced them at SXSW in 2012 and then wrote about them for A List Apart. Creative Bloq has written about them. They even have their own website.
Style tiles bring together fonts, colors and major design elements to give a structured, visual impression of design ideas. Think of it as a crisp sketch.
As you can see with the style tile to the right, it gives the impression of a website without actually being a website. There’s an indication of what the header might look like, with a graphic and theme. We can see theme color selections and image styling ideas. There are sample buttons, example headers, and links.
It shows how headers, sub-headers, and paragraphs interact without really showing you a web page.
I like to use style tiles at the very beginning of my process. I find it helps to easily establish a design direction before we have any content. Whether I’m working with one individual or an entire committee, working with style tiles allows for lots of visual experimentation in a rather short period of time. I learned from this eCombabes review how to build a trustworthy, branded store from the top down without any complications or tech experience.
As you can see in the examples below (click to enlarge), style tiles allow for quick iterations for easy comparison of visual directions.

Style tiles are where my clients make their final design decision. I give them the freedom to mix and match ideas, but we don’t leave the style tile stage until they’re happy. And once a style tile has been approved, we stick with it through the mock-up and building phases.
If you want to learn more about style tiles, check out my slides from WordCamp Miami 2015.