The Subtle Benefits of Working with Designers Who Code
Not all designers need to learn to code, but developers should embrace the ones that do.
Not all designers are interested in learning those technologies. Some designers come from a print background, while others may find it intimidating or nerdy. And that’s fine with me.
I’ll leave it up to others to nudge designers to learn code. At best, that’s well-covered territory, and a little worn out. At worst, it’s a thinly-veiled complaint that usually reveals more about the author than it’s subject.
Designers just don’t get it! It’s like, “be a front-end developer and a designer.”
Am I right, guys?
- Every curmudgeonly developer, ever.
The world needs print designers, and the world needs good branding. As a developer, it’s often my job to help translate a flat design into a fluid web interface. There’s often a lot of guess work in that translation: How does this state transition to the next? What happens when I smash by browser in half? What happens to the menu on my phone? etc…
If we can cut out that guess work, our products will be better.
The best way to cut out that bad assumptions and unsuitable designs is to find designers that know how to code a little. I’ve been lucky enough to work with a solid few designers that have a basic understanding of HTML, CSS and JavaScript. These are the designers I seek out because working with a designer who can code yields some amazingly subtle benefits:
They Focus Better
I don’t like to re-invent the wheel.
Not every form-wizard or mobile menu needs to be a new invention. Conventional elements shouldn’t be a declaration of its creator’s design prowess. There’s nothing to gain from a short-sighted display of the hubris hidden by layers of trendy aesthetic.
Designers who code know this. They don’t waste time pontificating over minutia. Instead, they focus their attention on where it counts: UX, readability, problem solving, and other core features.
They Have a Map of the Piano
Understanding the box model is the biggest skill acquired when you learn HTML. The box model is the piano of the web world. Unlocking it gives you a map of how elements relate to each other. Transitions, flow, and responsive layouts make much more sense because they’re tied to things you can see.
Like a piano, understanding the box model doesn’t make it easy to use, it just gives you the tools to make better decisions. Designers that understand this concept can be smarter about breaking rules or embracing conventions.
They Experiment
Designers who can code create their own prototypes, which serve to improve their understanding of the web. Knowing HTML, CSS & JS are the basic tools needed for any quick prototype. It’s amazing what designers come up with when learning something new. I’ve never once been unimpressed at a prototype a designer’s made.
They don’t even have to be good prototypes. The simple act of trying is beneficial. Often, when a designer is trying to translate their vision to code, they get stuck. When they get stuck, they start asking questions. “How’s this done?” “Can I do ‘x’ when ‘y’ occurs?”
Those questions make all the difference in the world in your end product. Experimentation creates the opportunity for “delightful moments” that make real products a huge part of our lives.
They Bridge the Language Gap
When your designer tries something new in code, they’re able to communicate in your native neck-beard tongue. Transitions between states, delays, animations all become clear. You and your designer can inhabit the same headspace, if you let them.
“Coding” can mean different things to different designers, too. Some designers might focus on HTML & CSS to recreate their new branding idea. Others might prefer JavaScript, as that can translate their transitions and UX ideas to the web.
I’d say the JavaScript had been most beneficial so far. I’m now starting to think in terms of events, states, and layers. I’m hoping the biggest benefit will just be improved communication and efficiency with developers.
- Garrett Kroll, UX Designer
You Don’t Need An Expert
My main take away is that anything is exponentially better than nothing. As a developer, things get better if a designer can start to translate their design into words and symbols. Any rudimentary knowledge of any coding language is a good sign that you’ll be able to speak the same language, find better solutions, and focus on what matters.
