Why All Web Designers Should Learn How to Code
Back in 2010 — which was basically an eternity ago in the age of the internet — a designer named Elliot Jay Stocks launched an all-out war within the design community with one seemingly innocent tweet.
Bam! Shots fired.
Re-igniting one of the most hotly-debated topics within the industry, Stocks sparked several days’ worth of Twitter chains full of comments both “for” and “against” the idea that designers should learn how to code.
And although this comment is almost nine years old at this point, arguments like this have only grown more common in the era of Wix, Squarespace, and popular WordPress site-builders like Divi.
The Debate, in a Nutshell
On the one hand, you have those who argue that designers — instead of focusing on developing an entirely new skill set outside of their core genius — would be better served by continuing to improve their craft.
Architects are not contractors, after all. And modern tools like Webflow now allow designers to easily create full-featured, performant websites … without ever needing to write a single line of code!
Those on the other side of the fence, meanwhile, will tell you that design and development are just two sides of the same coin. The lines between them are blurred, and proficiency at one requires an understanding of the other.
Because the medium of the web is code, whether you like it or not — and expert designers should be expected to know a little something about the medium they are designing for.
The Verdict? Learn to Code. Here’s Why
As is typically the case with heated debates like this, both sides have some important points to make.
But here are my two cents on the issue:
While development knowledge is no longer required for designing (and creating) websites in 2019, it is still absolutely within designers’ best interest to learn how to code.
Even if they never actually develop any of their own websites.
Not on board yet? That’s okay, just hear me out. In the remainder of this blog post, I’m going to cover some of the key benefits for designers who take the time to learn basic front-end web development.
(And to be clear, I’m only talking about front-end development here. That means HTML, CSS, and client-side JavaScript — and maybe a smattering of PHP if you’re a WordPress designer.)
You’ll understand the limitations of the web
A lot of new designers seem to be under the impression that creating for the web is just like designing in Photoshop or Illustrator.
The internet is one giant art board — and all you need to do is drag, drop, and edit a whole bunch of elements until you’ve got a good-looking website that’s ready to go live!
Not exactly.
The problem with this line of thinking is that it fails to account for the inherent constraints, or limitations, of the web as an artistic medium.
This can result in unworkable designs, less-than-functional websites, and a frustrated development team.
UI designer and blogger Kristina Oliva put it well when she said that:
“To me, code is just really another tool for designing things. … It helps me with design as well because I know that I can code this up and this would work, or this wouldn’t work, [or] this would be really bad UX so I’m not going to design it in that way.”
With a clear understanding of what is (and isn’t) technically realistic, designers will be much less likely to waste their time creating assets that aren’t possible, practical, or ideal to replicate on a live website.
You’ll dramatically improve the quality of your designs
Even if designers never actually put their front-end development knowledge to use, an understanding of core development principles will greatly improve the quality of their mock-ups and websites.
There are several underlying frameworks that govern how websites are displayed on the internet — and effective design must take these frameworks into consideration.
For example, the CSS box model is a set of rules that govern how elements on a web page are represented by browsers’ rendering engines. These rules include common CSS properties like margins, borders, padding, and content.
Because every single website conforms to this framework, knowledge of how the box model works will help designers ensure that their designs accurately reflect how their final products will be displayed on the web.
In addition, designers who are currently reliant upon DIY tools like Squarespace and Divi can dramatically extend the capabilities of these tools by learning how to incorporate basic CSS styling into their designs.
You’ll be infinitely more valuable as a designer
Modern site-building tools have dramatically lowered the barriers to entry in the design field — such that anyone with an internet connection and a Wix account can call themselves a web designer and start making money online.
As an entrepreneur, you’ll be much more valuable to potential clients by knowing how to design (and develop) websites without relying on pre-built templates, constraining development tools, or a contracted developer.
And those pursuing more traditional career paths within the design industry might be interested to learn that development experience is in more demand than ever before.
Some of the largest tech companies like Google and Facebook have begun hiring for odd job titles like “UX engineer,” “front-end engineer,” and “UX developer,” signaling an obvious demand for this type of “blended” role.
As Nick Rollins has pointed out, the existing gap between UX design and front-end development is due to a problem of supply and demand. If companies can cover both skill sets with one hire, they’re most likely going to do so.
It’s 2019. There Are Zero Excuses
Many people seem to be under the impression that, in order to learn basic web development skills, they need to shell out tens of thousands of dollars for an in-person bootcamp.
That may have been the case at one time, but it just isn’t true anymore!
One of my favorite resources to recommend for learning web development is Colt Steele’s excellent online course, The Web Developer Bootcamp, which I purchased for just $10 during one of Udemy’s frequent online sales.
The more budget-conscious can find several high-quality tutorials for free on YouTube or freeCodeCamp.org. The latter even includes free access to a global community of fellow developers as well as free certification.
And if you’re a designer reading this and feeling intimidated by the thought of having to learn all of these new skills and languages … you shouldn’t be.
Neither HTML nor CSS is particularly difficult to learn — even for those with no prior experience. Just about anyone can become proficient in both languages given a long weekend and some strong coffee.
So start with these, and then gradually work your way up into basic JavaScript and/or PHP. Fear not: You don’t really need to master either language, unless you plan on making the shift into actual web development.
A fairly general knowledge of both should be more than enough for most designers.
Now what are you waiting for?
It’s never been easier to learn web development than it is today. So fire up your favorite text editor (mine is VSCode), and start coding!
If you’re a small- to medium-sized business owner looking for a designer able to create (and code) a custom, performant solution for your web presence, head on over to bit.ly/asdnewproject to request a free quote for your next design project.
