Making friends with developers (how to set your designs up for success) ??

by Renee Fleck in Process
May 26, 2021

As a UI/UX designer, you know that the success of your digital product relies just as much on the development process as it does on the design. Once you’re finished designing, at least one or more developers will need to write the code that will bring your designs to life. It’s a make-or-break stage of the product design process.

If you want a successful product launch, you’re going to need to work closely with developers to ensure a smooth design handoff.

Learning how to collaborate effectively with your developers will not only result in a quicker turnaround time, but you’ll also position yourself to deliver a great product experience.

Keep reading for 7 best practices when it comes to working with developers and learn how to set your designs up for success:

1. Prevent issues early
2. Use a design system
3. Reduce knowledge gaps
4. Streamline communication
5. Design for edge cases and empty states
6. Clearly define user flows
7. Provide all necessary assets

1. Prevent issues early-on

One of the best ways to ensure a smooth design handoff with developers is to make sure any potential issues are addressed before the handoff.

This can easily be done by involving the development team in the design process early on.

Send your developers early mockups and prototypes so they can point out any potential development issues your designs might present.

By involving developers in the early stages of the design process, you can ensure the files they hand off later on aren’t going to present roadblocks to the finished product.

2. Use a design system

Design systems—collections of reusable patterns for your design—help ensure that your design stays consistent across different pages and platforms. It also makes it easier when you hand off your design to the development team, as it streamlines the amount of coding they need to do—since code can be reused from one page or platform to the next.

Design systems should include UI components like forms and icons, code snippets, design toolkits, and other resources that can be used across the organization.

Once a design system is created, it streamlines the design of any digital product the brand creates and ensures consistency across all of them. You can learn more about how to create a design system from scratch here.

3. Reduce knowledge gaps

Knowledge gaps between you and developers can be a huge hindrance to a successful handoff.

There are big differences in the way designers and developers talk about certain design elements, as well as smaller variations. For example, you might refer to rounded corners in a design while developers would define that as a border-radius.

While in that instance you might be able to figure out what the other is talking about, not all terminology is so easily translated.

By taking some time to learn more about the principles and conventions of the development process (and vice-versa for developers), you can ensure that you’re speaking the same language and on you’re the same page when talking through your designs.

4. Streamline communication

Establishing clear communication methods and standards between you and your developers early on can save a lot of time and headaches in the handoff process. Setting up dedicated channels in apps like Slack for discussing particular projects is a good place to start.

Other options include making sure that you and developers use the same software for viewing designs and consistently use the communication options within those apps (such as comments or chat features).

Ensuring there are clear guidelines for acknowledging communications, assigning tasks, and the like also make communication easier.

5. Design for edge cases and empty states

Designers sometimes overlook edge cases and empty states within apps, but leaving these out can mean that developers will have to come up with solutions that might not be as user-friendly as they could be.

Consider the more extreme potential uses of the product, and create designs for them.

Empty states are a vital aspect of a digital product, especially for new users who often don’t have data populated immediately. They’re a fantastic chance for communication with those users, but if no empty state is defined in the design process, this opportunity will likely be missed.

Edge cases, those instances where a user interacts with a product in more extreme or unexpected ways, are bound to happen eventually with any digital product. This could be anything from an exceptionally long email address to entering a more than expected amount of data.

In any case, consider the more extreme potential uses of the product and create designs for them to hand off to the development team.

6. Clearly define user flows

The individual pages that make up a digital product are important, but the way those pages flow together and how users interact with them is vital information for developers.

Make sure to show developers the typical and atypical user flows and journeys through your product.

Without clearly defined user flows, developers will need to guess how the product actually works and how users will interact with it. While some interactions may be obvious, many others may not be. This typically creates a lot of confusion and unnecessary back and forth between teams.

7. Create a checklist of all necessary assets

Be sure that the handoff materials you compile include all of the assets the development team will need to finish coding the design. That includes all of the parts of the design system, all of the design files, as well as user flows, animations, and any interactive prototypes.

Including a checklist of assets is a great way to streamline this process even further as missing assets will create headaches for the development team and only slow down the entire project.

Don’t forget to schedule a handoff meeting

The best way to ensure a smooth design handoff is to have a handoff meeting with all involved parties. Take this time to go over the design assets, ensure that nothing is missing, and answer any questions.

In the event that something is missing, it can be identified immediately so that it isn’t discovered mid-way through the development process when it could limit progress or create unnecessary work. Follow these tips to set your designs up for success and have a smooth, successful product launch. ■

About the Author — Cameron Chapman: Editor. Blogger. Author. Designer. Copywriter. Marketer. Entrepreneur. Speaker. Consultant. Coach. I wear a lot of hats. What most of them have in common, though, is storytelling.