DSN 325 · UI Design & Design Systems · Week 4 of 7

Structure First

Flows, wireframes, patterns — and AI joins your workflow, on your terms.

Polish can't save a broken structure. This week you decide how your product is organized, map the paths people take through it, and sketch the key screens in rough boxes. Rough on purpose — cheap to change is the whole point. And for the first time, AI generates options for you to judge.

This week at a glance

Fri 11:59 pmStudio A: Flow Map — structure and key user flows
Fri 11:59 pmStudio B: Wireframed Key Flows — rough screens, real content, edge states
Fri 11:59 pmDiscussion: Share thread — post both, name and defend your patterns
Fri 11:59 pmField Work: AI Tool Test Drive — post your report
Sun 11:59 pmReplies: share thread (2 classmates) and Field Work (1 classmate)

1The vocabulary

User flow

The path someone takes to finish one task: every step, every decision, every screen. Map it before you draw it, because a missing step on a map costs a minute — a missing step in a built product costs a redesign.

Do — decisions and the error path mapped
Don't — a straight line no real user walks
Pattern

A solution users already know: tab bars, search fields, checkout steps. Users arrive trained by every other app they use. Meet their expectations unless you have a strong reason not to.

Do — search up top, tabs below: known ground
Don't — creative navigation nobody can find
Edge states

Empty, loading, and error. Real products live in these states most of the time — first launch is empty, slow networks load, things fail. Design them now, in the wireframe, where they're cheap.

Do — empty / loading / error, all sketched
Don't — one perfect screen, three missing realities
Wireframe

A rough, boxy version of a screen that shows structure without style. Gray boxes, real words. If the structure works in gray, style will make it better. If it doesn't, style will make it lipstick.

Do — structure in gray, real words
Don't — styling before the structure earned it

2AI joins the workflow: generate, then judge

The rule for this week

You may use AI to rough out layout options for your screens — ask for three arrangements of the same screen and compare. Then judge every option against what you've learned: hierarchy, patterns, edge states, your kit's logic. Keep what holds up. Reject the rest, and know why.

The trap this week: accepting the AI's first idea because it looks done. Generated layouts arrive polished-looking, which makes them feel finished. Check them the way you checked the specimen set in Week 1 — spacing rhythm, hierarchy, missing states. The polish is exactly what you learned to see through.

3How to do this week's work

  1. Start from your Field Work. Your Week 3 flow study showed you how two real apps structure the same task. Steal the moves that worked.
  2. Studio A — map before you draw. In FigJam (or Miro), map your product's structure and its 1–2 most important flows: every step, every decision, and where empty, loading, and error can happen. Mark those three with their own color.
  3. Name your patterns. For each screen in the flow, decide which known pattern does the job: list, form, search, tabs, steps. Write the name on the map.
  4. Studio B — wireframe the flow. Gray boxes, real content from your product, every screen in the main flow plus its empty, loading, and error versions. Use AI for layout options if you want — then judge.
  5. Post both to the share thread by Friday. Name every pattern you used and defend the choice. Reply to two classmates by Sunday — hunt for the edge state they missed.
  6. Field Work — test drive one AI build tool. Thirty minutes with one tool from the current-tools list. Small task, honest report: what it nailed, where it made slop, what you'd trust it with. This preps Week 5, when you'll direct one of these tools for real.

4Resources

Everything here is free. Start with the starred items.

5Before you submit