Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX
Webdesign

3 Tips for Preparing Better UX Documentation

by
Length:ShortLanguages:

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. 

  1. Design Mockups: showing style specifications such as redlines for positioning, color, palette, typeface. 
  2. Interactions: showing how it works, either through a flow or clickthrough. 
  3. 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. 
  4. 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. 

httpuxtoolscotoolshandoff
uxtools.co/tools/handoff

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.