UX documentation is all about tracking the specific details of your design to make sure implementation occurs smoothly. After all the rounds of design iterations, research, and critique, it’s important not to neglect this important transition from design to functioning code.
Here’s how to structure your lightweight design spec and make sure the final outcome is as polished as you imagined it!
Components of UX Documentation
What do developers need in order to implement your designs? This can depend on your working relationship, and the complexity of your project. Either way, know that a design contains multiple layers of information so it’s better to over-communicate than to leave things open to interpretation.
- Design Mockups: showing style specifications such as redlines for positioning, color, palette, typeface.
- Interactions: showing how it works, either through a flow or clickthrough.
- Additional specs: anything that may be missing from the previous categories. This can include dependencies on other teams, any items that may change in the near future, or specific implementation details.
- Assets: resources used in the design, such as icons, optimized images/audio/video, copy, etc.
Tools
Nowadays, there are several design tools that have specs built in, either as integrations or as part of the workflow. Check them out to see which works best for your team.
Figma
Similar to InvisionApp, in that there is a view that gives developers the ability to inspect, copy, and export design assets. A web-based tool that includes the ability to create websites, mobile apps and collaborate in real time with teammates.
Adobe XD
Now Free. An all-in-one UX/UI solution for designing websites, mobile apps, and more. Generates an external link for specs, includes password protection feature.
InvisionApp
Product design, workflow and collaboration platform. Includes Inspect mode to generate measurements, colors, and design assets a breeze. Browse and access screen dimensions—including position, palette, typeface, fonts, code, asset preview, asset download function.
Zeplin
Design handoff tool, with integrations to Slack and Sketch (Mac only) to make your collaboration with developers easier. Also, you can export your design files from Figma, Photoshop, or XD directly into Zeplin. Commenting features are helpful and on the same page as the actual specs.
Learn More About UX Tools
- uxtools.co: an informative design tool comparison site
- A checklist for design handoffs by InvisionApp
By
