Prototyping in Software#

Note. LinkedIn Learning resources are in the process of being replaced.

In this lesson we go through the process of taking all your UI design work and linking them up as a basic click-through prototype that can be used for usability testing. You’ll learn how to use the inbuilt prototyping tools and how to share a prototype.

• Adobe XD
  • Follow the videos in chapters 4, 5, and 8 from Adobe XD LinkedIn Learning course: https://www.linkedin.com/learning/learning-adobe-xd-2020/home-screen
  • Get Started with Adobe XD: Prototype: https://www.adobe.com/au/products/xd/learn/get-started-xd-prototype.html
  • Get Started with Adobe XD: Collaboration: https://www.adobe.com/au/products/xd/learn/get-started-xd-collaboration.html
• Figma
  • Follow the videos in chapter 5 from the Figma LinkedIn Learning course: https://www.linkedin.com/learning/figma-essential-training-the-basics/the-basics-of-figma
  • Follow the videos in chapter 2 from the Figma Prototyping LinkedIn Learning course.
  • Build prototypes with Figma: https://help.figma.com/hc/en-us/sections/4403936156695-Build-prototypes

Task#

Follow along with the videos above to learn how to prototype a design. For this task you can either:

• Reuse a previous prototype/design you have been working on (you should have at least 3 screens for this task), or
• Create a new one by replicating 3 screens from the Coles, Woolworths, Spotify, or Ikea apps.

Recreate as many of the interactions in the interface as you can, these include tap/click events such as hover, click, drag, scrolling, gestures, and internal interactions like opening a drop-down menu or a pull-out menu.

Submission: You will need to use the in-built sharing function in your prototyping software to share a URL of your prototype for testing. Provide this link as submission for this task. Upload to forums if required.