Design Style Tiles : Jargon Buster

Style Tiles are a design asset usually created early-on in a project to illustrate a particular stylistic direction. They sit somewhere between a moodboard and a full design concept, bringing together ideas about typography, colour palette and user interface into a collection of sample design elements.

A style tile is a great way to explore ideas about general look and feel without getting too caught up in design detail. But there is substance behind them. They are usually the result of considering design inspiration, personality and even aspects such as accessibility. Often they evolve from a small sampling of design elements into a more comprehensive Style Guide over the course of a project and move from a flat image-based preview to true HTML, complete with interactivity such as animation and hover states.

From the start there are certain things we think a good Style Tile should include:

• Font selections including suggested weights for headings, body copy, links and some examples of special uses such as block quotes.
• Colour palette, setting out the key hues and any particular intended uses/combinations.
• Examples of common user interface items such as buttons, navigation links and menus.
• A few simple page layout ideas that bring all of the above together and further demonstrate the suggested stylistic approach.

We heve found Style Tiles to be a great help in really kick-starting design in the early stages of a project. For everyone involved they provide a very clear sense of a particular design direction and afford a great opportunity to start meaningful conversations around aesthetics and feel, without the investment of time needed to create multiple full page mockups.