Design | 18th October

“Designing” your front-end code

If you’re a designer, chances are, you’re a visual person. You learn by seeing something, whether it’s a physical manifestation of an idea or you’re daydreaming something up in your mind. You’d chose an infographic over pages and pages of corporate jargon any day and you’d rather watch a film than listen to an audio book. Ok, I’m generalising now but you get the idea.

Do I think it’s important for designers to code? I’m firmly in the ‘heck yes’ camp but I’ll get into that more later. Being part of a multidisciplinary team at New Socks means we all get the opportunity to learn new skills and I’m very fortunate to have some very clever developers steering me away from the coding no-nos.

I want to share how I turn my UI designs into code using pen and paper. Yep, taking it back to basics. Sketch is great and yes, it’s super helpful that you can export CSS styles straight from your artboards but that often doesn’t cut it when you’re developing something more complex. As I said, give me pictures and I start to understand how “stuff” works.

So where do you start? Take a section of your design and think about how it’ll work in whichever grid system you’re using. I like to work row by row, splitting content into blocks which will become divs or partials with relevant classes. It’s then totally up to you how much detail you want to add. This technique is particularly useful when you have divs within divs, within divs which can get a little overwhelming if you’re going straight into your text editor without a solid game plan.

Will this change your life and turn you into a wizard level developer? Probably not but it should help you to get organised and most importantly, help you cut out any unnecessary code. Remember, the simpler and more re-usable your markup, the better (the backend devs will love you for it).

Oh and while we’re here, if you’re a designer that doesn’t code (yet) then I’d strongly recommend that you get yourself over to Codecademy or any other online learning tool. Let me explain why you should at least learn the basics using a very likely scenario:

An exciting brief swooshes into your inbox; your client wants a modern, easy to use e-commerce store and they want it in 3 weeks time. Your mind races with ideas and you can’t wait to start creating the most complex concepts using all the latest tech. You spend a week getting insanely creative and then send your visuals over to your development team. You can’t believe it when they’re not excited about building your incredible design solution including a virtual fitting room and login via face-recognition. Instead they say something like:

“Yeah, this will take us over 6 months to build…”

So it’s back to the drawing board for you with 3 days left until your deadline… Sound familiar? If you understand the basics of programming you will also start to understand what can be achieved in a 2 week development sprint and will keep the devs on your side rather than making yourself the enemy.

Written by
Nicole Bartlett
Nicole is a UI Designer and Design Sprint Facilitator at New Socks Media.