Designers, learn to code

One of the most beneficial decisions I have made in the last few years with regards to offering my clients a better service has been to learn how to code.

As a designer I have found that this skill-set has enabled me to win more freelance work by better serving my clients. Not only that but it has drastically improved my website UI/UX design because I now know what is and is not yet possible to achieve with code. For example, if I was to design a UI for a site without knowing how to code, I would have to work closely with a developer so that I can ask them questions as to what is and isn’t possible. Whilst this can work, it does add to project timescales and can incur extra outsourcing costs. Another benefit is when the UI/UX design is completed and approved by my client, I no longer hand the project over to a third-party. This again keeps outsourcing costs down and enables me to keep a tight eye on quality. I can hand on heart say now that I have no idea how any designer can design their best UI/UX without at least knowing a little code.

I can hear all the designers scream ‘but I don’t want to learn how to code’, ‘I don’t know where to start’, ‘I don’t have time to learn a new skill-set’. But listen up, I strongly believe that if you are serious about your work, particularly if you work in digital, then you will have to learn how to code at some point. Now you don’t need to be a full back-end geek and know server-side PHP in-and-out but I can tell you this, learning to code is so very satisfying. Once you learn how to write HTML/CSS – and you will learn this quicker than you think, you will then quickly want to move onto Javascript and PHP. There is nothing* better than seeing your design come alive in desktop and mobile browsers as you begin to code.

So to help you get started here is a list of some resources that helped me transform myself from a traditional print designer who was afraid of the internet to a happy web and mobile designer and developer.

Resources for getting started

• Don’t Fear the Internet (videos and resources)
• Jessica Hische, I Am Not a Web Designer (article)
• Code Academy (free step-by-step tutorials, this is awesome)
• CSS Tricks (plenty of great information)
• CSS Gradient Tool (making CSS grads easy)
• Rounded Corner Generator (rounded corners made even easier)
• Browserstack (brilliant cross-browser and device testing)
• W3C (loads of tips and code snippets)
• Firebug (the best developer tool available, seriously)
• Chrome Developer Tools

That is a list of tools and resources that I use most of the time. The last one, Firebug Chrome, is totally indispensable as far as I’m concerned. Get yourself using FireFox and install Firebug Chrome. Firebug Lite is available for other web browsers, too. The developer community, online and off, is very helpful. You can ask questions on forums around the net and you will always find an answer. Another thing to think about is reading up on some basic web server management but, again, that is not as daunting as it sounds.

So there you go, go and get geeky. Sign up to Code Academy and start working through their basic HTML/CSS courses and in no time, you will be coding your very first website and trust me, it’s not as daunting as it seems!

*Well, not many better things but there are a few.