Design for Developers

on YouTube ↗58m

" summary

Practical rules for devs: pick use 1–2 fonts (heading + body), test sizes with TypeScale and Utopia, and keep body at 16px minimum body size; build layouts on a 12‑column grid and design reusable cards via atomic design. Use FontPair and Adobe Color to create main/support/neutral palettes and check contrast with WebAIM. Prefer clear labels/icons over color alone, avoid purely AI stock for hero images, and make destructive modals explicit and high‑contrast.

AI-written summary · about

" chapters (9)

1. 0:00Design for developers
2. 3:16Core design principles
3. 8:33Typography and fonts
4. 17:52Line height and spacing
5. 21:26Color palette creation
6. 32:13Iconography and imagery
7. 37:33Grids and atomic layout
8. 45:48Refining designs
9. 57:24Closing remarks

" related talks

• 01h 02mDesign for DevelopersLex Lofthouse · NDC London 2025
• 38mDesign for DevelopersLex Lofthouse · ffconf 2022
• 14mWhat developers should know about designErwin de Gier · Devoxx US 2017
• 16mWhat Developers should Know about DesignErwin de Gier · Devoxx Belgium 2017
• 54mDesign for Non-Designers from a Non DesignerJay Harris · Build Stuff 2019
• 38mDesign for Non-DesignersTracy Osborn · Beyond Tellerrand Düsseldorf 2018
• 33mDesign hacks for the pragmatic mindedKyle Neath · Ruby on Ales 2011
• 21mHow developers can upgrade their visual design skills for better front end developmentTomasz Jonasz Kujawski · The Rolling Scopes Conference 2018