Should designers learn to code?

Web designers may find surprising benefits in learning a little (front-end) code, but unless they work for small firms it is unlikely they’ll have to write any production-ready software.

If you do a Google search for ‘should designers learn to code’ there are about 21,300,000 results. Competition is heating up for jobs worldwide as technology, the patchy nature of the post Great Recession recovery, and globalisation change the nature of the world of work, increasing the tendency of workers to upskill so they can stay ahead of the game. Many companies are also on the hunt for the elusive ‘unicorn’ who can do it all. It’s a very contentious topic. But, it left us wondering: should (web) designers actually learn to code?

The Role You Want

Whether you should learn to code depends on the type of role you want. At start-ups and small companies, it’s very likely you need to learn to create production level code. At agencies and larger corporations, it’s more about understanding what’s cutting-edge, and having the ability to prototype (the front-end) in code. It’s especially relevant to would-be interaction designers.

Transliteration

A designer ready for the web can jump easily from graphical tools to their equivalent in CSS and JavaScript. Below are just a few examples:

• InDesign paragraph styles = CSS selectors
• Photoshop layer effects = CSS shadows
• Sketch 3 can export browser friendly XML
• AJAX can update information on a page without refreshing the entire page
• And so on…

This doesn’t mean the designer personally does or can do all of this in Jade or CSS or SASS or Foundation or Bootstrap or jQuery or AJAX or JavaScript, but that they have read enough documentation or tutorials to know what is possible.

Prototyping

Web designers, UI/UX designers, Interaction Designers, and others are those who design for the web, their appearance, and interaction. Animation and interaction are now the norm. Web designers will already have an understanding of interaction design, and understand that, for example, elements will look different on varying screen sizes and hover states. An ability to develop front-end prototypes, or create Twitter Bootstrap-type style guides will make it easier to explain to developers what is required…and it also provides far better feedback on application behaviour. An ability to create bug reports that your developers will be able to understand automatically doesn’t hurt either.

Empathy

Good designers design to user mental models and also to business requirements. They keep in mind how to maximise conversion rates, create consistent branding, develop style guides, and much more. They don’t need business analyst or developer skills, but they do need to understand programming capabilities and limitations, the goals of the business, and the needs of the user.

Similarly, successful developers develop to the implementation model, and also to business requirements, like creating meta-data for search crawlers to read, performance optimisation to decrease loading times, and so on. What developers and designers both need to have is empathy and respect for each other’s respective roles.

Constraining Yourself

What’s a pitfall for designers who code? It can be way too easy to only design to what you yourself can code, rather than relying on the (typically greater) capabilities of your front-end web developers. Your company’s devs are likely to know more, purely because it’s their main focus, rather than an extra skillset added to enhance their work. As Designer and Software Engineer at Intuit, Mike Rundle, once said, “You have to be careful not to let that [front-end dev] knowledge constrain your design.”

Influence

Learning to code does give designers more power. Knowing what is possible arms the designer against a developer’s rebuttal of “that’s not possible” or “that’s not easy”. It is fun to be able to say, “Yes it is possible, and this is how to execute it”. With back-end developers who prefer developing the logic, and would rather not think about the design elements, it may even gain some designers favour. Of course, we advocate full appreciation of the full stack, but you can’t ignore that it’s a common attitude.

Where would you start?

Chrome & Firefox development tools can show you part of what is happening behind the curtain. Coder Factory Academy also has a Web Design Front End Development course. If you really want to dig deep into code, and you never know, it could come in handy, consider taking a full-stack course. Antetype and Macaw create high fidelity responsive prototypes. If you’re not using Sketch, why? You can also prototype with UXPin and CodePen. Creating a style guide? You can’t go past Frontify.

In conclusion, as Danilo Campos, an iOS Designer/Developer at Hipmunk once wrote, “A designer can be more successful by understanding the technological constraints behind whatever medium he or she designs for. An understanding of how certain approaches are ‘cheap’ either in terms of development time or in terms of computational practicality can ensure that a design makes it out of a mock-up and into some shipping software.”

See the Pen Beaulti Circle Load CSS3 by Elias (@Roosa) on CodePen.

Coder Factory Academy: Meet Australia’s first and only accredited fast-track coding bootcamp! Our immersive course helps students acquire in-demand skills through hands-on, project-based training by industry experts over 23 weeks. Become an employable full-stack developer in only six months.

Now enrolling domestic & international students in Sydney & Melbourne! Study now, pay later!

Coder Factory now offers digital leadership and technology workshops for employees of companies seeking tech, innovation, and digital literacy. The training sessions function as mini-hackathons, where employees work to use technology in solving real problems within their company.

Learn more about our corporate training workshops.

Are you a woman interested in coding? Check out our Women in Tech Scholarship!