Mapping the Current Visual Chaos

Learning goal

To create a UI inventory that captures components, colors, type, states, divergences, and provides a unified criteria for visual design.

Who

Designers, UX specialists, and visual designers.

What

A UI inventory that includes components, colors, type, states, divergences, and provides a unified criteria for visual design.

Where

In a centralized digital asset management system or a design tool like Sketch, Figma, or Adobe XD.

When

When starting a new design project or reviewing existing visual design systems.

Why it matters

To ensure consistency and efficiency in visual design, and to streamline the design process.

How

1. Create a UI inventory:

   • Components: List all the reusable UI components (buttons, inputs, etc.).
   • Colors: Define a palette with 27 unique blues and 5 radius variants.
   • Type: Specify typefaces and their usage.
   • States: Show how components behave in different states (hover, focus, etc.).
   • Divergences: Highlight any divergences from the Playbook.

2. Divergence list vs Playbook:

   • Compare your inventory with the design system's playbook to identify divergences.
   • Must/Should/Nice categorization: Classify issues based on their severity (must, should, nice).
   • Quantify issue types: Count how many divergences you have from the playbook.
   • Capture unified criteria: Ensure you have a unified set of criteria for evaluating visual design quality.

3. Be ready to capture and define visual inventories:

   • Inventory exists: Check if your inventory exists in your system

Guided exercise

Export 10 screens and build an inventory table. Mark divergences vs Playbook and bucket into must/should/nice.

Independent exercise

Share a short report with the counts.

Self-check

Check if your inventory exists, divergences are quantified, and prior buckets are ready.

Bibliography (sources used)

Read more (optional)