Top 7 Things Designers Can Do to Ensure Success When Collaborating with Developers

Master the art of the design-to-development handoff. Here are the top 7 things designers can do to ensure success when collaborating with developers.

The design-to-development handoff represents a critical juncture in any project. If your handoff process is smooth, the implementation will go smoothly.

So, how do you make sure yours goes as smoothly as possible, ensuring your designs achieve pixel-by-pixel perfection in the final implementation?

It’s all about communication. When the design and development teams are aligned, it simply becomes a matter of taking the designs from idea to reality. But, a lot can get lost in the handoff process that ends up causing problems later.

Here’s the good news: As the designer, you are in the driver’s seat. You have total control and the ability to present your designs in a way that your developers can understand them, and implement them accordingly.

But, as we all know, developers have their own way of approaching a project. To help you out, we’ve shared our top tips for designers who want to make things easier for their developers, and ensure they build to spec. These all come from our own experience serving as a development partner to agencies for the past decade plus.

1. Responsive Best Practices

By this point, most web designers are pretty well versed in responsive design. But if you come from a print design background, or you’ve never designed a website experience that adapts to desktop, tablets, and mobile devices, it can be tricker than you think.

The good thing is that if you haven’t mastered responsive design yet, there are lots of resources and code frameworks you can use to familiarize yourself with this new approach to design.

That said, these days it’s not generally considered acceptable to only hand off desktop designs to your developers, and expect them to figure out the mobile and tablet look and feel on their own. Google won’t even rank a website if they don’t consider it “mobile-friendly”, so it is vital that you as the designer are taking charge, thinking through and designing every aspect of a website experience, on every device.

Whether or not you’re well versed with responsive design, your developers should be. The right development team will know how to implement a website according to responsive best practices and can be a fantastic resource to brainstorm ideas and get guidance. If you’re not feeling 100% confident about whether something meets responsive design principles, ask your developers.

2. Animations

Good designers have a unique gift for creating compelling visual imagery. Often these take the form of static images. But responsive sites commonly include animations that make transitions from one state to another more exciting.

There are typically multiple animation options for any piece of functionality. Some are more appropriate for a particular design than others. As a designer, you’re definitely going to have an opinion, so you should make your thoughts known to your developers from the get go.

Again, if you’re not 100% familiar with all of the animation options you have to choose from, your developers should be. Ask them for guidance and examples, but make sure you’re making the final decision here too.

3. Modularity and Reusability

One of the best ways to help your client create economies of scale and get the most value out of your DXP is to focus on modularity and module reusability when redesigning their site.

For example, from a design perspective, a testimonial gallery serves a different function than a carousel of blog articles. However, from a development perspective, they function the same way. Both may have a similar outline, and include header text, an image, a small paragraph, and then a CTA Button or link. The developers can code these as a single module, even though it will be used differently across the website.

From the very first wireframes, keep an open line of communication with your developers about how you can tweak the designs and they can architect the code for maximum flexibility.

4. Accessibility

At least 2.2 billion people around the world have some form of visual impairment. Depending on the client’s line of business, it would be wise to ensure that their websites serve the needs of all their potential customers. Furthermore, failure to adhere to ADA accessibility guidelines may lead to lawsuits for your client, especially if they have physical locations.

To give you a sense of what is involved in making a website ADA compliant, here are just a few of the guidelines you must follow:

• Add subtitles to all videos. Provide developers with a closed caption file to upload along with any video content.

• Include alt text for all key images. Screen readers read image alt text out loud for blind website visitors. Include alt text for all important or contextual images.

• Ensure that color themes all have the proper contrast ratios. This makes the site easier to navigate for those who are color blind.

This is by no means an exhaustive list. You can view the full Website Accessibility Guidelines on the ADA website. As always, we recommend working with an expert like Allyant to ensure you’re following best practices.

5. Images

Nothing bogs down a website more than heavy images. It may have a beautiful design, but your client won’t be happy if it loads slowly.

During design, consider the optimal sizes and formats for each of the images that go into the final deliverable: icons, hero images, featured images, small testimonial headshots, and so on. Provide your developers with images that have already been exported to the right format and the smallest maximum size possible.

Also, confirm that your developers plan to make use of an automatic image optimizer like Dianoga. These tools help prevent unskilled content managers from creating performance problems after the site is launched. Lastly, if you’re designing a site for a geographically dispersed audience, then be sure to discuss with your developers whether a CDN could help ensure optimal performance.

6. Design Tools

There are lots of great tools that enable great responsive design and facilitate the designer-to-developer handoff process. Sketch, Figma, and Adobe XD seem to be the industry standard these days.

These three have done the best job at catering to both designers and developers during a web design project. They have all the features designers need, and all the export options that make it easier for developers to translate those designs into code.

These tools provide settings that cater to building prototypes for a variety of screen sizes and devices. They are vector-based, meaning your graphics and icon assets can be sized up or down without losing quality or sharpness.

Some also contain asset export settings, making it effortless to extract images and icons for each screen size. Delivering exported assets in the right specifications will help the development team build the user interface more accurately.

Some programs, like AdobeXD and Figma, even have built-in collaboration features where you can work in tandem with other designers on your team, or pass off a mockup to a client for feedback.

Having the right design tool can help speed up wireframing and prototyping, allowing you to set up style guides, reuse UI components, and design for every screen size.

7. Annotation

Design annotations should always be included in your development handoff. This makes the development team’s job much easier, and they can focus on writing good code rather than trying to translate your design into CSS.

It is difficult to convey user interaction cues like hover states and animations from a flat image. Including notes that describe the intended outcome gives your development team an understanding of how the final product should look and act. This removes the guesswork for developers and ensures your design will be built exactly as you envisioned it.

Design collaboration tools like Zeplin and InVision help designers automate this process by identifying attributes like typography, color palette, and the dimensions of your design when you export your file for handoff. Programs like Figma and AdobeXD come with their own export features for collaboration.

Some tools can even translate those attributes into CSS properties that developers can directly use. No logic or JavaScript is exported, though, so be sure to annotate any intended conditional or user interaction states in a separate document for your developers.

8. Consistency

Maintaining consistency helps everyone: designers, developers, and users. Keeping UI elements and behavior consistent across sections and pages makes the experience easier and more predictable for users while allowing designers and developers to templatize and reuse components. Reusing components saves time which translates into reducing costs during design and development.

9. Iconography

Icon sets can be a great tool for designers, but when deployed to a website as an external library, care must be taken to ensure they don’t cause performance problems. You may only be using a few icons from a large icon library, but we’ve often seen the site slow down because it has to load the whole library. Be sure to have a conversation with your dev team about which library you’re using and if it’s worth it. Depending on how many icons you’re using, it may make sense to find alternatives such as using SVG files instead.

10. Communication

And last, but not least, communication between the design and development teams can prevent a lot of headaches throughout the buildout. It’s very good practice for the design team to seek feedback from the development team in order to evaluate the feasibility of their ideas and to evaluate the effort vs. the value generated. This collaboration can prevent unnecessary delays and cost overruns. As the well-known Ben Franklin quote goes, “By failing to prepare, you are preparing to fail.” And not communicating greatly increases your chances of failure.

Let Oshyn Be Your Development Partner

At Oshyn, we understand how important design is to the success of a website and what a specialized skill set it requires, so we leave it to the experts: designers like you.

We focus on the development and making sure that all the functionality you’ve dreamt up is possible through the power of your chosen DXP. If you’re looking for a new Sitecore, Adobe, or Optimizely development partner, contact us.

The original version of this page was published at:  https://www.oshyn.com/blog/design-to-development-handoff