A Designer’s Guide: How to Collaborate with Developers

How many times have you had to see good designs annihilated by ‘amateur’ developers? Hurts something fierce when it’s your own design, doesn’t it? On the flipside, have you considered that you could be the problem here, designer?

If you answered yes (preferably with a sheepish look on your face), you are to be commended for recognizing the trouble and trying to fix it. Salut. And in this post, we’ll do just that.

Here are some tips to make your next project (as an employed or freelance designer) less of a pain and all around more awesome:

1) Digital Design etiquette

Practice the following:

Learn to organize individual resources (buttons, modals, margins, fonts, icons, etc.) into separate, clearly named folders so that developers know where to find them without wasting time.

Include any 3rd party files for fonts and/or icon sets and make sure they all have proper licenses for intended use. Label font families properly.

Do NOT compress everything. Keep important layers (anything with an element on it) and label them properly. The purpose of this design is to be picked apart, not to sit there and look nice.

Create diagrams/charts/storyboards to depict where links go in the hierarchy.

Keep Localization requirements in mind while creating layouts (accommodate variations in text-width in body, buttons, quicktips, etc.). Annotate everything.

Help your developer understand the minutiae of your design so that he/she may make it functional without missing out on anything.

On a different note, here are Top 10 Text Editors for Designers and Developers.

2) Style Guides/ Pattern Libraries

A style guide is a living document of code, which details all the various elements and coded modules of your site or application. It’s a one-stop place for the entire team.” – Susan Robertson, Creating Style Guides.

For any project big or small, style guides is a way to ensure smooth collaboration, design + code consistency, and context-of-use in a volley of ideas. During this storm you discuss and arrive on settled results which will become standards for the rest of the development or future customization process. This is where collaboration should start:

• Logo Styles (all its alterations, sizes, alignments, and positioning rules)
• Color Palettes and their use
• Graphics and Fonts with their usage guidelines (‘where’ and ‘how’, along with links to appropriate files or their names)
• Layouts
• Bits of reusable code (for specific interactions/animations/effects and elements that will occur repeatedly) for easy access. Your developer needs to work on this section, and you can help by looking up required code snippets on the internet.

Style guides/Pattern Libraries are a good habit to get into for designers: Not just for collaborative advantages, but for branding and personality purposes. It improves workflow, saves time, and keeps design/development steady.

3) Learn how code works

In order to see design through the eyes of a developer, you don’t need to learn coding. You just need to know its fundamentals.

This means that you don’t have to learn how to code. You just have to have a working knowledge of web development and programming languages (especially front-end coding languages) in general. Here are some points to start studying:

• How HTML tags are threaded and then rendered in different browsers
• CSS and JavaScript Basics
• Purposes of these languages (What do they do)
• Commonly used CSS snippets for effects like box shadows, rounded corners, etc.
• Which elements are better created/left as graphics and which can/should be created using CSS
• Breakpoints and how they work
• Animations and Effects in CSS and/or JavaScript

In a nicely put-together post on Percolate’s blog, their marketing engineer Sean Connolly expresses this in the very first point very succinctly: “As a developer I don’t expect a designer to know the nuances of markup or CSS, but someone designing for the web should understand basic principles of web development.”

This helps you gain a realistic idea of what’s viable/possible in the design and why. This is the same as you expecting an interior designer to know the functional and aesthetic properties of different building materials, but not how to build a house with them.

So take interest in development and learn the core fundamentals/basics. If you can take it further, so much the better, but as I said earlier, you don’t have to learn to code.

4) Communicate

Once you have an inkling of how developers see a design, you’ll be able to collaborate better and communicate more effectively.

• “Show and Tell”: Nothing works as nicely as an example when you are explaining something. So while explaining interactions/states etc., scrounge the internet for similar examples to what you have in mind, so developers have a clear idea of what you want.
• Use plenty of annotations in the wireframes
• Learn to break your design into modules (Atomic Web Design concept)

5) Collaborate in real time

Get a developer in on your project as early in as possible. This is to keep your design in the realms of possibility and a more comprehensive, cohesive designing/development process.

Use tools like Slack, UX Pin, or even Google Drawings to collaborate with your developer/designer and keep up this streak.

You might also like “Personal Security Rules for Web Developers“.

Endnote

As a developer myself, these tips have personally helped me work in better tandem with the designers, so consider these a little tete-a-tete from your developer pals. Remember that the more designer-developer collaborate, the more fantastic is the end-product.

It’s in everyone’s best interest, really.