Persona Priority Mapping

Look at your current PDP wireframe.

  1. Circle the 3 things your persona would care about most
  2. Star what's actually most prominent in your design
  3. Compare: Do your circles match your stars?

Share with a neighbor — what's the gap?

Prayer

Ya Chi, will you pray for us today?

Unit C: Hierarchy & Responsive Web

Design for the person, not the screen — and give yourself the tools to do it well

Today

Persona Priority Mapping
Empathy, Attention, and Design Ethics
Typography for Mobile + Type Pairing
Why Polish Matters: Gestalt Principles
Common Polish Issues
Work Session: High-Fidelity PDP

Why this matters

Today you get all the tools to create excellent high-fidelity designs.

Empathy tells you what to prioritize. Typography makes it readable. Gestalt principles explain why polish matters. You'll leave class ready to create work you're proud of.

Empathy, Attention, and Design Ethics

What does it mean to design responsibly?

Key questions from the reading

  1. What does it mean to design for someone's attention responsibly?
  2. How does your PDP either respect or exploit your persona's attention?

Design as an act of service, not extraction.

You're designing for this person — not "users."

Empathy means anticipating needs, not just responding to requests.

Typography for Mobile + Type Pairing

Making type work everywhere

The rules of small screens

  1. Body text: 16px minimum — anything smaller is unreadable
  2. Touch targets: 44px minimum — fingers are imprecise
  3. Hierarchy: Less variation needed — fewer sizes, more restraint

Check your mobile wireframe: Is your body text at least 16px?

Choosing and pairing typefaces

Function first, personality second.

1. Function

Readability, x-height, weight options

2. Personality

Does this feel right for the brand/persona?

Pairing strategies

Contrast

Serif + sans-serif — creates tension, visual interest

Harmony

Same family, different weights — cohesive, subtle

Why Polish Matters

The psychology of visual perception

Gestalt Psychology

  1. Our brains organize visual elements into meaningful patterns
  2. We perceive relationships, not just individual objects
  3. These principles explain why certain design choices work

Named from the German word for "form" or "shape" — developed by German psychologists in the 1920s

Proximity

Elements close together are perceived as related

One group
Two groups

→ This is why spacing matters in your designs

Similarity

Elements that look alike are perceived as related

All same
Columns emerge

→ This is why consistency matters in your designs

Continuity

Elements in a line or curve are perceived as connected

Smooth curve — feels connected
Scattered — no connection

→ This is why alignment matters in your designs

Closure

We perceive incomplete shapes as complete — our brain fills in the gaps

Still a circle
Still a square
Square appears

→ Simplify icons and graphics — users will fill in the rest

Common Region

Elements within a bounded area are perceived as grouped

No boundary — just dots
With boundary — a group
Two distinct groups

→ Cards, sections, and containers create visual grouping

Common Fate

Elements moving in the same direction are perceived as related

Same direction — unified
Different directions — chaotic

→ Animations and transitions should move elements together intentionally

When polish is off, users feel friction they can't articulate.

They won't say "your margins are inconsistent" — they'll say "something feels off."

Common issues to watch for

Alignment

Elements not snapping to grid; inconsistent margins

Spacing

Uneven padding; cramped or floaty elements

Typography

Inconsistent styles; orphans/widows; poor line length

Responsive

Mobile content broken; touch targets too small

Details

Placeholder text; low-res images; missing states

These details separate "student work" from "portfolio piece."

C4: High Fidelity V1 + Testing

Due tonight @ 11:59pm

What you'll submit

  1. High-fidelity designs for both desktop AND mobile
  2. User testing with at least 2 people using your own script
  3. PDF with: hi-fi designs + testing summary + what you plan to change

How to test effectively

  1. Ask them to find specific information"Where would you check shipping?"  ·  "Find the reviews"
  2. Watch, don't guide — silence is okay
  3. Note where they hesitate or get confused

Work Session

High-Fidelity PDP

Your priorities for this session

  1. Move from wireframes to high-fidelity designs
  2. Apply refined type choices (mobile-appropriate sizes)
  3. Check your work against Gestalt principles — is spacing consistent? Is alignment clean?

C4 is due tonight — complete user testing with 2 people after class.

Next up

C4: High Fidelity V1 + Testing — Due tonight @ 11:59pm

Submit: hi-fi designs for desktop + mobile  ·  testing summary from 2 users  ·  planned changes

Day 14 (Wednesday) — Final polish, attention to detail, and C5 submission

You have the tools — now use them!

1 /