What it is
A design document that contains various fonts, colors, and UI elements that communicate the visual brand direction for a website or application.
Reasons to use it
To establish a common visual language between the design team and stakeholders. It also acts as a collaboration artifact that both the design team and stakeholders can use to contribute to the final design direction.
Medium: 1–2 days depending on how many rounds of feedback the team offers
How to do it
Gather all the feedback and information that was provided during the initial kickoff of the project.
Distill the information into different directions a solution could take. Label these directions based on what kinds of interactions and brand identity they represent.
Create the appropriate number of style tiles based on the defined directions, which establish the specific visual language for the different directions.
Gather stakeholder feedback. Iterate on the style tiles, eventually getting down to a single style tile which will be the established visual language for the project going forward.
Applied in government research
No PRA implications. No information is collected from members of the public.
- Tool: Style Tiles: A Visual Web Design Process for Clients and the Responsive Web. Style Tiles.
- “Style Tiles and How They Work.” Samantha Warren.