The relationship between designer and developer is critical at an agency like Nebo. We’re out to do a lot more than build things that look pretty. Our projects need to tell brand stories, solve users’ problems, and function like a well-oiled machine. Creating great experiences for our clients and their users is a complex process that involves a lot of hard work from a lot of talented people.

Think about the way an architect and a builder work together. Without either, there can be no finished structure, and though both share the end goal of delivering something beautiful, that doesn’t mean there won’t sometimes be miscommunication along the way.

Designers -- understand that developers have a difficult job and, if you’re not careful, you can make it a lot harder without even realizing it. They’re not just the hired help that executes your brilliant vision. To create an amazing product, you need to learn to collaborate with them, hear their ideas, and be a good partner.

With this goal in mind, I sat down with our dev team to get their input on how we designers can make their lives easier.

Mind the Nuts & Bolts

There are entire websites dedicated to proper Photoshop Etiquette, so I won’t go into too much detail here, but these nuts and bolts issues kept popping up in our discussion about things that drove our devs crazy. Here are a few that hit particularly close to home:

• General file organization - Name your layers and group them according to page section. 95% of my PSDs can be ordered according to where they appear on the page.
• Avoid using the Overlay or Multiply setting on elements that can’t be flattened. The internet is awesome, but it can’t do that. Yet.
• Reuse elements. Have a form PSD that has reusable elements like form fields, buttons, type styles, etc. That way, whenever developers need something they can just drag it over. Keep the same CSS rules throughout.
• Make sure your fonts are licensed for web use and include the necessary font files when sending PSDs.
• Think about full width background images and make sure they’re able to stretch out. Convert large images (that need to stay large) into Smart Objects before sizing them down.

Don’t Leave Them Guessing

A successful design/dev relationship goes further than just organized files. This is your chance to create a piece of work that feels alive vs. something that just functions.

Make sure you design the complete user interaction: Drop downs, hover states, click states, etc. How do the animations work? Do objects slide out? Unhide? Appear out of nowhere? Consider screen sizes. Show what the design will look like on a big screen vs a small screen.

Understand that design can break based on content. If the final copy is longer than the placeholder, what happens to your design? Is content editable by the client? What happens if they make it longer after the fact?

Don’t leave these questions unanswered as you hand your designs off to your dev team. You risk delaying the project when they’re forced to come to you with questions or even losing the chance to give your input at all on items you may have overlooked.

Be the Designer First

You might think that the best interactive designers would be equally skilled in writing code, but that’s not necessarily true.

Designers will benefit from learning some basic front-end development, sure, but they shouldn’t let themselves get bogged down. Focus on how the project looks, not how it works. Be the designer first and foremost.

It’s important that designers don’t limit their creativity by worrying about the specifics of development. Think big, then scale down if necessary.

Developers – Be Proactive

In a perfect world, all of these things would happen seamlessly and without discussion. But we don’t live in a perfect world and designers won’t know everything you’re expecting from them unless you tell them. You have to speak up. Developers and designers aren’t exactly known for being talkative outgoing types, but you need to make sure your voice is heard early and help the team manage client expectations.

The bottom line for all of us is to consider our teammates and work hard on open communication. Be open to the ideas and input of others and don’t draw firm lines around your responsibilities. Everyone has the same end goal -- to create a great product. The key is to work together to remove the obstacles that could derail the project before it gets there.