The Basics of Design
summary
Shows concrete, testable CSS rules for improving a webpage’s visual hierarchy: remove unnecessary borders, increase button padding and contrast, unify type families, use rem/em for spacing, and add a separator line. Demonstrates these edits live and connects them to Gestalt laws (proximity and similarity), plus a small JavaScript animation to illustrate directional grouping.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 1:47Design vs functional art
- 3:37Designers' role and mockups
- 5:02Four design qualities
- 10:55Gestalt theory and perception
- 15:14Proximity and similarity
- 21:36Common fate and connectedness
- 28:16Parallelism and common region
- 33:52Web page design improvements
- 47:49Conclusion
related talks
38mDesign for Developers
01h 02mDesign for Developers
29mElements of Design: A Developer's Primer
36mLearn Enough Design to Be Dangerous
23mNot a designer? You can make your website more accessible
54mDesign for Non-Designers from a Non Designer
44mNormalising designs for better quality CSS
35mDebugging Design: 5 simple design principles to make your UI "not look terrible".