Read Time: 10 Minutes
The design-to-development handoff represents a critical juncture in any project. If your handoff process is smooth, the implementation will go smooth.
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 Sitecore 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 handoff 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.
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 animations 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 Sitecore 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.
Nearly 300 million 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 Accessible 360 to ensure you’re following best practices.
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
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.
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.
Let Engagency Be Your Development Partner
At Engagency, 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 Sitecore. If you’re looking for a new Sitecore development partner, contact us. We can’t wait to tell you about our Sitecore Agency Enablement services.Download our FREE whitepaper: 5 Things Your Agency Should Consider When Choosing a Sitecore Partner.