Why designers need to learn to code

Learning to code might seem unnecessary for designers, particularly if you're working exclusively in print design. However, if you think you don't need to code, consider the following two things. 

Firstly, you never truly know what you or your studio is going to be working on a year from now. And in an industry increasingly focused on digital, it's never a bad idea to future-proof your skills. 

Secondly, learning to code doesn't mean going all-in and becoming a fully fledged developer and knowing everything there is to know about responsive web design (opens in new tab). Even if you end up grasping only the very basics of code, it will still help you enormously in communicating your visual ideas to the developers who are tasked with implementing them. 

“Learning to code is the most exciting step I've made as a designer, but my original goal wasn't to become a developer," says Jun Taoka, now product designer at London consultancy Red Badger (opens in new tab)."It's about being better able to appreciate the parameters of digital design, and communicate to your peers how your designs will function."

Here's how designers can get started in the world of coding...

Coding for Designers is a free introductory course to HTML and CSS

Coding for Designers (opens in new tab) is a free introductory course to HTML and CSS

01. Go on a coding course

But how do you start learning to code? "I'd recommend doing a short course first: a week intensive or a couple of evenings a week over a period of time," says Sari Griffiths, chief design officer at Red Badger. "It's great to have someone you can ask questions, and fellow students to motivate you. Then make sure you keep it going using online tutorials and courses." 

Taoka favours Treehouse (opens in new tab)and General Assembly (opens in new tab), while his colleague, product designer Clementine Brown, is a fan of Codecademy (opens in new tab); other choices include Pluralsight (opens in new tab) and SuperHi (opens in new tab)

Whichever you opt for, Brown advises: "Stick to HTML (opens in new tab) and CSS (opens in new tab) at the beginning; this will give you a feel for what it's like to bring a flat graphic to life." For the uninitiated, HTML defines the basic structure of a web document, while CSS defines how it's presented, in terms of things like layout, colour and fonts. Complex interactions and animation are usually created in JavaScript (opens in new tab), which is more advanced, although ways are increasingly being developed to do these tasks within CSS too.

02. Experiment with code

Most importantly, don't just take the classes, but start getting your hands dirty by putting what you've learned into practice. Play around with code, build things, try things out: it's the only way you'll really start to get your head around how all this stuff really works. Plus, it's fun.

"As a designer learning code for the first time, one of the most exciting elements is bringing your creations to life in a new medium, accessible by billions instantly," says Craig Frost, product designer at Pusher (opens in new tab), a leader in real-time technologies based in London. 

"I'd advise you to start small: focus on translating your existing knowledge of design practice into code. Begin with layout and spacing, understanding grids on the web and when you need to use them. Then move onto type treatments and colour; the differences in terminology, possibility, and lack thereof." 

Part of Trang Minh Nguyen's side project where she creates daily sketches while learning Processing (p5.js) and posts them on Instagram. See also lead image above

Part of Trang Minh Nguyen's side project where she creates daily sketches while learning Processing (p5.js) and posts them on Instagram (opens in new tab). See also lead image above

03. Inspect other's code

One of the best ways to learn how coding works, he adds, is in analysing and deconstructing the work of others."Use the browser developer tools to inspect design work you admire, and then work backwards to increase your understanding of how a particular design came to be. You can use these tools to directly manipulate the website you're visiting, so start changing colours, spacing, copy; get a feel for how you'd use these same materials to construct something of your own. 

“When you get stuck, use tools like Stack Overflow (opens in new tab) to connect with others and get help with hard problems. And if you're using platforms like Codecademy or Treehouse to learn, make yourself present in their forums to discuss your learnings with other students."

Hanan Shoubaki of Studio 244 started learning to code on Codecademy and SuperHi. She then put what she'd learned into practice with this landing page for cooking tech company Ibex One

Hanan Shoubaki (opens in new tab)of Studio 244 started learning to code on Codecademy and SuperHi. She then put what she'd learned into practice with this landing page for cooking tech company Ibex One

04. Ask a developer

And if your day job involves work with developers, why not connect with them too? "Reach out and ask if they'll pair with you on coding up your next design," suggests Frost. "Communicate about their ideas, skills, and concerns. You'll get a better idea of how you can alter your design practice and process to cater to the web, and it will strengthen your work relationships, too. 

If you're not lucky enough to have this at your company, start looking for meetups and workshops, where you can do the same thing but outside of the office.

"Coding is difficult in the beginning, but it will get better," says Mircea Mocanu, a designer and art director who recently built his first site – his personal website (opens in new tab). "Don't fear language: make analogies with other things you encountered when dealing with large amount of information. Invest, knowing it's going to take some time and it will often be annoying, but ultimately you'll be glad you put the effort in. Exercise your new skills on smaller stake projects," he continues. 

"Take it step-by-step and enjoy little victories. Ask other coders how they do it. If they are busy, ask Google. If you can't find it, ask others again. Don't expect things to progress or work if you don't guide them."

This article was originally published in issue 278 of Computer Arts, the world's best-selling design magazine. Buy issue 278 here (opens in new tab) or subscribe to Computer Arts here (opens in new tab).

Related articles:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Tom May is an award-winning journalist and editor specialising in design, photography and technology. Author of the Amazon #1 bestseller Great TED Talks: Creativity (opens in new tab), published by Pavilion Books, Tom was previously editor of Professional Photography magazine, associate editor at Creative Bloq, and deputy editor at net magazine. Today, he is a regular contributor to Creative Bloq and its sister sites Digital Camera World, T3.com and Tech Radar. He also writes for Creative Boom and works on content marketing projects.