Web design path: 59 days to beautiful, usable interfaces
Fifty-nine one-hour sessions, in four modules, to learn how to design web interfaces that are both beautiful and usable. No experience required: the first module opens no software at all, it teaches you to look. By the end, you will have designed a complete personal page from brief to polished mockup, critiqued it and improved it.
Web design, in two words
Interface design is not decoration: it is the craft of making a service understandable and pleasant to use. A well-designed page guides the eye to what matters, reads without effort, works from the keyboard, and stays legible in sunlight and in dark mode. These qualities are not a gift: they rest on a small set of rules — typography, color, spacing, hierarchy, contrast — that this path teaches one at a time, with examples taken from real sites.
The method, the same every day
| Time | Phase | What you do |
|---|---|---|
| 20 min | Theory | The session's lesson (on the module's page), notes in the notebook. |
| 30 min | Practice | Analyze a real site, or draw in Penpot: one exercise, one explicit success criterion. |
| 10 min | Recap | Three lines in the notebook, then redo the day's exercise without notes. |
The recap is the phase everyone skips, and it is the one that makes things stick: redoing from memory forces you to retrieve the information, and that retrieval is what anchors it. In design, it is also what turns a rule you read into a reflex.
The tools, all free (install on day 1)
- Penpot, the free and open-source design tool: it runs in the browser, and a free account on design.penpot.app covers the whole path. (Figma has a free tier, but Penpot is open source and enough for everything we will do.)
- Your browser's developer tools (F12): inspect the sizes, colors and contrasts of any site, plus device mode to simulate a phone.
- The WebAIM contrast checker, free online, to measure a contrast ratio.
- Google Fonts, a catalogue of libre fonts (Inter, Merriweather, Source Sans…).
- A digital notebook: Obsidian, or a plain folder of text files, one file per day.
No paid software, no subscription. A reasonably calibrated screen is enough; no tablet needed.
The golden rule
One hour every day beats seven hours on Sunday. If you miss a day, you do not catch up the next day: you shift everything by one day, and you trim module 4. Sessions are numbered Day 1 to Day 59, with no calendar dates: only the order and the regularity matter.
Learning with an AI, without letting it draw for you
This path is meant to be followed with an AI as a tutor, ideally a model running on your own machine (see your first local model): your screenshots and mockups never leave your computer. It saves you time when it makes you work, and wastes your time when it works in your place.
- Ask it to critique your palette, to quiz you on the day's rules, to proofread your copy. Not to draw the screen for you: the day you present your project, your eye will do the talking.
- Never copy a value it gives you without checking it. A model can confidently announce a wrong contrast ratio: the math is redone in the WebAIM checker, not in its head.
- Paste no personal data into it, and no screenshot containing private information.
Every session ends with an "Agent tip" box: two to four lines on what an LLM agent (Claude Code, Kimi Code, OpenFox) can do for that task once you have done it by hand — the prompt to give, the trap to avoid, and the proof to demand. You learn by hand, and along the way you learn to delegate without being fooled.
The four modules
Each module is one page: sessions follow one another, each with its goal, its lesson, its step-by-step practice and its recap. Tick a module when all its sessions are done; your progress stays in your browser.
- See like a designer (days 1–14): typography, color, spacing, hierarchy, grids — by analyzing one real site a day.
- The tools and the rules (days 15–28): Penpot hands-on, wireframes, components, and WCAG accessibility in plain language.
- Responsive and systems (days 29–42): mobile-first, dark mode, design tokens, design systems, micro-interactions and prototyping.
- The project (days 43–59): a complete personal page, from brief to polished mockup, critiqued and iterated.
Recommended free resources
- The official Penpot user guide (modules 2 and 3)
- The W3C's filterable WCAG 2.2 quick reference (modules 2 and 3; the standard, not a summary)
- Laws of UX, the core psychology principles of design, one page each
- The A11Y Project checklist (modules 2 and 4)
- MDN's CSS reference, to understand what your choices become in the browser
- Two public design systems to browse like open books: the French government's design system (DSFR) and the GOV.UK Design System
The end-of-path checklist
- I can name what is wrong on a page: hierarchy, contrast, spacing, alignment.
- I can build a 60-30-10 palette and check its contrasts against AA.
- I can compose a type scale and I know what a comfortable line length is.
- I can draw in Penpot: components, variants, grid, clickable prototype.
- I can adapt a screen to mobile, desktop and dark mode.
- I can name my colors and spacings as design tokens.
- I can walk through an interface from the keyboard and check the visible focus.
- I have a complete project to show, with the iterations that improved it.
A box you cannot tick is not a failure: it is the list of what you will rework first, notebook open.
- 1Web design module 1: see like a designerDays 1 to 14: typography, color, spacing, visual hierarchy and grids, learned by analyzing one real site a day, one hour a day.
- 2Web design module 2: the tools and the rulesDays 15 to 28: Penpot hands-on, wireframes, grids and components, then WCAG accessibility, plain language, forms and navigation.
- 3Web design module 3: responsive, tokens and systemsDays 29 to 42: relative units and mobile-first, dark mode, design tokens, design systems, micro-interactions, and prototyping a small app screen by screen.
- 4Web design module 4: the project — a complete personal pageDays 43 to 59: design a personal page end to end — brief, benchmark, content, wireframes, art direction, mockups, audit, prototype, critique, iteration.