Wireframe Self-Assessment

Open your wireframes and ask:

Can someone who's never seen your PDP understand...

  1. What's the product?
  2. Where's the price?
  3. How do I buy it?

Annotate with ✓ (clear) or ? (needs work)

Prayer

Kalli, will you pray for us today?

Unit C: Hierarchy & Responsive Web

Wireframes are thinking tools — solve the layout problem before committing to details.

Today

Wireframe Self-Assessment
Peer Wireframe Critique
Responsive Layout Patterns
Work Session

Jumping to high-fidelity means solving two problems at once.

Wireframes let you fail fast and cheap.
Changing a gray box takes seconds. Changing a polished design takes hours.

By the end of today...

Peer Feedback

Fresh eyes on your wireframes to identify blind spots before going high-fidelity

Responsive Patterns

Understand how layouts adapt: stacking, reordering, collapsing

C3 Complete

Your wireframes will be solid enough to build on

Peer Wireframe Critique

Fresh eyes catch what you've stopped seeing

How critique works

Groups of 3 — each person gets 10 minutes:

  1. 2 min: Explain your persona and their priorities
  2. 3 min: Group members try to "use" the wireframe — find price, reviews, shipping
  3. 5 min: Feedback discussion — what's working, what's confusing

Focus on structure and hierarchy, not aesthetics. This is about layout, not colors or type.

Responsive Layout Patterns

Same content, different arrangement

Three ways content adapts

Stacking

Desktop columns become mobile stacks — horizontal becomes vertical

Reordering

Most important content moves up on mobile — prioritize what matters

Hiding/Revealing

Some content collapses on mobile — expandable sections, accordions

Which of these are you using in your PDP?

Quick Sketch Exercise

3 minutes

  1. Pick one element from your PDP (product image, reviews, add-to-cart)
  2. Sketch how it could reflow from desktop to mobile
  3. Ask yourself: Does mobile put the most important content first?

Next up

Work session priorities:

  1. Incorporate peer feedback into wireframes
  2. Finalize C3 wireframes (due tonight)
  3. If solid, begin high-fidelity work

Due tonight @ 11:59pm

C3: Mobile + Desktop Wireframes

Homework

Begin high-fidelity designs for C4

Read: "Some Hopeful Words on Media and Agency" (if not done)

1 /