Should you code as a designer?

Profile picture of Michael J. Fordham

{date}

{#hash1}

{#hash2}

Illustrations by {name}

An exploration into this age-old discussion poses the question: what is the opportunity cost of learning to code as a designer?

6 min read

3D element with code snippets by Amit Asulin

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

Symbiosis.


Where two organisms interact with one another, and both benefit equally.


Symbiosis is a part of life, and it has been crucial to the success of many creatures (not just humans) for many years.


For example, let’s talk about the oxpecker and the zebra.


In the wild, the oxpecker (a bird) will reside on a zebra’s back, and it will eat ticks off their body. The oxpecker gets a meal and the zebra loses the parasites.


That’s a symbiotic relationship. When both individuals are benefiting from each other’s interactions.


Now, what does this have to do with learning to code or design? Good question, and we’ll get to that.


All too often I see people discussing/arguing about how designers should learn to code and developers should learn design theory. I’m not on either side of the argument, but I’d like to highlight the benefits and drawbacks of each option. Essentially I want to highlight the opportunity cost of learning to code as a designer.



Benefits of learning to code


Coding is a world of its own. I have been coding (at a professional standard) for a few years now, but I started my journey around seven or eight years ago. I now focus on front-end web development, but I have worked on projects involving databases and backend functionality too.


What this has given me is an oversight of the level of effort and difficulty of implementing certain design decisions.



Timelines


For example, if - as a designer - I wanted to suggest we develop an advanced piece of map input which lets the user drag around a pin, pops up nearby cafés on the map, and allows a user to drag some cafés into their favourites, I would know this is a complex piece of functionality and would take at least a few weeks to get right.


Therefore, if I knew the project was on a tighter schedule, and we only had a week, maybe I would consider suggesting a simpler input, and mentioning the map functionality for a future development sprint.


Having this understanding for difficulty and timescales helps avoid conflicts with developers who may be overwhelmed by what is being asked for in a tight timeline.


In addition, if I suggest something I know should take relatively little effort and it gets pushed back, I have enough understanding of the work involved that I could question the decision. Maybe the suggestion was not properly understood, or got lost in translation.


Learning to code - even if it’s mainly the basics, can help you (and your colleagues) communicate better via a shared language.


Feasible solutions


An integral part of any design process is understanding constraints and working out how to get around them. However, with no knowledge of code you will be unaware of the different constraints each platform you are designing for will have. This could seriously impact your design process, and most likely slow it down.


For example, if you were designing a number of email templates for a company, you might be tempted to include a beautiful, complex layout and some nice interactivity.


However, if you know how difficult it is to create email templates from scratch (seriously, why is it still this hard?), you might choose to go for a simpler layout. Without the knowledge of this constraint, you’d likely design a beautiful email template, only to be knocked back by the person developing it and have to start over again. This wastes a lot of time for both you and the developer.



A developer at work


Solving common problems


As a designer, you’ll likely be focusing your learning on the front-end, as it’s a lateral move into the development world from design.


Understanding the front-end code - which styles the application or website - allows you to solve common issues that may arise.


For example, imagine you are working with a full-stack developer who prefers working on the back-end functionality more than perfecting the front-end. This may lead to a few inaccuracies between your designs and the final product.


Let’s say one of the inaccuracies is that the spacing between different sections is too little. With knowledge of HTML and CSS, you would probably be able to spot a problem in the code for padding or margin, and suggest a fix to the developer (or if you have access, fix it yourself).


This knowledge would enable you to quickly pinpoint a