The fine line between code and design

// Coders and designers seem destined for eternal battle

Being a designer can start you off on bad footing with most coders.

Being a coder usually makes you a enemy for designers.

One provides endless imagination and creativity while the other the structure and knowledge to display information to millions. Design and code don’t have to always be at odds, but most of the time, that’s the case.

Defining Roles

Design and code for the experience and content the website provides, not to the pixel perfection of the design, nor to the ease of the functionality of it.

It’s no wonder why jobs have been created recently for User Experience and User Interaction. Their jobs are to understand both coders and designers. On top of that impossible job, they’re also expected to understand users.

Usually they’re involved in the process early on with wireframes, before the design starts.  However, not everyone has the luxury, and that section of process can be taken for granted.

Flexibility Without the Yoga

For coders, it’s important to remember that not everything is going to be thought of all the time.  Yes, this is irritating.  Yes, you can’t believe it got this far without it being thought of.  That’s why you’re here.

Frameworks are so popular because there’s some solace in the idea of creative structure from the usual chaos. Keep with this tradition, and try to keep things consistent, even if it means possibly taking liberties that could be changed later.

That last part may be the hardest for coders, because usually there’s two functions for code. It works or its broken. That’s not the way design is done. There needs to be more patience with design, the hardest part being that the final answer sure could be 2+2=4, but it is only actually right when it’s written in 24pt Open Sans, italicized.

It’s Not You.  It’s UX/UI.

As a designer, you have had your head buried in a design for hours/days/weeks getting it to the point it’s at now.  You might be on a bit of a high since the client approved that design.  And why wouldn’t you be?  It’s awesome creative!  And then, some non-creative is about to come in and pick everything apart.   Why?  What did you do to them?

Well, to be fair, it could be that they’re running low on caffeine, patience, or both.  Or, the more likely scenario, is that they’re not seeing your magnificent design for its whole beauty, but instead are already breaking it up into divs, spans, and unordered lists in their head.  How will the user know that they are able to interact with this element?  How will they know it’s disabled?  What does the design look like on smaller screens? The list grows for every browser, screen size, and interactive element.

Plan for Breaks

I’d recommend taking a step back from your design often, ask yourself what elements have been placed since your last design break, what purpose they serve, and how you imagine the user will interact with them.  Keep an open notepad, and jot down your notes.  It may add a little more time to design, but I promise you, it’s worth it.

Also, keep your Photoshop files in order for everyone’s sanity…


It is very difficult to walk the fine line of either being both a coder and a designer or being a coder who can live with (and not hate) your designer (and vice versa). However, it is possible to create a symbiotic relationship, where you each do a little work for the other to keep things flowing.

Be a logical designer. Be a creative coder.