Growing up I wasn’t sure what I wanted to do. I enjoyed problem-solving and making things from scratch but I couldn’t draw or paint and so I thought that meant I wasn’t creative. I didn’t let that stop me from exploring design as a career path.

I did a 2-year FDA in Design Practice at Camberwell College of Art and Design and topped it up with a 1 year BA in Design for Graphic Communication at the London College of Communication. My first job after graduating was at a tech company where I worked in the graphic design department. I enjoyed it, but knew I wanted to keep learning. My boss and I made a sweet deal that if I taught myself how to code I could join the web design team. Challenge accepted! 3 months later I had built my own website from scratch and became a member of the web design team. That’s how my coding journey began. Today, I work as a digital designer at Den, with a firm focus on user-centred design, including web and product design.

Although it’s not a must, there are clear advantages for digital designers who can code. I won’t pretend it’s easy. Learning HTML, CSS and JavaScript is a serious commitment that requires time and energy. Here are my top 6 benefits of being a designer who can code, with some real-life examples.

1. Design and dev collaboration

Working collaboratively with developers is a key skill. With some knowledge of coding, we can ensure that we have ticked all the boxes when designing for a particular technology. This eases the handover process and means we are speaking the same language as our development team (something that can sometimes feel a little tricky, I know). When it’s time to test, we are primed to identify bugs and unexpected behaviour with the products and can quickly work with developers to rectify them. Working as a team makes the process so much smoother.

2. Understanding the limitations

Learning to code can ultimately make us better designers. Knowing the basics of development means we understand the limitations developers are working within, allowing us to design better solutions. Once built we have the capability to test our own designs, whether it be in a staging site or a live environment; we can inspect and amend code to experiment with the way elements look and react.  Having the skills to test in an environment rather than needing a developer to take care of this part of the process really is a game changer for the way you’ll approach future designs. 

3. Design efficiency

In most projects designs will go back and forth between designers and developers, both sides adjusting and tweaking until the design becomes viable. All of this time comes at a cost. Knowing code means we can make better-informed decisions, ensuring that we create achievable designs from the get-go, and helping us better estimate the time it would take to develop our designs. In some cases, I have found that my knowledge of code has reduced a lot of the time typically spend handing over to a developer, as the foundations of the build are either completed, or much easier to explain to another team member. This makes the working relationship between designer and developer much more efficient, and allows us both to be part of the problem solving.

4. Designing the experience 

Since learning how to code, the prototypes I’ve been able to build have dramatically improved. One of the most useful skills we can learn as designers is the ability to create high-fidelity prototypes that we can show to both clients and developers. High-fidelity prototypes allow us to explain the look and feel of a product whilst also giving the clients the chance to see how their product will react, without the need for using imagination or loosely interpreting designs. While many of the best prototyping tools i.e. Framer, Protopie and Principle, can be used without knowing any coding at all, the method of thinking that is required to create complex interactions is very similar to the thinking required for coding. There have even been times where my ability to code removed the need for prototyping tools entirely because I used HTML and CSS in a code editor (I personally like CodePen) to create interactions. If it sounds like a nice smooth process, it’s because it is!

5. Become more valuable 

One of the big reasons I was employed here at Den was because of my ability to design and code. I guess you could say it’s my superpower. It is still quite rare to find someone that can do both, so if an employer is given the choice between two designers; one who can code and another who can’t, being the designer who has those extra skills will definitely give you the edge and increase your chances of landing your dream role.

6. Gratifying. Rewarding. It’s just fun

I wanted to leave the best to last – and yes, this does show my geekier side. Coding is fun! Having the ability to take a static design and see it come to life is so satisfying. It gives you a sense of control and although time-consuming, you will see the results. It is that simple. In my case, I take every coding opportunity as a challenge. There is a process I follow to identify the problem, solve the problem through logic and turn that logic into code. This genuinely gives me a great sense of achievement.

To sum up …

A digital designer won’t need to use their coding skills every day, and we definitely don’t all need to be full-stack developers. But, having an understanding of the basics makes us more flexible when working within a multidisciplinary team. Just as an architect cannot design without knowing what materials he will be working with, how can we as designers do our best work without some knowledge of our medium?

If you’re a designer reading this and are interested in learning some code, there are some excellent free courses online, including Codeacademy, Gymnasium and Udemy. If you don’t mind paying to learn you could check out: General Assembly, Brain Station, Educative and SuperHi. If you’re not a designer but interested in how our multidisciplinary team can help you, we’d love to hear from you. You can get in touch with us here.