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…
- 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
- 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.
- “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.
Talk: “Should I Really Bother Learning to Code?” at Web Directions Design 2018
Links and resources
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:
- 6 Reasons Why Graphic Designers Should Learn UX Design by Adobe Creative Cloud
- Why UX Designers should embrace data by Stephanie van Baaijen
- Why UX Designers Should Influence Customer Experience by Chris Avore
- 10 Reasons Why All Designers Should Start Writing More by Alana Brajdic
- Why Designers Should Invest Time in Their Social Presence by Dennis Covent
- Designers shouldn’t code. They should study business. by Joshua Taylor
- Why Designers Should Code by Ryan O’Neill
Evolving design roles
The role of the designer is constantly evolving. Some industry leaders share their views in these reports:
- Design in Tech 2018 report by John Maeda
- Design in Tech 2017 report by John Maeda (video)
- InVision’s 2016 Product Design Report
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:
- Don’t fear the Internet by Jessica Hische & Russ Maschmeyer
- The Elements of Typographic Style Applied to the Web by Richard Rutter
- Designing in the browser by Kayce Basques, Google
Where to go next
With a little bit of coding skill, try these:
- Next-level Prototyping for Web Design by Ling Zhou
- Passion Projects (Procrastiworking) by Jessica Hische
- Sketch plugins by Sagi Shrieber
And, of course, these projects:
If all of this interests you, I suggest subscribing to the design and development topics of the newsletter.