Prototyping Software Basics#

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

In this lesson we go through the basics of using prototyping software (Adobe XD or Figma) to turn our pen and paper sketches into digital wireframes. You’ll learn about the various elements that make up a digital prototype file and how to use the drawing tools to add shapes, text, and images to your layouts. Follow the links for your software of choice and complete the task below.

• Adobe XD
  • Follow the videos in chapter 1, 3, and 4 from Adobe XD LinkedIn Learning course: https://www.linkedin.com/learning/learning-adobe-xd-2020/home-screen
  • Mastering Adobe XD: https://youtube.com/playlist?list=PLuQZzG-z6zBJvcSTgDleHPDyqRUXYkA6c
• Figma
  • Follow the videos in chapters 1, 2, and 3 from the Figma LinkedIn Learning course: https://www.linkedin.com/learning/figma-essential-training-the-basics/the-basics-of-figma
  • Get started with Figma: https://help.figma.com/hc/en-us/sections/360006537574-Get-started
  • Figma for beginners: https://www.youtube.com/watch?v=wvFd-z7jSaA

Task#

Follow the video tutorials provided to understand the software interface, focus on the basics like drawing elements on the screen. Select one of the following apps:

• Ikea
• UberEats
• Instagram
• WhatsApp/WeChat
• Spotify/Apple Music/Youtube Music
• AppStore/PlayStore

For this task you are required to replicate the UI of the mobile app you have selected as practice. Select 1 screen¹ from the app, this can be the home screen or any other part of the app. Try to recreate the interface as best you can. You are designing a static UI and not making it interactive i.e. don’t worry about scrolling or touch/hover effects, just focus on visual design. Copy the interface making each element.

Submission: Take a screenshot of your work showing the UI you have designed and the layers panel in Adobe XD or Figma, the elements you have made should be visible in the layers panel. Upload to forums if required.