Developer vs. designer 

Designers and developers come from very different backgrounds, with diverse mindsets and skills. Creative people tend to be more interested in the visual aspects of the product, such as the content hierarchy, colors, typography, and interactions. Meanwhile, the people working with code pay more attention to functionality, performance, and optimization.  

While both designers and developers are working on the same product, they often look at the work from different perspectives, and, more often than not, the two are working on the same project at the different phases of the production. Designers, have you ever crafted design to perfection only for a developer to throw away half of your precious pixels? Developers, have received a design that is so hard to implement that it makes you want to tear your hair out?   

Inevitably, miscommunication, misalignment of the desired (and actual) results, unnecessary conversations developer's roles and responsibilities, the design outlook, etc. arise. Not only is the disconnect time-consuming and frustrating, but misalignment can also wreak havoc on production and drive up costs. It is important to remember that everyone on a project has the same purpose: the happiness of the user. In this article, I'll share six steps to enhance the relationship between developers and designers. 

1. Set up a clear communication plan. 

Establishing healthy relationships and communication channels between the creative and development teams from the beginning is an absolute necessity. Designers and developers conduct their work at different stages in the project's timeline. The timing may vary from project to project as to when the designer delivers work to developers. Sometimes all of the designs are ready before development starts. Other times, for a feature-based project, the designs come in batches during development. Developers need to have designs in order to start coding and bring them to life. 

It doesn't matter if there are one or multiple touchpoints between creative and technology teams during the product creation process. Both teams are essential and need to be involved in the overall process. Regardless of when actively working on the production, both designers and developers are working towards the same end goal of creating a successful product.  

The two are intertwined and need to work collaboratively with one another to succeed. Regular and constant communication between the two teams will not only improve mutual understanding, it will also benefit the creative process and the technological advancements in the field while creating blueprints and designs. Establishing proper communication channels is also in the interest of the "technician" of the project. The person will be more than happy to share knowledge because it's going to make life easier for everybody. 

2. Get to know your team. 

There are several ways to build a strong designer-developer relationship. One of the best (and most fun) ways is getting to know one another on a personal level. Chat outside of meetings and office walls. Have lunch together, or grab a cup of coffee. Set up team-building events and activities.  

Another good way to close the gap between the two specialties is to attend each other's meetings to better understand what the other specialist does, needs, or the issues inherent in their practice. Shared insights will strengthen the team’s collective knowledge and make the product more robust. In addition, the team will likely spend less time (and clients spend less money) addressing small obstacles as both specialties have a sense of how to best tackle the issues at hand.  

A big part of creating a healthy relationship lands on the team’s project leads. Usually, they know their team members best, understanding their technical skills and knowing their personalities. Based on that, they can gather a team of people who fit well together, that way ensuring a good micro-climate from the beginning of the project. 

3. Learn about each discipline. 

It is important for a developer to understand how the designer thinks. It's equally important for the designer to understand a developer's workflow. By learning more about each other's work, the two begin to understand the reasons behind the decisions one another makes.  

There are plenty of articles saying that designers should learn how to code and rightly so, especially if they want to improve their designs. By learning about the basic principles and limitations of coding, designers then know the technology's limitations and reflect that in their designs. Designers should know just enough to ensure their designs are ready to be worked on by developers with as little technical feedback as possible.  

While the idea of developers learning about design sounds unrealistic and, from personal experience, isn't particularly popular, it is beneficial. By understanding the fundamentals of design, developers will be able to see the products in a broader scope, and the functionality will make much more sense. It will be easier to brainstorm and plan for features and their integration. Usually, there is a big gap between technology and the end user, including developers in design processes. With a shared understanding of one another’s disciplines, the disconnect and potential risks associated reduce. 

4. Gather and share feedback. 

Designers and developers need to share information with one another. It’s unproductive if creatives collect the data from user case studies and withhold the feedback until the end of the designing stage from developers. Designers should invite the development team to the user case study meetings and hold constant in-progress prototype sharing meetings in addition to design presentations. A developer’s feedback and insights are crucial for the success of any project. 

Consider the feedback from the technology's perspective. Having technology on the side during the design process can minimize the risk of creating concepts that can't be delivered as initially envisioned. Ask questions to enhance the design-development dialogue. 

• What asset management strategy will be used? 
• What naming convention for components will be used? 
• What are the development or design limitations based on platform, browser, etc.?  
• What kind of grid will be used? 

The insights gained will help inform the production from the very beginning. When expectations are aligned, productivity and efficiency will be improved. This constant feedback will result in products that are better thought through. 

5. Select and configure tools for a seamless handoff. 

Both the creative and technology teams should sit down and discuss which tools work best for their needs. There are plenty of options to choose from like Avocode, Invision, and Zeplin. Even though these tools are fundamentally serving the same purpose, the interfaces, features, and some other details may differ, making one tool more suitable than the others. 

The design team is tasked with preparing the designs and handing them off to the developers via the chosen tool. While this step sounds easy, there are some caveats that require attention. Designers and developers need to partner with one another to establish clear requirements. Adhering to requirements for asset management, naming the files, deleting all unused layers, guides in design files, grouping layers based on components, and naming conventions will save hours of work during the development.  

6. Document and update guidelines regularly.  

Developers need proper documentation or a style guide to reference while coding the design. It is important to emphasize treating these assets as living documents that need to be adjusted over the course of the project. Problems may arise. Requirements may change. Unexpected changes may occur. Updating the documentation continually saves time and prevents the need to chase down aspects of design and the build to reference for rework. 

When coding, developers turn to designers for input during development. By keeping an eye on how designs come to life, designers provide valuable feedback for coders. For example,  a designer spots a problem or two during the initial build. Their input helps developers address the issues before moving to quality assurance, saving time, and preventing the need for back and forth communication about asynchronous code and design. Of course, it's possible that even with designer input, there will be a need for coders to make some adjustments regardless of the design is implemented perfectly. (New ideas for the creative team may spark from seeing an implemented version of their design.) 

Build better products together 

Having well-established collaboration and communication practices between creative and technology departments throughout all stages of product creation improves productivity and efficiency, while also saving time and money. Building strong team relationships makes for a better work environment with the entire process running smoothly. A shared understanding empowers the team to make great things together and ultimately deliver a better product.