This might come as a surprise to the artistic types out there, but it’s true: graphic designers should learn to code in order to be competitive in today’s job market. If you’re a graphic designer, here are a few compelling reasons why you should consider learning at least the basics of programming.
A complete skill set
The ability to use a combination of graphic software, HTML and CSS design together is a very powerful skill set that will set you apart from those who do “one or the other”. Learning to code also means having fewer limitations, as you won’t be dependent on one specific platform or piece of software to build a site.
Improved job prospects & security
The demand for web designers is growing. According to the outlook for web design prospects over the next few years, the role is more in demand than ever before. The majority of employers want workers who know their way around the digital space. The ability to code and use design software makes you an asset to prospective employers.
More cohesive teamwork
Chances are, unless you’re working for a very small company, you won’t be building a website from scratch on your own. Designers and developers typically work together in teams, with designers creating the visuals and developers taking care of the programming side. If you’re a designer with basic knowledge of coding, you’ll be able to speak the developers’ language, and understand the limitations (and possibilities) of the software being used to code the site. This will make you a more valuable team player, and help you to work more seamlessly with the programmers.
In short, it’s clear that graphic designers should learn to code; it’s a skill that will make you a better designer and all-rounder. So, how do you get started?
Steps for learning to code as a designer
Take a course
To start learning to code, begin with a few basic online tutorials, and then enrol in an online course. Taking an online coding bootcamp with one-on-one mentorship will help you fast-track your coding knowledge, without the expense and inconvenience of enrolling in a traditional on-campus course.
Find industry resources
Start following respected programming blogs and forums online. This will help to answer any coding questions that might come up for you, and to keep you informed of programming news and trends.
Experiment & practise
Get hands-on with code and start building. It’s the only way to see how things work (and break) practically. Play around and don’t be afraid to get things wrong.
Learn from others’ examples
Analyse and deconstruct existing code from other programmers, to see how it’s done. Find examples of online design you like and admire, and use your browser developer tools to inspect it and work backwards to see how it was built.
Talk to the experts
Connect with experienced developers and ask them for advice or recommended resources. You might want to think about attending occasional meetups and keynote addresses too.
Here are some handy tools to make the transition from graphics to code a little easier.
Top tools for graphic designers learning to code
Atom
Atom is an open source text editor that designers will love. The attractive visual themes and handy auto-completion feature make it intuitive for designers to use.
Canva
This tool is a colour scheme generator that helps you to find the right color combination for your designs. Canva also has a colour wiki, with more information on individual colours and their corresponding hex codes.
WhatFont
WhatFont is a Chrome extension that helps you find out what fonts a specific site is using. This makes it easier to make informed decisions about online typography.
Wappalyzer
Wappalyzer is another Chrome extension, used to identify which libraries and frameworks a site is using. Great for front-end developers and designers.
There are many more tools and resources out there that you’ll be able to pick up though reading design and development blogs, or talking to experts in the field.
Graphic designers should learn to code, and a mentor-led online developer course gives you a great starting point.
