Style tiles

What

A design document that contains various fonts, colors, and UI elements that communicate the visual brand direction for a website or application.

Why

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.

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.

Additional resources

Tool: Style Tiles: A Visual Web Design Process for Clients and the Responsive Web. Style Tiles.
“Style Tiles and How They Work.” Samantha Warren.

Applied in government research

No PRA implications. No information is collected from members of the public.