Launching a successful product most likely has a foundation of people that have worked hard behind the scenes – this includes designers and developers. A well-organized and deliberate handoff from designer to developer can smooth out any potential kinks that would have arisen during the execution process due to an incomplete handoff.
If practiced, the following should be beneficial to your team when planning the next phase of your project.
Mockups
File naming structure that doesn’t use versions within the name. The name should describe the function of the screen. This is so it is easier to to distinguish the actions of the screens and reference within handoff documents. Use consistent casing when naming screens (Camel-Case, Lowercase, Title-Case, etc.).
Interactions/Features
Figure out flow through:
Use a prototyping tool, or make comments to the static screen, to show the view’s interaction. Link pages together using hotspots. Linking pages enables the viewer to get a better idea of how the screens will flow.
Utilize your time wisely:
Assuming budget is always a factor when planning projects; time is of the essence. Only provide mockup interactions to only the pages that need the most love. It isn’t beneficial to spend time on interactions that already exist. The rest can have static pages with comments. Discuss with the developer what is feasible and what is going to be the most conducive to budget.
Copy
Include in the documentation a three-column table that shows title and subtitle – things that cannot be featured in design or Design Mockup. Listing on a cloud-based tool like Google Sheets makes updating and collaboration easy.
Group the copy by their corresponding screen names, i.e. “Homepage”, “About Us” etc.
Organize the copy by labeling them by their type. Listing the copy type lets the developer know certain situations the type is in, such as error-state copy or alerts.
Adequate effort should be spent on copy writing, whether you hire out a copywriter or take on the task within a team. Copy should be hashed out before sharing with developers.
Specs
Use tools like Sketch Plugin “Sketch Measure”, and Invision’s “Inspect”. Layers in artwork must be properly grouped in order to view specs correctly.
Create tickets in task software such as Jira if there are any developer discrepancies found during design reviews.
Let the developer know which grid system or UI build tools you are using. Bootstrap’s 12-column grid is a common build used because of the column versatility.
Checklist
Nothing is worse than scrambling after a missing a piece of design. This can seriously put a wrench in the gears and create panic. To alleviate this, the designer should create and manage a list of all the cases & features that need to be developed.
The checklist created as a simple list or through tickets in Jira provides the status that a feature is being developed or in the process of being developed, or whether it’s too completed to be executed. Ideally the completed rows should link to the corresponding page in the prototype.
If there any changes regarding a certain feature or that feature is moved to the next sprint/version, then the feature should be marked with a comment or the task should be moved to the next sprint/version
Designers spend a large amount of effort and care for their work, so one could only assume that developers feel the same about theirs. Keeping the design handoff document simple and effortless to comprehend, allows the developer to focus on their own tasks rather than doing the designer’s job. Good collaboration can make a happier and more harmonious workplace.