8 Tips On Bridging The Gap Between Design & Development
This story was originally published on http://www.queblesolutions.com
Developers and designers have very different roles in the creation of a product. Designers are typically preoccupied with things like graphics and interface features such as the placement of menus and color schemes. Developers take care of the behind-the-scenes stuff that makes a product work — usually a lot of things involving code. So, it’s not unusual to have a disconnect between designers and developers, sometimes to the point where the only exchange of information that occurs is when the design files are sent over to the development team. This divide may happen because the two sides are working in departments at opposite ends of a building, or even in different cities if work is being done remotely. No matter what’s causing the separation between designers and developers, bridging the gap can result in a more cohesively designed and developed product.
What We’ve Got Here Is Failure To Communicate…
A failure to communicate can lead to a lot of misunderstandings and even different interpretations of the same general goals. Part of the reason for this is because designers and developers often have very different ways of solving problems. For instance, the creator of an app may set apparent guidelines for what they expect from a finished product and what they want users to get from their experience using it. The design department may come up with a way to transform this vision into a beautiful reality. However, when the development team gets the files for the prototype, those impressive design features may require a lot more coding work than what was anticipated, which could make it more difficult — or impossible — to get the product done by the planned launch date. Communication issues can result in numerous problems, including:
• Unnecessary multiple feedback loop between designers and developers
• Unexpected quality assurance issues, or QA issues that are more time-consuming than anticipated
• An inability to leverage overlapping skills
• A failure to properly take advantage of new tools that would likely make collaboration easier
Now, let’s talk solutions! Here’s a closer look at what specifically can be done to bridge the designer-developer gap to eliminate some of these communication issues.
Get Developers Involved Early
Designers usually do their thing first and then pass their initial product design over to the developers. One way to minimize the gap between designers and developers is to bring developers into the mix when designers are just getting started. This doesn’t mean developers should hover and become a distraction. What you can do, however, is make your developers a part of early steps such as:
• Including developers in conference calls with clients
• Seeking insights from developers on how design elements would likely translate to a web application
• Running initial design ideas past developers so any potential (or anticipated) issues with code can be identified when it’s easier to make design adjustments
Orchestrate the Hand Off from Designers to Developers
When it comes time for designers to pass their initial Photoshop creations or sketches over to developers, make the process as organized, orderly, and comprehensive as possible. Doing so will minimize potential issues when developers convert those designs into HTML. Make the handoff as planned and productive as possible by:
• Properly organizing design files: Clearly, label every layer and group layers based on page sections so developers won’t have to do as much as this work on their end before getting started. Color-coding interactive elements (hover states, click states, etc.) can be equally helpful.
• Going over designs with developers: After the handoff, contact developers to go over the designs. This allows finer details to be clarified and explained, and developers will be able to ask any initial questions they may have before they get started.
• Encouraging responsive thinking: Designs should be as responsive to whatever screen will be used to view the finished product or website as possible. With many designs, this means adopting a responsive design that can be usable on both mobile devices and PCs.
If you are enjoying this article, make sure to clap 👏👏👏 so that others can discover this amazing story too!
Be Just as Prepared with the Developer Hand Off
The handoff with developers is typical to the quality assurance team. The potential problem here is that unexpected issues may be discovered, such as having the design and the webpage not being identical, that can require some tinkering on both the designer and developer end from things. Even minor issues like images not being aligned correctly can slow things down during the QA phase. Avoid or minimize potential problems with developer’s hand off to QA by:
• Using full page screen captures: There are plenty of plugins that can be used to obtain full page captions. It’s an extra step that can make it easier for developers to spot potential discrepancies or issues before the handoff.
• Adding notes to designs: Sketch is one of several useful annotation tools that can be used by developers to identify discrepancies with specific visual references and accompanying notes (QAers will appreciate this).
Streamline Communication Efforts
It’s not usual for designers and developers to have different preferred methods of communication. You could have a group of younger designers who like to text project updates while you might have some developers who prefer to shoot off email updates at the end of each day.
The problem with multiple forms of communication going on at the same time is that some messages may be missed and some key players may be unintentionally left out of the loops. Streamline communication efforts for your designers and developers by:
• Having a dedicated channel (Slack is a useful tool for setting this up) so files and screenshots can be shared
• Establishing guidelines for communication (e.g., email updates must be shared with everyone at the beginning or end of each workday)
• Using Google Drive or similar tools to share info
• Setting up regular group meetings with all team members throughout the project
Boost Knowledge Overlaps
In some cases, a gap is created between designers and developers over a lack of understanding of what’s involved with each process. Designers may have ideas they think can be easily formed that involve a lot of complicated coding. Conversely, developers may not understand why just because something is technically possible it might not translate well into a good design for users.
Increase knowledge among both groups by encouraging the sharing of basic concepts and skills. For instance, provide some resources for your designers on the basics of coding so they have a better idea of whether or not their thoughts can be easily translated into workable code.
Help increase your developers’ knowledge of design by sharing info with them (maybe in the form of tutorials or other material you find online) on the basics of design and how graphic design elements are used. Increased mutual knowledge can also minimize misunderstandings and encourage more communication among team players.
Mix Things Up with Your Teams
Put everyone together which is working on a product instead of having everyone off doing their own thing with their fellow designers or developers. If possible, physically put team members working on the same function together in the same space. Maybe even encourage them to share lunch times so everyone will feel comfortable working together. If you have designers and developers in different physical locations, use dedicated communication channels to set up virtual team meetings so concerns can be discussed and ideas can be shared as work progresses.
Exchange Info On Trends
Designers and developers have a natural inclination to be mindful of what’s trending within their particular specialty. Encourage your designers and developers to share any interesting articles they may find with everyone involved with the project. There may be some interesting new trends with design or implementation methods that could result in a better user experience if incorporated into your product or your product’s website.Without the right development, design becomes useless. And without the proper design, development becomes unstable. Designers are inherently user-oriented. Therefore, they tend to think regarding how a product’s design will affect its users. Developers are solution-oriented people. The key to building a successful product that intended users will want to use is to understand the limitations and frame of mind of everyone who has a role in creating it. You may not be able to change how designers and developers approach problems. But what you can do is take steps to maintain a steady flow of communication to keep everyone on the same page, boost mutual knowledge of design and development, encourage the exchange of new ideas and insights, and even put team members together in the same physical space. What you’ll likely end up with is a more cohesively designed and developed product or website.
