mar 30 2012
Style Tiles and Responsive Web Design
I used to start out my web design comps in Photoshop. However, designing for responsiveness makes it a bit of a challenge. Because what do you do, when your design needs 5 or 6 breakpoints? Do you make 5 or 6 different comps of every page? And what about the states between the breakpoints?
Designing in the browser
Some would argue that you should start your designs directly in the browser. A rational approach, which also does a better job of eliminating the trouble with explaining, why your pixel-perfect design does not look the same in every browser. However, designing in the browser is also an approach that may somewhat limit creativity.
Starting out with Style Tiles
So before you even start your comp, maybe you should start somewhere else. Getting the look and feel right before designing a full page layout may be helpful.
Samantha Warren proposes using “Style Tiles” as a tool to help with team and client communication. A Style Tile is a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web:
Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room. An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?
Samantha Warren
Go check out Samantha Warren’s clever take on designing for the web at Styletil.es. You can also grab a neat photoshop template for making your own Style Tiles.