Over the last several years, we've seen an enormous push for quality, user-centric design. This shift toward exceptional user experiences means developers find themselves working with designers far more frequently than in the past. And in case you haven't noticed, designers and developers solve problems differently. This is a good thing, but teams that lack crossover knowledge can sometimes suffer for it.
This lack of crossover is what I call the designer-developer gap. It's the knowledge gap between a designer's domain and a developer's domain. The gap, however small or large, inevitably leads to miscommunication.
It's an age-old tale.
Designer slices asset for button with rounded corners. Asset isn't correctly sliced. Developer attempts to implement. Button looks wrong. Developer explains problem to designer. Designer blames developer. Designer swears it's beautiful and perfect. Designer eventually realizes mistake. Designer blames developer anyway. Asset is corrected. Developer skews rounded corners by disproportionally scaling image. Developer also uses serif type rather than sans-serif. And the color is wrong. Designer says it doesn't look right. Developer asks why it matters and thinks it looks fine the way it is.
Of course, this only represents one of a thousand scenarios, but the end result is generally the same: the final product doesn't accurately reflect the original user experience design, and frustration infects the team. So what can we do to meet in the middle and eliminate the gap?
Designers: Acquaint yourself with the platform you're designing for. Know what constitutes custom versus out-of-the-box controls. Ask questions and pay attention when developers explain the effort required to implement your designs. Be curious. Poke around a developer's SDK and get a sense of their world. And last, but far from least, learn HTML and CSS. Don't hide behind the excuse that learning to code will hamper your creativity, because it's actually the opposite.
Developers: Learn the fundamentals of graphic design, especially how design applies in web and mobile. Know the difference between vector and raster and when to use each. Familiarize yourself with concepts like screen density, resolution, and density independence. It's not enough to simply memorize definitions—you need to understand their meanings and implications. Never undervalue the right typeface for the job. And if you're feeling especially bold, try doing some graphic design tutorials in a program like Photoshop or Pixelmator.
It's hard to understate the benefits of working on a team that closes the developer-designer gap. Designers know how to better slice and prepare assets, and developers know how to properly implement those assets. Technical communication relating to each field is much clearer. Trivial tasks, such as resizing an image or changing a color code, can be handled cross-team. Even planning and estimating improve.
Beyond the practical rewards, you can look forward to improved team chemistry. Sure, you'll have the occasional exception. There will be the designer that insists something is super-easy to code, or the developer that's convinced of some newfound, inner creative genius. But more likely, your designers and developers will respect and appreciate each other in an entirely new way.
With the plethora of resources available on the Internet, the tools for designers and developers to close the gap are freely available. It's extra work—maybe even hard work—but once your team has made the shift, you'll never look back.
Just don't be surprised when your developers trade their cargo pants for skinny jeans.