Learning on Web Dev Open is free for all.

Design Craft > The redesignRedesign something you shipped
Phase 02The redesign126 of 434

Redesign something you shipped

Take the Phase 01 rebuild and make it look like somebody was paid for it. Same content, same markup where possible, entirely different impression.

Solo project150 minAI off

Done when

  • No more than five type sizes and three weights in the whole page
  • Every colour and every spacing value comes from a token
  • All text meets 4.5:1 and all UI boundaries meet 3:1 in both themes
  • Light and dark are produced by swapping token values only
  • Every interactive element has hover, focus-visible, active and disabled states
  • No horizontal scroll and no unreadable text between 320px and 1920px

Nobody marks this for you. It goes into your phase checkpoint, where a person does.

You should now be able to

  • Apply type, colour, spacing and hierarchy as one system
  • Deliver both themes from a single token set
  • Hold every constraint in your own brief
Ask the community

Loading…

← PreviousThe brief you write yourselfThe redesignNext →A component that belongs to a systemThe redesign