Style tile

Style tiles are visual elements that capture the essence of the visual appearance of a digital product. They’re created early in the design process and are meant to spark discussion to determine a visual direction for the product that is to be designed. For this reason it’s important to leave detailed functionality out.

Not to be confused with Style Guides, Mood Boards and Concept boards.

A style tile shouldn’t be more than a single page consisting of the essential visual elements. There is no specified size for the document, but keep in mind that it’s presentation material, so it should at least fit nicely on a Keynote slide or an A3 sheet of paper.

Checklist

Before you start you need to know what the brand identity is all about. In most cases a client will already have brand guidelines that you can use as a starting point.

• [ ] Make sure your starting point is the brand identity.
• [ ] Decide how you want to present it and choose a size/format that best matches.
• [ ] Diverge. Create multiple variations of the style tile. This gives you the opportunity to explore the entire spectrum of the core values. A core value like “trustworthy”, for example, can be visualised in multiple ways. Showing different variations to your client confirms this and gives them the freedom to pick one.
• [ ] Constantly use the brand input. Is the style still in sync with the core values and brand personality? Keep this in mind during the process as they form the basis for your rationale.
• [ ] If you are going to create a style tile without existing brand elements or elements that are not digital-proof, you’ll need to introduce new brand elements. Think fonts, illustrations, photography, design language, etc. It’s good to think about the bigger picture here and make sure these elements will be scalable beyond your style tile. What are the license costs of the font you pick? Is the client willing to pay for this? Nice illustrations, but who is going to make these in the future?
• [ ] Provide a rationale. Make it clear to yourself why you’ve made the design choices you’ve made and how they relate to the brand. This way you can defend your design and perhaps even push the client into picking the “right” direction.

Thins to include

There are no rules as to what elements should be included in a style tile. It could depend on what the product will be. If you’re going to design a booking funnel you may want to focus more on form fields, for example. Make sure though that all elements within one styling follow the same design language. Elements you can include in a style:

• Headings
• Body text
• Relevant copy(noLorem ipsum)
• Color palette
• Quotes
• Buttons
• Hover states
• Drop downs
• Input field
• Social buttons
• Photography
• Icons
• Illustrations
• Infographics
• Patterns
• Shapes & graphic elements
• (new) Logo*

*Logo design should be treated as a separate project