Learning design: resources for non-designers

Every now and then, a programmer, product manager, or marketing person will ask me how they can “learn design”.

It’s understandable that they think I can help. The problem is, I learned the principles of visual design through osmosis, growing up in a household with two graphic designers as parents. I learned front-end web development through a decade of experimentation, back when “web 2.0” was just becoming a thing. And I learned user research and UX design on the job, first at ScraperWiki, then at mySociety.

But I appreciate “spend 20 years doing it” isn’t a very useful answer to people asking me how they learn. So here’s a list of resources that might actually help. Some of them I’ve used myself, but most are just resources I’ve seen recommended by people I trust. YMMV!

This list is by no means exhaustive. I’ll try to keep it up to date with new resources as I discover them. If you know of something that helped you learn design, and you think I should add it to this page, drop me a line on Twitter.

All-round guides

• Hack Design – a free, 50-lesson, self-paced course for “hackers” learning design, that touches on everything from visual design principles, to UX research, UI design, and some basic front-end skills.
• Ben Brignell’s archive of third party Design Principles – the guides that other organisations use to guide their product decisions, covering ethics, accessibility, performance, user research, and everything in between.

Visual design

• Design for Hackers, by David Kadavy and The Non-Designers Design Book, by Robin Williams – both books explain fundamental design principles like contrast, repetition, alignment, and proximity. I’ve heard particularly good feedback about the Kadavy one.
• One of many articles about Gestalt Principles – see for example, this Smashing Magazine summary from 2014.
• Designing for the Web, by Mark Boulton

Usability

There are a few foundational texts here, that are well worth your time, if you don’t mind a more theoretical introduction to the way designers think:

• The Design of Everyday Things, by Don Norman – the origin of the term “affordance” in design. My awesome colleague Gareth Rees summarised the book here.
• The Inmates Are Running the Asylum, by Alan Cooper – the origin of “personas” in design.
• Designing for People, by Henry Dreyfuss – the godfather of industrial design.
• Don’t Make Me Think, by Steve Krug

There’s a small cottage industry in Tumblr-like microblogs poking fun at poorly designed experiences online. These are two I follow in my RSS reader:

• Grumpy Website, by Niki Tonsky
• Annoying Technology, by Manuel Grabowski and Philipp Defner

Modern web technologies

Things move fast here, so it’s hard to recommend specific resources!

• MDN CSS guide – a bit dry, but a great intro to modern front-end web development.
• Layout Land YouTube channel, from Jen Simmons – be aware this was released just as modern CSS features like Flex and Grid were becoming standardised, so some advice might already be out of date.
• The Google Chrome Developers YouTube channel – be aware that some things they talk about aren’t standards/cross-browser compliant.
• Google’s web.dev “Designing in the Browser” YouTube series

Performance

• MDN Web Performance reference
• Google’s web.dev guides to performance – just bear in mind that Google has a vested interest to push its own Chrome/Pagerank concept of performance here, and some of their ‘best practices’, such as AMP, are more about consolidating Google’s monopoly than actually serving users.

Accessibility

• MDN introduction to Accessibility
• Inclusive Components, by Heydon Pickering – about a dozen examples of the considerations that go into an accessible web component. Really fascinating.
• Cards for Humanity – nothing to do with that obnoxious American card game. This is a great tool for testing out your solutions against randomly selected personas.
• GDS’s inclusive design posters