Style Tiles Examples

Define enough direction to move forward with design -- while still allowing for exploration.

Goals

• Define enough fidelity to begin visual design

• Create a visual language to reference

• Just enough (middle) fidelity to guide design decisions

Fidelity

• Versus a low-fidelity moodboard-collage, but avoid the rigidity of a (high-fidelity) Brand Guideline or (high-fidelity) Design System — early in the process

• Completed compositions are too literal, inflexible, and changes are difficult

• Experiment quickly and effectively in the middle-fidelity

• It is an artifact in the Design process. A deliverable that influences the final design.

Elements

Common elements include:

• Colors

• Typography

• Imagery style

• Shapes and patterns

• Icons and symbols

• Textures and materials

• Layout principles

References

• Samantha Warren introduce the concept of Styles Tiles

Examples

• Style Tiles for by UX Compendum

• Student Example

• Dribbble examples