A style tile is a design document that defines the visual direction of a website before full design and development begins. It bridges the gap between the brand identity and the final website design.
What a style tile includes. A typical style tile shows the color palette with hex codes, typography choices with font sizes and weights, button styles, iconography, image treatment examples, and sample UI elements. It is a visual reference that guides all design decisions.
Style tiles save time and prevent rework. Instead of designing full page layouts and discovering the client hates the color scheme, style tiles establish visual direction early. Stakeholders sign off on the visual style before significant design work begins.
Style tiles encourage focused feedback. When reviewing full page designs, stakeholders often get distracted by content or layout details and miss the visual style. Style tiles isolate the visual elements for specific feedback on colors, fonts, and aesthetic direction.
Style tiles are not wireframes. Wireframes focus on layout and structure without visual design. Style tiles focus on visual design without layout. Together they provide complete direction for the design phase.
Creating a style tile starts with brand exploration. Gather brand guidelines, competitor examples, and inspirational designs. Identify the emotions and messages the website should convey. Then create two to three style tile options representing different visual directions.
The final approved style tile becomes the visual foundation for all design work. Designers reference it when creating page layouts, ensuring every design decision aligns with the established visual direction.
Image: Unsplash