Learn UX: Wireframing and Prototyping a Mobile App

In this class, you will learn how to rapidly wireframe and rapidly prototype a mobile app using Balsamiq.

My name is Gene Guy, and I’m a Product Designer and Developer. I tailored this class specifically for beginners and intermediate UX Designers who would like to learn how to use Balsamiq and Adobe XD to wireframe and prototype, and level up their UX design skills as demand for UX designers is increasingly on the rise.

After a short introduction, we will discuss the Balsamiq software, why wireframing is important, and go over the tools, basic concepts, and terminology of Balsamiq.  From there, we will discuss Adobe XD and give an overview of the Adobe XD software. After that, we will take what we have learned, and I will walk you through a sample mobile app project that we will wireframe and prototype together.  You will also learn some tips and tricks along the way.

At the end of this course, you’ll have the opportunity to create your own set of wireframes and prototypes based on a mobile app of your choice. You will be able to use this set of wireframes and prototypes as a project in your portfolio.

I can’t wait to see you in class and start wireframing and prototyping together! :) 

• Introduction
• What Is a Wireframe
• Why You Should Wireframe and Prototype
• About Balsamiq
• Navigator Panel and Canvas in Balsamiq
• UI Library Properties Panel in Balsamiq
• Balsamiq Toolbar
• Let's Start Wireframing in Balsamiq
• Wireframing the Create an Account Screen
• Wireframing the Profile Setup Screen
• Wireframing the List of Workouts Screen
• Wireframing the Workout Details Screen
• Wireframing the Workout Video Screen
• Linking and Presentation in Balsamiq
• PDF Prototype Presentation in Balsamiq
• About the Project in Adobe XD
• Personas and User Flow in Adobe XD
• Overview of Adobe XD
• Create an Account Screen in Adobe XD
• Profile Setup Screen in Adobe XD
• List of Workouts Screen in Adobe XD
• Workout Details Screen in Adobe XD
• Workout Video Screen in Adobe XD
• Linking and Presentation in Adobe XD
• Final Thoughts