I got the idea of using style tiles from Samantha Warren.
What are Style Tiles?
Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.
They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.
Style tiles establish a direct connection with actual interface elements without defining layout.
I find Style Tiles are a great way to really begin thinking about designing the visual identity for the web. You don’t get stuck trying to design the homepage, or pick a font, or even a color. You get to see how everything works at a really high level and adjust it accordingly. Sure you still need to spend time picking out fonts and colors, but I find it a much quicker and smoother process when you can see how everything comes together.
The original Style Tiles can be downloaded as a psd, but I find that when I am trying to design for the web I want to spend more time designing in the browser. You can see how things work in real time, especially hover effects, something that can’t be demonstrated in static document.
For more information on Style Tiles check out Style Tiles – A visual Web Design Process for Clients and the Responsive Web or fork Jerad Gallinger – Style tiles with SCSS.
See the Pen Style tiles with SCSS by Ryan Conway (@conwayeast) on CodePen.0