Design fundamentals
Budget: weekends, parallel to everything.
Why this matters
Your product is a spatial data visualization with a chat sidebar. Design quality is most of what users will feel. You do not need to become a designer. You need enough taste and vocabulary to recognize when something is wrong and fix it.
What to learn
| Topic | Time |
|---|---|
| Visual hierarchy, spacing, and color (most "looks off" bugs are these three) | 1 weekend |
| Typography: font choice, weight scale, line-height, line length | 1 afternoon |
| Cartographic principles: color vs size vs shape, avoiding chartjunk | 1 weekend |
| The CRAP acronym: contrast, repetition, alignment, proximity | 2 hours |
| Refactoring UI (Wathan and Schoger), cover to cover | 1 weekend |
| Practical Typography (Butterick), online | 1 afternoon, reread yearly |
| The Visual Display of Quantitative Information (Tufte) | 1-2 weekends |
| The Design of Everyday Things (Norman) | 2-3 weekends |
Apply it: one-hour design pass on MapSettingsPanel.jsx and RouteDetail.jsx | 2 hours |
Resources
- Refactoring UI by Adam Wathan and Steve Schoger. Written for developers, not designers. Most tactical book on the list.
- The Visual Display of Quantitative Information by Edward Tufte. Spatial data is Tufte's home turf.
- Practical Typography by Matthew Butterick. Free online. Read once a year.
- The Design of Everyday Things by Don Norman. Not about web design, but about how humans form mental models of systems. Everything else on this list is downstream of it.
- shadcn/ui: accessible primitives you own and can modify, paired with Tailwind.
- Tailwind CSS docs: the layout and spacing sections are where the design work actually happens.
Exercise
Read Refactoring UI cover to cover in one weekend. Then do a one-hour
pass on MapSettingsPanel.jsx and RouteDetail.jsx applying what you
learned. Fix spacing, align controls on a grid, reduce the number of
distinct shades of gray, and pick one font weight scale and stick to it.
Do not refactor the logic. Only touch styles. Commit before and after so
you can see the delta.