In this class, you will learn how to rapidly wireframe and rapidly prototype a mobile app using Balsamiq and Adobe XD.
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 also Adobe XD to wireframe and prototype, as well as 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 and Adobe XD software, why wireframing is important, and go over the tools, basic concepts, and terminology of Balsamiq and Adobe XD. 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.
The course will be constantly updated with new content, thereby making this a long term high-value purchase, that will accelerate your ambition.
I can’t wait to see you in class and start wireframing and prototyping together! 🙂
Understanding Wireframing and Prototyping
How to Make Wireframes in Balsamiq
How to Make Wireframes in Adobe XD
-
4About Balsamiq
-
5The Navigator Panel And Canvas
-
6The UI Library and Properties Panel
-
7The Balsamiq Toolbar
-
8Let's Start Wireframing
-
9Wireframing the Create an Account screen
-
10Wireframing the Profile Setup screen
-
11Wireframing the List of Workouts screen
-
12Wireframing the Workout Details screen
-
13Wireframing the Workout Video screen
-
14Linking the Wireframes and Presentation
-
15Creating a PDF Prototype and Presentation
Final Thoughts
-
16About the Project in Adobe XD
-
17Personas and User Flow
-
18Overview of Adobe XD
-
19Wireframing the Create an Account screen
-
20Wireframing the Profile Setup screen
-
21Wireframing the List of Workouts screen
-
22Wireframing the Workout Details screen
-
23Wireframing the Workout Video screen
-
24Prototype Presentation in Adobe XD