Adobe XD Essential Training: Prototype & Share

Adobe XD Essential Training: Prototype & Share

2hBeginner2020-10-05

Authors

Dani Beaumont

Dani Beaumont

Managing innovative apps in the web and design space for 25+ years

Course details

Fixing a fundamental mistake in a web app after it has been released can be costly and time-consuming. In this course—the final installment in a two-part series—learn how to avoid such problems by building a high-fidelity, fully interactive prototype that can help you spot issues early in the design process. Instructor Dani Beaumont, a principal product manager on Adobe XD, shares insider tips for creating, sharing, and revising prototypes effectively for user research and testing projects using Adobe XD. Learn how to add animation and motion to your project with Auto-Animate. Discover how to share your prototype and preview it on a variety of devices. Plus, learn how to share your prototypes with developers via design spec links, where they can get all the info they need, including assets.

Skills covered

WireframingAdobe XDUX DesignUser ExperienceAdobeEssential TrainingWeb Development

Concepts

Introduction

  • Creating prototypes in Adobe XD
  • Prototyping overview
  • About the exercise files

Window Management

  • Desktop Preview app
  • Seting viewport height
  • Fixed position when scrolling

Triggers and Interactions

  • Introducing triggers and interactions
  • Hover interaction
  • Scroll to interaction
  • Overlay transitions
  • Managing wires
  • Preserving scroll position
  • Keyboards and gamepads
  • Auto-Animate introduction
  • Drag gestures
  • Bringing it all together with audio playback
  • Voice triggers with speech playback

Sharing Work with Stakeholders

  • Creating a narrated movie
  • Interacting with a live preview on mobile
  • Exporting image files or PDF
  • Understanding multiple flows
  • Sharing a prototype and security
  • Commenting workflows
  • Usability study

Handoff to the Development Process

  • Handing animations off to After Effects
  • Preparing for the developer handoff
  • Creating a design spec
  • Exploring a design spec as a developer

Conclusion

  • Where to go to from here
80,000 Toman