Should I really bother learning to code?

This talk will look at what you can achieve with a little bit—not a lot!—of code. With a brief look at how code in my design process has challenged my assumptions, improved accessibility, and helped me communicate with engineers. Beyond that, you’ll see how to get real value of out coding skills without ever shipping production code or becoming a unicorn.

Diana MacDonald – Should I really bother learning to code?

Diana is here to help you answer this question for yourself. Also consider the question ‘how much code?’

Diana has been described as one of CultureAmp’s “code-ier designers”, but actually started training as an accountant before that; and also worked as a tech editor. Despite never working as a full time engineer, it has become part of her workflow.

Will be talking about…

  • Roles
  • 3 ways to use code in your workflow
  • Where to go next if code interests you

Some people think that designers who code are unicorns that don’t exist, or that you have to choose one or the other. Neither is true. Yes it’s true that you cannot go as deep on everything as you can on one thing. But it’s also true that you do not work alone. So you should consider the skills of your whole team and how they fit together.

Understanding code is important if you work in areas like AI and machine learning. You have to understand what the capabilities are.

However you work out your own role, coach people on your process. By inviting people into your process, you can show where the edges of your role actually are.

Diana uses the limit that she codes, but she does not ever ship code to production. It is the devs’ job to create code which meets the production requirements, which takes time; while the purpose of prototyping is to be fast, you don’t want to spend lots of time planning a robust coding approach.

Ways to improve your coding…

  • Design in the browser
  • Prototyping
  • Personal projects

Designing in the browser can be as simple as:

document.designMode = 'on'

This works in Chrome dev tools and makes the text in the page editable. You can go a bit further and learn a little CSS to tweak colours. Then take a screenshot into your usual dev tools and continue from there.

Another way to improve coding fluency is prototyping. Diana needed to see if some animations were going to work in the browser, so she tested them with real code. Balance speed and fidelity. Don’t write something in code if you don’t need to in order to test something.

Personal projects are another way to improve fluency. Diana uses Rands Trickle List approach to keep track of intermittent activities. She coded a simple way to show which items she’d done on a given day; then used screenshots to track them over time. Yes she could have done a deeper coding challenge and built a full app; but in the end… just code what you really need and fake the rest!

By just creating a simple set of toggle buttons, Diana learned about aria-pressed; which she was able to then use in a future project. So even a small project has broader value.

So where to start if you want to learn?

Build a passion project. They give you an opportunity to play with things without having to go too deeply into them.

Tweak your own tools – Sketch plugins are written in JavaScript!

  • “Design or code” is a false dichotomy
  • There’s opportunity cost – in teams and AI
  • There’s value in fluency – without coding
  • Design in the browser – with a little code
  • Balance speed and fidelity in prototypes – with as much as you need for realism
  • Code for immediate value and fake everything else

So if you ask yourself “should I learn to code?” also ask “how much code?”, but also think about how code can add to your design process.

@DiDoesDigital | slides, resources and notes |

Talk: “Should I Really Bother Learning to Code?” at Web Directions Design 2018

I spoke at Web Directions Design 2018 at the Arts Centre Pavilion in Melbourne, exploring the perennial question of whether designers should learn to code.It was a fantastic couple of days, and an absolute pleasure to be a part of such a wonderful event. The Web Directions team know how to put on a show, covering everything from the space, food, and swag to a really inclusive and insightful event. For a taste of it, check out the #design18 hashtag and the Web Directions Twitter account.Here are the slides from my talk:

There are heaps of resources to learn more about code in design and design for developers in these projects:

For everything else I referenced in the talk, here are the links.

Everything designers “should” do

Designers are often told about all the things they “should” do (as if design isn’t enough), so it can be hard to know where to focus your efforts and energy. Here’s a sample:

Evolving design roles

The role of the designer is constantly evolving. Some industry leaders share their views in these reports:

Designing in the Browser

To make the text on any site editable, enter document.designMode = "on" into the console of your browser’s developer tools. To design in browser, tweak text as you please and take a screenshot. You can drag that screenshot into your design tool of choice to combine it with your existing design workflow.


CodePen makes it easy to prototype standalone code prototypes that need high fidelity, such as testing smooth animation rendering.

Personal projects: the trickle list

Personal projects are an excellent place to put code to use for yourself. For example, I built a trickle list:

Where to start

To learn the basic of code for web pages, start here:

Where to go next

With a little bit of coding skill, try these:

And, of course, these projects:

If all of this interests you, I suggest subscribing to the design and development topics of the newsletter.