14. Design & UX
The human side of building. How to make things that are actually pleasant and accessible to use — not just technically functional. Covers the principles that apply whether you’re hand-coding CSS or using Tailwind/shadcn.
Entries
| # | Entry | Status | One-line description |
|---|---|---|---|
| 1 | UX principles — the short list | 🟩 COMPLETE | Hick’s law, Fitts’s law, recognition over recall — the laws you actually use |
| 2 | Mobile-first thinking | 🟩 COMPLETE | Why you design for the small screen first, then scale up |
| 3 | Accessibility (a11y) — design view | 🟩 COMPLETE | Color contrast, focus rings, keyboard nav, screen readers |
| 4 | Color theory for devs | 🟩 COMPLETE | HSL vs HEX, color systems, palettes that don’t hurt eyes |
| 5 | Typography basics | 🟩 COMPLETE | Type scales, line height, font pairing — getting text to read well |
| 6 | Dark mode design | 🟩 COMPLETE | The right way to do dark mode — it’s not just inverting colors |
Suggested reading order
2 → 1 → 3 → 5 → 4 → 6. Mobile-first and accessibility are the two highest-leverage habits.
AI design tool vendor entries (Phase H)
| # | Entry | Status | One-line |
|---|---|---|---|
| 7 | 🇦🇺🇺🇸 Canva | 🟩 🟦 | Design for everyone; Magic Generate AI; Australian-founded |
| 8 | 🇺🇸 Adobe Firefly | 🟩 🟦 | Commercially safe AI image gen; licensed training data |
| 9 | 🇺🇸 Adobe Creative Cloud | 🟩 🟦 | Full Adobe suite with AI across every app |
| 10 | 🇺🇸 Adobe Photoshop AI | 🟩 🟦 | Generative Fill; Generative Expand; object removal |
| 11 | 🇺🇸 Adobe Premiere AI | 🟩 🟦 | AI video editing; captions; audio enhance |
| 12 | 🇺🇸 Adobe Acrobat AI | 🟩 🟦 | AI PDF assistant; chat with documents |
| 13 | 🇺🇸 Adobe Express | 🟩 🟦 | Quick design with AI; the lighter CC entry point |
| 14 | 🇺🇸 Figma | 🟩 🟦 | Industry-standard UI design; Figma AI features |
| 15 | 🇺🇸 Microsoft Designer | 🟩 🟦 | AI-first design tool from Microsoft; free with M365 |
| 16 | 🇳🇱 Framer | 🟩 🟦 | AI website builder; design + publish in one; Dutch-origin |
| 17 | 🇺🇸 Gamma | 🟩 🟦 | Fastest AI presentation generator; web-native sharing |
| 18 | 🇺🇸 Tome | 🟩 🟦 | Narrative AI presentations; editorial/magazine style |
| 19 | 🇺🇸 Beautiful.ai | 🟩 🟦 | Smart auto-layout slides; most polished templates |
| 20 | 🇦🇺 DaVinci Resolve | 🟩 🟦 | Australian professional video editor with Neural Engine AI |
| 21 | 🇳🇱 Penpot | 🟩 🟦 | Open-source Figma alternative; self-hostable; EU |
| 22 | 🇳🇱 Sketch | 🟩 🟦 | Mac-native UI design tool; established teams |
| 23 | 🌐 Inkscape | 🟩 🟦 | Free open-source vector editor; Illustrator alternative |
| 24 | 🌐 GIMP | 🟩 🟦 | Free open-source photo editor; Photoshop alternative |
| 25 | 🌐 Krita | 🟩 🟦 | Free open-source digital painting; AI Stable Diffusion plugin |
| 26 | 🇱🇹🇺🇸 Pixelmator Pro | 🟩 🟦 | Mac image editor with best on-device AI; acquired by Apple |
See also
- 02. Frontend — Tailwind
- 02. Frontend — Responsive design
- 02. Frontend — Dark mode (technical)
- 10. AI & LLMs — AI image and video generation concepts