How I learnt to code

Making the switch from static based mock-ups.

I often get asked how I made the switch from static based mock-ups to designing in code in the browser.

It’s really quite simple; I read, I watched, and most importantly I tried. And I kept on trying. At first it was frustrating with a literally a whole new language to learn, and I had some um… ‘interesting’ challenges along the way, but then it started to click.

In previous years I had tried every tool I could to avoid having to learn how to code, but in the end I took the plunge and realised it wasn’t that alien after all. Borders, box-shadows, padding and margins — these were all things I had been used to creating by hand and who would have thought that creating these in CSS could be so simple. Without a doubt CSS layout was the trickiest and took me a little longer to grasp, and there are still many occasions I sit frustratedly at my computer, wishing that box would just go where I want it.

Having spent the 10 years previous using traditional tools such as Adobe Photoshop and Adobe Illustrator to create designs, moving to browser based design was a bit of a mountain to climb and the fact that I knew I could create what I wanted so much better and quicker using these tools frustrated me greatly. Like many designers, I had expectactions of greater things, and found it difficult to deal with the reality.

This whole code thing wasn’t working. My code sucked and this reflected in some of the design choices I had to make and more importantly had a huge impact on the end user. I had to try something new.

I decided if I could crack part of my vision it would give me a solid platform to build upon. Instead of trying to build an entire site I decided I would simply things and focus on building a single page.

This started out fine, but soon this tiny page grew arms and legs. It would of course have to be responsive; it would have to use a pretty web font; it would have to make use of SVGs, and wouldn’t it be nice if it was controllable via Wordpress.

Almost over night I had turned what seemed like fairly simple thing into a full on project with more requirements than Mariah Carey’s tour rider.

I started to re-think things, and painstakingly removed anything which was going to hold me back from publishing the page and set to work.
Almost instantly I got a kick out of seeing my designs coming to life. Being able to preview them and validate designs on actual devices without a developer was pretty cool. Sure, they weren’t production quality and yeah maybe they made use of too many unsupported selectors, but I was making something, and pretty darn quick too!

So my first page was out there on the web, and ok, it might not have looked or behaved exactly how I imagined, but it was out there. Partnering with front-end developers I have been able (and continue to) polish my skills further.

It’s now, as part of my daily process, I make use of these skills and whilst certainly not at the level of front-end specialists, I reckon I can now knock out a fairly decent feature in a couple of hours, run some user testing on it and have feedback implemented before the rest of my team are even ready to start the development of the feature.

Throughout my coding journey, I have had my eyes opened to many other tools, of which at first might have seemed very development orientated, but now are tools I would recommend as part of any designer’s toolbox. From version control via Git, automation tools such as Grunt, to pre-processors such as SASS, to the command line.

A lot of designers I know, really want to learn to code, yet struggle to translate the learning they’ve built up from reading or following tutorials online into their day to day projects. If you’ve faced a similar challenge, try taking a piece from an existing project that you’re working on; break it down into smaller pieces, take it a piece at a time and don’t worry about creating the whole thing. Starting off with something smaller, be it a header or a call-to-action button will allow you to focus and keep things simple.

Throughout my early learnings, one of the most important things I learnt (as difficult as it was) was accept that you will mostly likely not be able to create exactly what you are used to creating in your graphics software or at the same speed of which you are used to. This is okay!

We all know that we live in a mobile world, and creating designs which respond and adapt to devices is crucial, but don’t let this get in the way and increase the learning curve for your first piece of code. Try focussing on one viewport, with no styling — get your structure in place then use this to start introducing some basic text styles. As you become more confident start introducing more advanced things like layout, or media queries.

Remember, throughout these early phases, you might not be 100% happy with the results, but stick with it, you’re learning! Use this as a foundation to build upon and iterate. Speak to front-end developers, ask on forums and keep trying.

In my experience, if you keep things small and build up your knowledge bit by bit, you will be able to make significant progress incredibly quickly.