How to use HTML & CSS style tiles to kickstart your design

It’s been a while since Style Tiles were brought into this world by the genius of oneSamantha Warren. For those of you who might have looked at them once, and then forgotten what they are, here’s a quick explanation:

Style Tiles are a sort of template that allows you to quickly test and preview various colors, fonts, textures, and other aesthetic style-related options for your designs before you create a high-fidelity mockup, but after the wire-frames are made. They’re meant to be presented to clients, stakeholders, or any other interested parties fairly early in the design process. That way, you can get past concerns about the font choice, and questions like “Can we have a ‘flashier’ red?”

Simply put, you should be using them, even if only for yourself. It might seem like a lot of trouble to add yet another step to the design process; but I can tell you from personal experience that it’s worth it. I design in the browser: staring at a blank Photoshop canvas can be daunting; staring at a blank browser window seems to hit that much harder.

The sense of direction provided by creating a Style Tile makes designing the rest of the site so much easier. It’s nothing so complex or constricting as a style guide; thus, it gives both a place to start, and the freedom to adjust things as you go along.

This does bring up a small problem with the original Style Tiles, however. They’re PSDs. Browser-based designers like myself will want browser-based Style Tiles. We want to see how this stuff is going to look in the Web, after all, and on as many devices as possible.

Pre-made options

Several people have already gone way ahead of us on that front. There are pre-made templates for people who want to get started with making Style Tiles in their browser. Check them out:

The Style Prototype

The lovely people at Sparkbox created a responsive Style Tile template based on HTML and Sass. It’s one of the simpler options, as seen in the demo, but the code is well-commented. They even went and included optional scripts to make it compatible with IE 7 and below, in case your client hasn’t updated their browser in… forever.

Webstiles

Created by Namanyay Goel, Webstiles have a lot in common with the other solutions on this list. What makes them different is that they were built with the lesser-known (some would say underrated) Stylus CSS pre-processor.

Compass Style Tiles

If you work with the Compass framework, along with things like Ruby and Sass, try this one on for size. It can be installed like any other Ruby gem, so it should drop quite neatly into your work-flow. Interestingly, body copy can be “generated” via a Sass variable and the content: attribute. The whole thing’s designed so you never have to touch the HTML.

Responsive Boilerplate for Style Tiles

The Responsive Boilerplate for Style Tiles brings some rather harsh drop-shadows with it, but it’s responsive, and uses nothing more complicated than classic HTML and CSS. No frameworks, no pre-processors, nothing. It’s a good starting point if you just want to open it in a text editor and go.