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 Technologist
- Prototyper
- UI Engineer
- UX Engineer
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 by Tracy Osborn (YouTube)
- Visual Design Articles (collection)
- The Principles of Beautiful Web Design, 3rd Edition (book)
- Learn UI Design (pricey online course)
Typography on the web
- 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
- Making Your Design Optically Perfect by Rafal Tomal
- The PLAY button is not optical alignment by Yuki Gu
- Intro to The 8-Point Grid System by Elliot Dahl
Contrast
Color on the web
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
Research
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
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)
Practice design
- Method of Action design games
- Better Web Type: Font memory game
- Better Web Type: The Equilateral Triangle of a Perfect Paragraph game
Practical design tips
- Collection of UI details from Steve Schoger
- Less is more
- Add whitespace
- Align everything with something
- Iterate