What is one of the biggest problems with teams composed of designers who can’t code and coders who can’t design? – Gap between the knowledge of the designer and the coder, meaning that often designers don’t know what technically is possible, while coders don’t know what makes a good design. Wouldn’t it be more effective if these two have some overlapping knowledge, thus will have more time to focus on creating synergies rather than gaps?

1. Think, design and code

• Less than three months back, Mike Rundle, designer & software engineer focused on crafting products for the web, Mac, iPhone & iPad, wrote an excellent blog post, “If You Can Think, Design & Code, You Win” emphasizing the great value a coding designer or designing coder delivers.  He strongly believes that doing all three – thinking, designing and coding –  is incredibly valuable. He writes: “Do you know who the most valuable software people are in the world? They’re the ones who can think up great ideas, elaborate these ideas on paper, design the interface, then prototype and build the idea into a real thing. Idea to design to code to product. One person who can do it all. One person whose skills cut across job titles and areas of purview with an overwhelming drive to do the whole thing because that’s just how they do things”.
  

• Jared M. Spool, a software developer and programmer, has a great article too, “Why The Valley Wants Designers That Can Code”, explaining why a great designer who gets good at coding over time, or a  coder who learns a bit more about designing, has way more opportunities than non- coding designer and non-designing coder. He says: “Coding and designing are collections of skills. What we’ve learned is teams with a better distribution of skills, not segmented by roles, produce better results. Having a team filled with individuals who can both code and design will be more effective in the long run than a team where the skills are divided up. If you’re a designer, you don’t have to learn to code. But if you do, and you get good at it, you’ll find more opportunities as time goes on. The demand is high and those designers who have proven, practiced coding skills can demand a higher salary than those who don’t”.

• In his blog post, “Coders Who Can’t Design, and Designers Who Can’t Code”, Sacha Greif, a 25 year old user interface designer from France, points out the main things non-coding designers and non-designing coders lack. For example, non-coding designers 1) Need a Photoshop mockup for every single screen, 2) Assign different values at random to every margins and paddings, or 3) Do not understand the concept of aligning things together. On the other hand,  non – designing coders: 1) Never think about what the site will look like past the dimensions of their PSD, 2) Have been using web fonts since 1998: they just export all text as JPEGs, or 3) Think they can set an image’s blending mode to “overlay” in CSS. Based on this, Greif says: “Reaching out to the other side and learning a bit more than the absolute minimum will not only make you produce better work, it also goes a long way towards smoothing the wrinkles in the designer-developer relationship”.

2. Crossing the chasm

• Not that different: Designers and coders are not that different. In fact they have commonalities. Ralph Saunders, young designer, coder and freelancer, makes a great point. He explains that design in fact has structure and rules the same as coding. “Good design, just like good code, makes and effort to stick to these rules as—in most cases—they benefit the user. Once you have and understand that perspective, everything else is pretty logical”, writes Saunders. Moreover he claims that both, designers and coders create products for a purpose shaped by business objectives. He says:” Design is visual logic, code is written logic, they really aren’t that different”.

• Crossing the chasm: Designers  could invest some time and efforts in learning HTML and CSS languages, as well as understand how web pages are constructed so that they don’t make fundamental errors (ex: not considering browser viewport dimensions, font stacks, page weight, or coding practicalities or providing Illustrator-based 300-dpi mock-ups which are impossible to replicate on-screen). On the other hand coders could learn more about basic principles of design, grid systems, colour theory, or typography.

• Example: Chris Eidhof, entrepreneur mostly building iOS apps, gives one example of the great designer – coder synergy effect. He says:” One good example of where this is done is the Square credit card field, which is not just design or programming, but really achieves synergy by combining them”. Moreover, “If someone is talented enough to do a great job within his or her skill set, then they’re probably talented enough to learn a bit about someone else’s job, too. Designers learning how to program. Programmers learning how to design. Product people learning how to actually design or build something instead of just writing about it. Whoever you hand your work product over to, that other person’s skill set is what you should learn about”,writes Rundle.

3. Designer – coder hybrids

Want to check some of those awesome people who understand the incredible value of designing – coding relationship? Mike Rundle, Brandon Walkin, Kyle Van Essen, Shaun Inman, Michael Simmons, Andreas Illiger, Michael Villar, Ben De Cock, David Kaneda and Cathy Shive are a few awesome designers and coders who think, design and build amazing stuff, mostly on their own.

Final message: Designers, you can write codes. It’s not rocket science but just another structure with set of rules to learn and understand. Coders, you can learn some basic principles of design: it could be as logical as coding. And both, designers and coders, you need to master the “thinking” part too. Coming up with great ideas that could be designed, built and shipped is the ultimate goal. Think, design and code: do it all, win it all.