Design for Engineers
What’s the point of building something no one wants? Instead, you can use design to solve problems, communicate, and delight people.
Here you’ll find a bit of a guide and some resources helpful to learning digital design.
This is intended for software engineers (or anyone already building products who wants to learn design) rather than designers. For designers that want to learn more about code, you might want to see Code for Designers.
This is a living project. Check back for updates.
Careers for engineers that design
- Signs You May Be A Designer, Not Just A Coder
- Front-end Design
- Design Ops
- Design Engineering
- Design Engineers
- Design Technologist
- Prototyper
- UI Engineer
- UX Engineer
- UX Engineer for design systems
Introducing design
If you’ve never designed anything before, start here.
The fundamentals of web design
- Web design in 4 minutes
- 7 Rules for Creating Gorgeous UI (Part 1) by Erik D. Kennedy
- Design for Programmers by Ria N. Carmin
- Design for Non-Designers: Part 3 by Tracy Osborn and Design for Non-Designers YouTube video
- Visual Design Articles (collection)
- Learn UI Design blog
- Learn UI Design course (pricey online course)
- The Principles of Beautiful Web Design, 3rd Edition (book)
- Design fundamentals every creative should know by Michelle Chiu
Typography
- A Five-Minute Guide to Better Typography
- Better Web Type
- Type Terms
- Practical Typography
- Typography Handbook—“A concise, referential guide on best web typographic practices.”
- The Elements of Typographic Style Applied to the Web by Richard Rutter
- On web typography by Jason Santa Maria (book)
- Typekit Practice—longer, interactive lessons to learn typography and type-related CSS.
- Fonts in use—helps you understand cultural connotations of fonts.
- Type detail: resources
Alignment
- Optical Effects in User Interfaces: An Illustrated Guide by Slava Shestopalov
- Intro to The 8-Point Grid System by Elliot Dahl
- Making Your Design Optically Perfect by Rafal Tomal
- The PLAY button is not optical alignment by Yuki Gu
- 3 Pro Tips on Alignment by Erik D. Kennedy
- The 3 Laws of Locality by Erik D. Kennedy
Color
- Color in UI Design: A (Practical) Framework by Erik D. Kennedy
- A Nerd’s Guide to Color on the Web by Sarah Drasner
- Color Theory and Contrast Ratios by Christopher Schmitt
- The HSB Color System: A Practitioner’s Primer by Erik D. Kennedy
- Picking Colors for Your Data Visualizations by Erik D. Kennedy
- Web gradients
Contrast
Illustrations
User experience (UX)
For an overview of some of the pieces that make up user experience design, start here:
- UX Qualities: Learnable, Efficient, Forgiving, and Satisfying interfaces
- Interaction Design Patterns
- Content Strategy
- UX Design Research
- User Interface Design Patterns
- Universal Design
- Information Architecture
- Product Thinking
- Beginner’s Guide to Web Analytics
- Lean UX
- UX Case Studies by UX Collective
Design patterns
Product design
- A Comprehensive Guide To Product Design by Nick Babich
- Principles of Product Design by Aarron Walter
- Growth.design: The Psychology of Design
Research
- A Beginner’s Guide to Getting Started in UX Research by Lade Tawak
- Just Enough Research by Erika Hall (book)
Inclusive, universal, accessible design
- Accessibility For Everyone by Laura Kalbag (book)
- Inclusive Design Patterns by Heydon Pickering (book)
User testing
- Five Second Test by Christine Perfetti
- Heuristic evaluation By Euphemia Wong—expert reviews
- Fast Path to a Great UX – Increased Exposure Hours by Jared M. Spool—spend two hours every six weeks with users
- Why You Only Need to Test with 5 Users by Jakob Nielsen—run 3 user tests with 5 participants each
Performance
Product management
Animation
- Designing Interface Animation: Meaningful Motion for User Experience by Val Head (book)
- Creating Usability with Motion: The UX in Motion Manifesto by Issara Willenskomer
Content
Copy writing and microcopy
- Overview of why microcopy matters: The $300 Million Button
- How to write link text: Writing Hyperlinks: Salient, Descriptive, Start with Keyword by Nielsen Norman Group
- Mystery meat navigation on Wikipedia
- How to label navigation elements and menus Menu Design: by Nielsen Norman Group
- “Your” vs “My”: Write Better User Interfaces by Asking “Who Else is in the Room?” by Diana MacDonald (TL;DR: use “your” unless it’s a button.)
- Form labels
- Principles of writing: Strunk & White: The Elements of Style (free book)
Design systems
Intro to design systems
- Everything you need to know about Design Systems by Audrey Hacq
- Design Systems Handbook by Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield
- Design Systems: A Figma publication for design systems creators, designers, developers, and managers
- Atomic Design by Brad Frost
- A comprehensive guide to design systems by Will Fanguy
- Practical UI Patterns for Design Systems: Fast-Track Interaction Design for a Seamless User Experience (my book)
- Design Systems by Alla Kholmatova (book)
- Building Design Systems: Unify User Experiences through a Shared Design Language by Sarrah Vesselov and Taurie Davis (book)
Design tokens
- Design tokens for dummies by Louis Chenais
- Tokens in Design Systems by Nathan Curtis
- What Are Design Tokens? by Robin Rendle
- Design tokens with Figma by Pavel Laptev
Growing design systems
- Releasing Design Systems by Nathan Curtis
- Size in Design Systems by Nathan Curtis
- Component Examples by Nathan Curtis
- Defining Principles to Drive Design Decisions by JD Vogt
- Measuring design systems by Cristiano Rastelli
- Teamwork makes the design work: Why your design system needs content strategy by Andrea Burton
- Content: atomic design’s forgotten neutron by Rachel McConnell
- Why your design system should include content by Rachel McConnell
Practice design
- Method of Action design games
- Better Web Type: Font memory game
- Better Web Type: The Equilateral Triangle of a Perfect Paragraph game
- Can’t Unsee
- 5 Practical Exercises to Learn UI Design by Erik D. Kennedy
- Copywork: The Ultimate Way to Rapidly Improve Your Design Skills by Erik D. Kennedy
Practical design tips
- How to develop an eye for Design by Kathleen Warner
- Insanely fast redesign exercises by Michal Malewicz
- Collection of UI details from Steve Schoger
- Less is more
- Add whitespace
- Align everything with something
- Iterate
Turn up the volume on design
- UX Design weekly newsletter
- UI Animation newsletter
- InVision blog
- Nadieh Bremer on Twitter
- Shirley Wu on Twitter
- Sarah Drasner on Twitter
- Val Head on Twitter
- Tracy Osborn on Medium