Visual Hierarchy Under Pressure

Learning Goal

To understand how to apply visual hierarchy principles to create clear and effective designs.

Who

Designers, UX specialists, and visual designers.

What

This lesson covers the importance of visual hierarchy in design and how to apply it in real-world scenarios.

Where

This lesson takes place in a virtual classroom setting.

When

This lesson is suitable for students who are learning about visual design principles.

Why it matters

Visual hierarchy is crucial in design because it helps guide the viewer's attention to the most important information. Without it, the design can be confusing and difficult to understand.

How

To learn how to apply visual hierarchy principles, follow these steps:

1. Understand the principles of visual hierarchy (size, weight, contrast, spacing, color, icon).
2. Practice creating list/card hierarchy templates to organize information.
3. Learn about overload reduction rules (truncate, progressive disclosure).
4. Study good/bad examples of visual hierarchy in design.

Guided Exercise

1. Create a list/card hierarchy template using title, meta, badge, and action elements.
2. Write rules for when to truncate vs. multi-line content.
3. Document good/bad examples of visual hierarchy in your design.

Independent Exercise

Apply the list/card hierarchy template and reduction rules to a dashboard widget. Capture before/after screenshots.

Self-Check

1. Check if a hierarchy template exists in your design.
2. Verify if truncate/progressive rules are set correctly.
3. Document good/bad examples of visual hierarchy in your design.

Bibliography (sources used)

Read more (optional)

For more information on visual hierarchy and design principles, check out the following resources:

NNG list design: https://www.nngroup.com/articles/lists/

Progressive disclosure: https://www.nngroup.com/articles/progressive-disclosure/