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 . 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 ."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

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 and General Assembly , while his colleague, product designer Clementine Brown, is a fan of Codecademy ; other choices include Pluralsight and SuperHi . 

Whichever you opt for, Brown advises: "Stick toHTML andCSS 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 inJavaScript, 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 , 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

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 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

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 . "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 or subscribe to Computer Arts here .

Related articles: