Code for Designers
The web designer’s medium is the web. Their canvas is the browser and their paintbrush is code.
Here you’ll find a bit of a guide and some resources helpful to designing digital products using code.
This is intended for designers (or anyone who wants to use code in design) rather than software engineers. For engineers that want to learn more about design, you might want to see Design for Engineers.
This is a living project. Check back for updates.
Careers for designers that code
- Front-end Design
- Design Ops
- Design Engineering
- Prototyper
- UI Engineer
- UX Engineer
- UX Engineer for design systems
- Information Designer, visualisation designer, data viz engineer
- Becoming A Designer Who Codes: Nick Fredman
- How to become a “Designer Who Codes” by Meagan Fisher
- Being a designer-developer hybrid in 2019 by Anastasia Kas
Introducing code
If you’ve never touched code before, start here.
The fundamentals of web development
- Don’t fear the Internet by Jessica Hische & Russ Maschmeyer (videos)
- Intro to JS: Drawing & Animation and Intro to HTML/CSS: Making webpages by Khan Academy (free video courses)
- Learn web development: Mozilla Developer Network
Typography on the web
Web typography is one of the most useful areas for web designers to learn.
- Fundamental text and font styling by Mozilla Developer Network web docs
- The Elements of Typographic Style Applied to the Web by Richard Rutter
- On web typography by Jason Santa Maria (book)
- Practical Typography
- Typography Handbook—“A concise, referential guide on best web typographic practices.”
- Typekit Practice—longer, interactive lessons to learn typography and type-related CSS.
- Type detail: resources
Design workflows using code
Design in the browser
Prototype with code
- Hi-fi prototyping by Heather Daggett
- Considering prototypes by Andrew Maier
- Next-level Prototyping for Web Design by Ling Zhou
Code for design decisions
Animation
Interaction
Typography
Personal projects
Passion projects
Build your workflow and tools
- How to create a Sketch plugin by Sagi Shrieber
- Alfred workflows for the exceptionally lazy designer or dev by Sagi Shrieber
- Customize the [Mac] menu bar with BitBar by Richard Guay
- Übersicht for Mac desktop widgets
Computational design
- Processing: Ben Fry, Casey Reas, Dan Shiffman, and others
- P5.js: Lauren McCarthy
- D3.js
- Observable: Mike Bostock and others
Resources for designers that code
- BassCSS—a fast, tiny CSS framework for modular, type-centric websites.
Community
How much code is useful to learn?
- Talk: “Should I Really Bother Learning to Code?” at Web Directions Design 2018
- State of Product Design in 2017 by Caley Ostrander
- To code or not to code? OMG! This is totally the wrong question. by Dave Malouf
- Should Designers Code? by Alan Cooper
- Why The Valley Wants Designers That Can Code by Jared Spool
- 6 reasons why designers should know more about coding by Eder Rengifo