Designers and Developers Working Together (7 Collaboration Tips)

Designers. Developers. You can’t have one without the other. What happens during the design and development process, along with anything in between leaves a lot of room for things to go really right or really wrong. However, believe it or not, designers and developers working together is possible.

Without being able to work together effectively, or a well thought out sitemap page design, the margin for error could potentially be Grand Canyon sized.

In a collaborative effort, between well laid plans, proper implementation of tools, and excellent communication, teams can achieve big common goals. In the end, those goals produce a valuable product that meets business goals and provides a great end-user experience.

In order to get the best results, putting in the effort to make the designer-developer relationship work is imperative.

How to effectively get designers and developers working together

In a perfect world, everybody on the team would get along, work would be done swiftly, we all sing kumbaya and there would be zero hiccups. In reality, however, it takes work to make it work and there’s always going to be some speed bumps along the way.

Remember that during this whole process, both roles ultimately answer to the client or company that hired you. You’ll each want to add one more person to that list. As a designer, you should also consider the developer as your client and vice versa. Why? Because if they don’t get what they need, it’ll have a serious impact on the results of their work and subsequently yours. If the designs don’t work with what they’re developing, you have to do the same job twice (or more).

Let’s go over all the tips to make this process as painless as possible and look into how to work with designers and developers with the least amount of friction possible.

1. Set clear expectations for web designers and developers

Don’t you wish there was a way you could know if Monday was going to go like most Mondays? Or maybe before you get on an airplane, if there’d be a “Karen” onboard?

Setting expectations makes all the difference in a work environment (especially if it’s virtual) or any environment, really. Knowing what to expect and laying down the ground rules, in advance, can prevent costly miscommunications, and it gives you a chance to get to know your counterpart better. At this point it’s a little late to start Googling “how to design a website.” All the cards should be on the table so later on you aren’t asking poorly timed questions like “what is site mapping?”, “why aren’t these mockups interactive?”, “why does this user journey end here?”, or “where’s Waldo?”

This is the perfect opportunity for you to discuss the who, what, where, when, why, and how. Who am I working with? What is our end goal? Where will we do the work? When is it due? Why are we doing this? And how will we make it happen?

Your brainstorming sessions start now!

A word to the wise; old dogs can learn and teach new tricks just as young dogs can if you’re willing to give them the chance. Don’t let pride or any other nonsensical issue get in the way of learning and improving the product. You can graciously decline an idea, but not listening altogether could cost you. Plus, you might miss out on an idea that could make you the hero at your next gig.

2. Promote open communication among developers and designers

Arguably the most important takeaway on the list; communication is absolutely paramount. If done right it saves time, money, frustration, having a million do-overs, and much more. In fact, most items on this list tie back to communication. Unfortunately, a communication breakdown can easily create barriers in the development process, cause lost or repeated work, and add unnecessary frustration.

Then the blame-game starts.

Promoting open and clear communication stops it in its tracks.

You may find that something isn’t exactly the wrong way to do it, but there may be a better way to do it. Keep that in mind. Compromise doesn’t always mean something or someone is second best. Don’t look at idea generation as a competition, you’re all on the same team. When the client is happy, everyone wins.

Usually, we’re in the mindset of “stay in your lane” but learning a bit about the role of who you’re working with, communication style, and some terminology (i.e. rapid prototyping, Kanban, WYSIWYG) can go a long way. If you’d appreciate it – so would they.

Your workflow will thank you later and you’ll be surprised just how much you can learn if you sit back and listen!

An often overlooked piece of advice in the communication category is context and delivery. Newsflash: perception is reality. The way someone perceives what you say or write is their reality. Additionally, many of us now work in a multidisciplinary and multinational team. Getting feedback from someone whose first language is not the one they’re giving feedback in can cause things to sound harsher than they intended. If you’re unsure, just ask for clarification instead of letting a petty frustration fester. Remember that they’re reading your critiques about them in your native language and may also be experiencing the very same problem. (See Q-TIP below)

3. Support constructive feedback within your web design and development team

Constructive criticism or feedback is sometimes tricky. Different perspectives can sometimes clash in the workspace and it’s easy to take things personally sometimes, especially when you’ve poured your blood, sweat, and tears into a project.

A few things to remember during this process. Building empathy is actually really easy. Feedback can be given in many ways but think of how you feel when someone informs you that they’re displeased with your work; do you like hearing your work is trash or would you rather hear “this is good but we’re aiming more for this”?

Nobody has time for endless feedback loops. Huge time suck.

The longer you wait to provide feedback, the more work gets done past that problem point which means the harder it’s going to be to go back and fix an issue that’s now become deeply embedded. What could’ve been a quick convo and a simple fix creates a domino effect and an ever-increasing torrent of issues that need to be undone.

So remember this acronym. Q-TIP. Quit taking it personally. Remember it isn’t actually about you. You’re doing a job. The project is the star here and it takes priority. If you’re looking for recognition – peep yourself in the mirror.

4. Encourage co-creation between website designers and developers

Circling back to communication – if you’re unsure of something, if a font may or may not work, if adding a button can help navigation, etc., there’s a fantastic way to get that info. An elusive trade secret known only to experts in the field: Ask!

When in doubt it’s best to just ask your counterpart before you’re knee-deep in deadlines. You may even have a whole team from which to solicit advice or instruction, so use your resources.

You’ll find throughout your project, consistency is key. That doesn’t mean being strict and rigid like a Prefect from Gryffindor; it just means staying on the same page, keeping your eyes on the prize and adhering to the set expectations as mentioned back in tip number 1.

If you’ve ever worked with (or even dated) a person who says one thing but does another or never sticks to the plan – your time estimation, workflow, and whole groove go right out the window because you’re dealing with constant audibles and the discussions that come with them as well as the last minute changes that force you to ditch work you’ve put a lot of effort into.

Improvising when you should be sticking to the script is a time killer and bank-breaker. Working together, collaboratively, really is the simplest way to get to the end-goal efficiently.

This explains why learning something about the role of who you’re working with and their work process can really come in handy. If you’ve set the expectations, made plans, and abided by them, you can skip a lot of unpleasant conversations about doing work multiple times.

5. Integrate the web design and development process

A common issue between the two roles is going from the design process to the development phase. Luckily there’s a plethora of solutions to choose from to assist that don’t involve a whiteboard and sticky notes.

Apps that facilitate and streamline the design and development process are going to be your new best friends. Keeping things in as few places as possible makes it easy to organize and manage, which means faster and better results. If you can do a lot of steps in your role on a limited number of platforms and your other half can collaborate with you in the same place; you’re golden.

It may take a bit of searching through an app’s Help Desk/Knowledge Base but integrations are lifesavers. If you can’t whittle down the amount of apps or platforms to do the job, you can make everything easier to manage by linking them together through integrations. You may also find that since you’re working with a developer (or you are the developer) that using an API can tackle this.

Fewer app interfaces mean less dead ends, greater convenience, faster and more effective communication, and potentially even higher quality work.

Did you know: Slickplan is the perfect place to upload, share, and present your design mockups!

6. Streamline the designer and development revision procedures

There will be disagreements. That’s the nature of the beast.

However, as a reminder, you share common goals, and getting it done quickly and correctly helps all parties involved. You’re all after the same things; website design with great aesthetics, flawlessly functioning code, and making whomever you’re working for glad they found you for the job. Revision procedures are what get you there.

Naturally, speaking directly to your partner in crime is best so as to avoid any confusion and provide instant results but it isn’t always possible. This is exactly why you did all of that brainstorming upfront, why you set clear expectations, implemented best practices on how to proceed after each step, and how to effectively communicate thoughts and feedback.

You’ve done all that right?

Because simply taking advantage of tips 1-5 should dramatically cut down revisions and streamline the process for making them. This can include updates to developer and design sprints in Jira, communication through commenting or connecting within apps like Slack or Google Workspace (formerly G Suite). Does your other half like getting a lot of feedback at once? One item at a time? Do they need you to be very direct or provide detailed information? With the proper revision tools decided upon during the initial planning phases, you’ll be revising things with ease and with as few pain points as possible.

7. Give designers and developers collaborative tools

The list of collaborative tools could go on for days so we’ll spare you the tedium of reading up on all of them and share some of our favorites.

You can get your communication off to a great start by using Slack and Zoom. Slack itself has tons of integrations and many apps have reciprocal Slack integrations. Zoom naturally makes the list because of its video features but also due to screen sharing (remember Skype…lol). Sometimes a written explanation just isn’t enough and it really helps to share your screen directly. For these reasons, they top the list in that arena.

Facebook, LinkedIn, Twitter, WhatsApp, etc are NOT ideal ways to communicate important work items. Sure you can have group chats but since these apps don’t integrate with your work-related platforms, info can easily be lost and with limited functionality it’s difficult to be precise with what you’re referencing.

Designing and sharing your work with developers is rendered almost effortless using tools like InVision or Figma , a terrific way to bridge the gap and ease the handoff. Figma in particular was built from the ground up with this very handoff in mind. But it doesn’t stop there – the team continues to communicate and work together so things get done right the first time. You’ll have access to design systems, prototyping, live collaborating and a host of other functions.

Whether you’re creating an app for iOS or Android, a website or web app, or anything in between, two items that come highly recommended are Jira and Trello. You likely only need one and which you choose depends on your project needs. Jira is the heavyweight champion in this department for developers and larger-scale projects, offering support for agile and scrum techniques and more extensions, add-ons and integrations than you could shake a stick at.

Trello is no slouch though. Perhaps you work better with Kanban boards or Jira is just too much to deal with. Far more straightforward but still carrying plenty of functionality to be useful to the team, Trello is great for apps, websites, writing projects, marketing and more. It’s so intuitive that you could actually plan out your weekend chores or a vacation with it.