How to Make Your Website Not Ugly
summary
Claim: visual design drives first impressions — 46% visual-design importance versus 8% for functionality — and people read only 20% of text, so layout choices matter. Recommendations include concrete metrics: line length ~60–100 chars, line-height ~1.4, ~15px padding, default text ≥16px, check color with WebAIM contrast checker. Icons need labels (generic icons ~60% correct, labeled ~80%), avoid stock images, use consistent patterns, test icon meanings with coworkers, and place key content above the fold (F‑shape view, ~156% more views).
AI-written summary · about
chapters (37)
- 0:00Intro
- 0:15About Hilary
- 1:20Real Website
- 2:00The Point
- 2:12Why We Care
- 3:19Ill Buy It
- 4:05A lot to cover
- 4:21Words and images
- 4:37Design from a lot
- 4:52Text length
- 6:10Text width
- 6:45Contrast
- 8:06Text Scannable
- 8:54Text Block
- 9:38Fonts
- 10:37Navigation
- 11:15A Better Example
- 11:45Recap
- 12:01Images
- 12:12Icons
- 13:28Labels
- 13:52Universal Icons
- 14:36Banner Blindness
- 16:54Links Cars
- 17:38Links Content
- 18:34Patterns
- 20:03Bar
- 20:36Pattern
- 20:58Progressive Disclosure
- 21:29F shape
- 22:13Above the fold
- 23:27New York Times example
- 24:11Consistency
- 25:37Functionality
- 26:37Visual Design
- 27:07Final Recap
- 27:32Logical Design
related talks
48mHow to Make Your Website Not Ugly: Basic UX for Programmers
37mHow to Make Your Website Not Ugly: Basic UX for Programmers
37mDesign for Non-Designers
23mNot a designer? You can make your website more accessible
16mWhat Developers should Know about Design
01h 02mDesign for Developers
58mDesign for Developers
14mWhat developers should know about design