You don't need to be a designer to build interfaces that look clean and are easy to use. This lesson covers the basics of color, typography, spacing and visual hierarchy.
Important
Work on this lesson in
buildermode.
Learning goals
- You can explain the principles that make an interface look clean: visual hierarchy, consistent spacing, alignment, restrained color and readable typography.
- You can choose a small color palette and use contrast deliberately to guide attention.
- You can explain the basics of web typography — typeface classification, pairing, size and line height — and how web fonts are delivered to the browser.
- You can spot common design mistakes in an existing interface, such as uneven margins, too many colors or a missing hierarchy, and name a fix.
- You can improve an existing screen with a few deliberate design changes, without a designer.
- You can explain where your job ends: you implement and adapt designs and know enough not to break them; you don't invent them.
Resources
Read what's new to you, skim what's familiar, skip what you already master. Stop when you can meet the learning goals.
Your agent can also generate an overview, a tutorial or an explanation for anything here, tailored to what you already know. Just ask.
Pick one introduction
- ▶️ World's shortest UI/UX design course Show archive.org snapshot — Juxtopposed, 10 minutes
- ▶️ Every UI/UX Concept Explained in Under 10 Minutes Show archive.org snapshot — Kole Jain
- 📄 7 Rules for Creating Gorgeous UI Show archive.org snapshot — part 1 and part 2 Show archive.org snapshot ; the long-form text version of the same ideas
- 📘 Refactoring UI (Steve Schoger, in our library) — the book for developers without design training; the videos "Designing a Complex Form", "Designing a Dashboard" and "Designing Content" are in the library too
Spacing, color, hierarchy
- ▶️ The Easy Way to Pick Perfect Spacing Show archive.org snapshot — Sajid; how to get usable spacing in a UI without design skills
- ▶️ The Easy Way to Pick UI Colors Show archive.org snapshot — Sajid
- ▶️ The Biggest Lie in UI Design Show archive.org snapshot — Sajid; on visual hierarchy
- 📄 Visual design rules you can safely follow every time Show archive.org snapshot
- 📄 Laws of UX Show archive.org snapshot — the psychology behind common design rules, one law per page
- 📄 checklist.design Show archive.org snapshot — checklists per component and page type
- 📄 Designing Beautiful Shadows in CSS Show archive.org snapshot
Typography and web fonts
- 📄 Google Fonts Knowledge Show archive.org snapshot — typeface classification, choosing and pairing typefaces Show archive.org snapshot
- 📄 Understanding Web Fonts and Getting Them Show archive.org snapshot — formats (WOFF2), loading, licensing
- 📘 Practical Typography Show archive.org snapshot — free online book; read "Typography in ten minutes"
Check yourself
- 🎮 Can't Unsee Show archive.org snapshot — a quiz on subtle design differences; did you spot them all?
- 📘 Bootstrapping Design (in our library)
Discuss with your mentor
Discuss what you took away with your mentor.
Look at 2 random websites and discuss their design.
Exercises
Apply at least three of the techniques you learned to MovieDB.
Revision rounds with Claude Design
- Take a screen of your MovieDB and upload its HTML and a screenshot to Claude Design Show archive.org snapshot . Ask it to make the screen cleaner and prettier.
- Do a few revision rounds in Claude Design: react to what it proposes, push it toward the principles from this card (spacing, hierarchy, typography, color).
- Pick the changes you like and implement them in your MovieDB.
Tip
Claude Design can write a hand-off document for Claude Code — or you can ask Claude Code to look at a Claude Design page directly.
Tip
There are various tools that can be used as an inspiration:
- colorhunt.co Show archive.org snapshot can help you define a pleasing color palette.
