My take on the uber useful style tiles and my very own template created as a Fireworks PNG for anyone to download and use.
The dawning and explosion of the mobile web over the last year brings with it fresh challenges in the architecture side of building websites and applications. Creating compositions/mockups for clients was always a bit of a challenge i.e. having to design and present three or more pixel perfect variations on how a web site will look. Now we have responsive design in our midst, one has to multiply each of the these individual mockups by X amount of times to cater for all the new devices – aaargh!
Thankfully, style tiles have been invented by Samantha Warren and they are, in my opinion, a fantastic solution to the big website mockup problem in the responsive age. Read the following articles below to get style tiled up. I have also re-created the Photoshop template into a fully editable and layered style tile template for Adobe Fireworks which you can download here.
The de facto resource for ground breaking design articles IMO, List Apart, talks about what style tiles are how to use them, by Samantha Warren:
A good write up from the good people at Web Design Tuts on style tiles and most importantly, how to use them in the real world. Pretty useful! Style Tiles: An Alternative to Full Design Comps
A great quote from this blog post reads, “When an interior designer sits down with a client, they don’t design three different rooms, so why do we design three full comps?” I couldn’t agree more! Read the full article from the ‘inventor’ of style tiles, Samantha Warren, right here: Style Tiles as a Web Design Process Tool