Learn UX: Wireframing and Prototyping a Mobile App | Gene Guy | Skillshare

Learn UX: Wireframing and Prototyping a Mobile App

Gene Guy, Product Designer/Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 9m)
    • 1. Introduction

      1:03
    • 2. About Balsamiq

      1:30
    • 3. About the Project

      1:01
    • 4. Why Should You Wireframe and Prototype?

      1:56
    • 5. The UI Library and Properties Panel

      4:36
    • 6. The Navigator Panel and the Canvas

      4:59
    • 7. Let's Start Wireframing

      3:29
    • 8. Wireframing the Create an Account Screen

      10:25
    • 9. Wireframing the Profile Setup Screen

      11:10
    • 10. Wireframing the List of Workouts Screen

      8:58
    • 11. Wireframing the Workout Details Screen

      7:02
    • 12. Linking and Presenting the Wireframes

      9:54
    • 13. PDF Prototype Presentation

      2:14
    • 14. Final Thoughts

      0:46

About This Class

In this class you will learn how to rapid wireframe and rapid 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 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 software, why wireframing is important, and go over the tools, basic concepts, and terminology of Balsamiq.  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 prototype based on a mobile app of your choice. You will be able to use this set of wireframes and prototype as a project in your portfolio.

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

Transcripts

1. Introduction: Hello, my name is Gene Guy. I'm a UX and UI Designer. I've been doing UX and UI design for about 15 years now. In this class, I will teach you how to wireframe and prototype with Balsamiq. We will wireframe and prototype an example based off some example UX documents like personas and user flows that I had prepared for the class. I will show you some tips on using Balsamiq and my process of wire framing and prototyping a mobile app. This class is for beginning and intermediate UX designers who would like to learn what you've a level up their wireframing and prototyping skills. By the end of the class, each student will have a completed project that they can showcase in their portfolio. I can't wait to see you in class. So we can start wireframing and prototyping together. 2. About Balsamiq : I've been using Balsamiq for a few years now. It's one of the best tools for rapid wireframing and rapid prototyping. It's easy to learn so you can jump right in and start creating. As you look at the Balsamiq website, you can see how it talks about making wireframes is fast. How it reproduces the experience of sketching on a whiteboard but using a computer. Get honest feedback and iterate sooner and painlessly. It also says, print out your prototypes or run user tests before writing code. This final statement is extremely important in the UX design process. This step allows you to test your product on users before wasting your time writing code for product users can't understand how to use, which will ultimately mean your product will fail. This is what makes Balsamiq so valuable to your design process. The ability to crank up prototypes quickly keeps you from wasting time on bad ideas. Balsamiq is used by a lot of big-name companies, as you can see here. So when you are learning to use Balsamiq and have it as part of your toolkit, you'll be in good company. Balsamiq has three versions. The web app version, the desktop app version, which I'll be using in this course, and the Google Drive add-on version. Each version comes with a 30-day trial. So you can download one of these versions and use it for this course. 3. About the Project : The project we will create in this course, we'll have you create a set of wire-frames, around five, and then take those wire-frames and make a low-fidelity prototype with them. The project can be a mobile app of your choice. I have an example project that I created for this course. During this course, I'll go over the steps that I took to create those wire-frames and that prototype so you can see how I do it. You can use these templates for your project. You don't need any prior experience with the Balsamiq software as I'll go over how to use it throughout this course. The final project is something that you can use in your portfolio to show clients, your design team members, or even your potential employers. When you look at UX design job descriptions, being able to wire-frame and prototype is very often in those descriptions, so this is a skill that will really help you in your current job or if you're looking for that next UX job. 4. Why Should You Wireframe and Prototype?: Why wireframe and prototype? Rapid wireframing and rapid prototyping are important steps in your design process. It allows designers, developers, entrepreneurs to get ideas out quickly. By making wireframes fast, you can throw out the bad ideas and discover the best solutions for your web app or mobile ad. By getting your ideas out there quickly, it gives you the ability to quickly get in front of your users or other members of your team so they can test it. They can see if it works, if it flows correctly, what the pain points may be, things like that. By using Balsamic, it allows you to create sketchy style wireframes and prototypes, which helps you and your users focus the conversation on content and interaction and that details like color scheme, a certain image used instead of another, or the size of buttons and stuff like that. All of that other stuff comes later. The main reason for the wireframes and eventually, low-fidelity prototype from those wireframes is to make sure all of the necessary elements for each screen or page are on there, and how these elements will interact with one another. Low-fidelity keeps the conversation on figuring out the problem and communicating the functional solution. As a UX designer, having the ability to wireframe and prototype really makes you a valuable asset to your team. I've worked with a lot of companies over the years, and all of them always like to have the ability to prototype their product. Having UX designers that can prototype a product, I think is really, really important. 5. The UI Library and Properties Panel: Now let's talk about the UI library and the properties bam. The UI library is a list of all the UI control types that are included, as well as assets, icons and symbols. The library categorizes the controls. You can click on one of the category buttons like all, and see all of the UI controls in the library. Or you can click containers to see all the container UI controls, such as an iPhone, a browser window, an iPad, etc. To add a UI control to the Canvas, you can either drag it onto the Canvas, or double-click it. The UI library also includes your assets that you imported into your project, as well as the symbols as you created for your project. Let's look at a few of the UI controls. By selecting any of the UI controls, it allows me to show you how their properties panel works as well. Let's grab a button control. If I added to the Canvas, it remains selected, and to the right of that on the Dashboard, you'll see the properties for that button chore, and the Properties panel. You can see the position and the size input fields. That allows me to input a new set of numbers, and when I click enter, the button will update. There was a layering section where I can bring the button to the front, bring forwards, send backward, or send it back. There's an auto size section and a color section. The color section allows me to change the background color of the button by clicking this background color icon and selecting in a new color. I can also add an icon to the button. I can search for an icon by typing in what I'm looking for in the Icon Search box, or I can click the Open icon or Library icon to see all the icons available. All of these icons are part of the Font Awesome icon set that comes pre-installed. If a search when Apple logo for example, I'll see it appear, and then I can double-click it so it can be added to my button. Then I can click the Rotate 90 degrees icon if I choose, to rotate the icon within the button. Or I can click the Remove button to delete it completely from the button. Underneath the icon Search box is a slider that allows me to scale the icon from extra small to extra large. There is also a link section, where I can make the button clickable so that it will take me to another mockup. This feature is what allows your set of wireframes to become a clickable prototype. Then there is the menu section, which when I click the Downward arrow, it becomes added to the button. There is also a State section so that I can select the state of the button. I can make it normal, I can make it selected, which we'll turn it blue, I can make it in-focus, which puts a thin line around the button, or I can make a disabled. This gives it the effect of the button being grayed out. Then at the very bottom there is a text section where I can bold, italicize, underline, and change the font size and text alignment. If you have multiple control selected, options for aligning, and distributing those controls is displayed. I also just going through some of these controls, and playing around with their properties to see what each of them do. I'll be going through many of these controls in the next lesson, and I'll show you how I create wireframes. For example, say we want to add a note for the developers when these wireframes get hand it off. We can grab the callout control, and make a note that says something like, "When the user clicks the button, it'll take them to the profile page," as an example. Providing notes throughout your set of wireframes can be very helpful to the other members of your team. By clicking the project info button in the toolbar, the project info Panel Displays, and allows you to define project-wide settings for the project skin, font, link, and selection color. These settings will be applied to all of your wireframes in the project. The Skin section gives you two skins which allow you to work on early ideas using a rough, sketchy look. Then later by clicking wireframe, update them to a crisper, more polished look when they are ready for a presentation. 6. The Navigator Panel and the Canvas: In this lesson we will go over the navigator panel in the canvas. By now you should have downloaded and installed the free trial version of a Balsamiq, if you don't already have it. We can now open up Balsamiq and you will see the dashboard which consist of multiple different areas. To our left, we have the navigator panel. In the top area, we have the toolbar. Just below that, we have the UI library, which has all of the UI controls we can use on our projects. This main large area in the middle is the canvas. This is where we place all of our controls. To the right is the Properties panel. The Navigator panel is where all of our wire-frames or mock-ups will live. When you make a new wire-frame mock-up, it will show up in that area. Let's make a quick mock-up and see how this area works. We will go over the UI controls again later in this course. But let's grab a few controls now so we can get a mock-up to show up in the Navigate area. We have our basic mock-up and as you can see, it shows up in the Navigator panel. If you hover over that mock-up, you will see an arrow in the bottom right up here. If you click that arrow, some options will display which are Rename, Duplicate, Move to Trash and Create an Alternate Version. To rename your wire-frame mock-up, select "Rename", and then a modal window will appear, which has an input field next to the "New name" label. This is where you would type the new name of the mock-up and then click "Rename". The next option is Duplicate. If you click that, it will create a duplicate version of that mock-up. At the end of the name, it adds the text copy to let you know that it is the duplicate. You can also use the keyboard shortcut "Command D" to create a duplicate version. Next, you have, Move to trash. Select which wire-frame mock-up you wish to delete, and select "Move to trash", and that mock-up will be deleted. The last item in the menu is the option to Create an Alternate Version. If you select this option, an ultimate version will be created that will display in the bottom right of the dashboard in the alternate versions section of the Properties panel. These versions will have the name, the official version, which is the original version, and the alternate version, which you can rename to something a bit more memorable instead of the placeholder name, "The initially offer". This deletes it and gets rid of all or alternate versions that you created previously. If you right-click or hover over the alternate version and click the arrow that shows up, you will see options to Rename, Duplicate, Duplicate a New Mock-up, Promote to Official, Merge with Official, and Discard. Selecting renamed as the same thing as we seen before. That can duplicate, duplicates that ultimate version. It will create a duplicate version with a new name but will now create a new mock-up. If you wish to create a new mock-up, you would select the next option which is, "Duplicate New Mock-up". If you click the "Promote to Official", this will make that mock-up become the official version and will make the previous official version the former official version now. If you select, "Merge with Official", it will add that alternate right next to your official version on the screen and then you can add or drag over whatever is in the alternative version over to your official version to update the official version. Lastly, you can select Discard for each alternate version to delete them. Or you can click the arrow on the official version and delete all alternate versions at once. 7. Let's Start Wireframing: Okay, so based on everything we've done so far and previous lessons, let's start making some wire frames. Essentially what I do when I first start out, I like to have some sort of a process before I started sketching out a wire frame. What I made here were a few templates just to give you an idea of my thought process, as I start to create wire frames. The app that I'll be making in this series of quick wire frames, I'll probably make about five of them is a workout app. What I did, was I quickly made a couple of personas. Personas being people who would use the app and why they we use the app, what their goal is for using the app so I can have the user in mind as I'm sketching out ideas. This first persona's name is Jennifer. Her goal is she needs a home workout plan because she doesn't have time to go to the gym. She likes to do body weight exercises and cardio, and she prefers not to use weights when she works out. So this the first persona. Second persona I created was David. Here is his details, he's a sales manager, 44 years old and has an MBA, travels a lot for work and he needs a home workout plan because it doesn't have the time to go to the gym. He likes to do body weight exercises, weights, and cardio. He needs his workouts to be short but high impact because he doesn't have a lot of time for working out. These are my initial two persona's I'll use for this exercise of wire framing and this workout app. You can have access to this template as well. I'll put it in the notes as a downloadable link and you can use this file as a starting point for your project gap. After that, I quickly just created what I think should be on the screen or what the screen should be about the five screens that I'm going to wire frame. This should be creating an account screen. Then after you create your account, you're taken to a screen where you add your info and goals for the profile, for your profile, and select your workout preferences. After that, the next screen will be you pick a workout from a list of workouts. Once you have those list of workouts, you'll be taken to a screen, once you select a workout, you'll be taken to a work out detail screen explaining the workout, and then when you click the video, it'll start to play the video of the workout and then you start working out along with the video. So that just want to get some quick jet down some notes what each screen should have just to align out as I sketch it out. I also did a quick flow so when you first get into the act, you have an account. If yes, you login, I won't I won't create any login screens. This is going to be strictly for people who do not have account that I'll do the wire frames for that flow. So do you have an account? No. You create an account. After you create an account, set up a profile, pick from a list of workouts. You got that workout detail screen. Once you selected a workout, you then view the workout and that's the end of the flow. 8. Wireframing the Create an Account Screen: So let's get started in creating our first screen. The first screen we'll create is the create an account screen. So one of the first things I do when I start creating screens for a mobile app, specifically an iPhone app in Balsamiq is, I want to create my screen size to be the exact same screen size as the iPhone that I'm creating for. So for example, here I want to create, let's grab that iPhone controller first. You can go to iOS, click on iPhone, double-click it to add it to the canvas. Right now it's an iPhone 10. Alt, Control. We want to change that because I want to design this project for an iPhone 8. So we just click iPhone 8 there. Now we want to create a rectangle that will be 375 by 667, which is the resolution of the iPhone 8. So let's go in here and look for a rectangle. Just type in, rect, you see here rectangle comes up, we can double-click that. That'll add it to the screen. Let's change the size of that to 375 by 667. So that is our iPhone 8 resolution right there. I've done this numerous times before, so I know the iPhone should then be 429 by 848. Let's see. So that should fit the rectangle. Let's see. Yep, everything lines up. So we've got our 375 by 667 iPhone rectangle resolution screen and the frame around it. We can create a symbol for this, so we can easily just drag it in if we want to for future wireframes and that sort of thing. So let's just first group it. Grab the iPhone, control, the rectangular control. You can either do Command+G to group it, or you can come up here in the tools and click this icon here to group. Let's just click this this button here to create a group, let's see. It changes colors because now it's grouped. Now, let's name it iPhone 8 rectangle and click, convert to symbol. Our create account screen will first have the logo of our app at the top. So let's just grab an image. Here, let's double-click it and let's bring it down here. That'll be a placeholder for what will eventually be the logo of our app. Then under that, let's create a header for the screen. Let's grab a label. If you type in, label, up here, you see label comes up. Double-click that. Now we can just drag this down. Let's say it should say, create an account. Let's make that a little bigger. Say it's an H1, so it's big there. 24, give it some hierarchy here. Let's say 28. I create an account, and now let's create some input fields underneath it. We can go to forms and search through, or we could use the Quick Add box. I usually use the quick add box quite often when I'm creating my wireframe, so we can put in text Input, double-click it, and it gives us an input box. Let's drag it across. That's our first textbox. Let's create a label for that. Do label again and let's say we want to label here to be, first name. Let's group these so we can move these around also. So Command+G. Let's create a group. There you go. Now we can just duplicate this for the other two text input fields. But we're going to create an e-mail text input field and a password text input field. We can just select this control that we grouped and we can duplicate it either Command+D, or you can just click this up here to duplicate. Here we go, just drag it down. Let's change this label to e-mail. Let's go back out to our home screen here. Let's just duplicate one more and let's call this, password. Let's move these up a little bit and let's call this, password. Click this little home button. Get back out of there. Here we have our logo placeholder, our create an account header, our three sign-up boxes that we want users put their first name, their e-mail, and password. Quick and easy. Simple way for them to create an account. Not a lot of fields for them to have to enter information. Let's get a terms of service. Say we went there. So let's say checkbox. Here it comes up in the quick add. Let's grab that. Add that. We want the terms of service, so once they fill in your information. Let's say click, terms of service. That'll be here in the wireframe and they can check that. Then underneath of that, let's add a button. So they filled out each input box, click terms of service and then they will add a button. Button is here. Double-click, let's add that to the center. Let's make it a little bigger. So you see when you try to line these things up there, that blue line will come here and let you know you have the center. Do the same thing here for the logo placeholder. Let's have our button say create account. Again, this is just a quick wireframe. Language is not final, of course. You creating wireframes language is not final. You'll get to that as you go on through the design process. So for now, it just says create an account. Let's make it a little bigger. Then under that, say the user already has an account, so they don't need to be on the create an account screen, want some language and a link where they can go to the login screen if they entered this screen by accident. We're not going to create a login screen, but we at least have some text and a link for that. Let's say we want text control. Here you go. Just add this down here. Let's say, I already have an account. Let's make this a little smaller here and let's duplicate that. Duplicate and let's say, login. Here. I already have an account. I log in. Let's move this over and we can create an underline here. Let's say we can make it colored to let us know it's a link. We can group these, Command+G. Let's move these over, center it, and there you have it. That's our first screen. For our wireframe set for this project, we have the logo placeholder. We'll eventually add a logo later on in our design process with our team. We have our first-name text input, our e-mail text input, and our password text input. We've got a terms of service checkbox. Using create an account, click the button. If they already have an account, click login, that'll take them to the login screen. The next screen we will create is the set up a profile. Once they create an account, they will then be taken to a set up your profile screen. We'll give some more information they can add, like what gender they are. For our workout app, their height, their weight, and that sort of thing. So let's start to create that screen. 9. Wireframing the Profile Setup Screen: Let's continue all creating our wireframe mockups. Let's create the next screen, which will be the profile setup screen. Let's duplicate our create an account screen, and let's rename our create an account screen from "New Mockup 3" to "Create an Account." Rename. Now our newly created screen, let's get rid of the elements that are on there, and let's start creating the new screen. Let's get a "Label Control," and in our "Create an Account" screen, we had the user put in their first name, so let's add a name here. Once they created an account, then a name shows up, let's say, "Show," and center that. Now we have, let's create some characteristics for him to fill in. Let's create another label. Actually, we can just duplicate this one. Let's make this a little bigger. Let's say, 32 for the font size. Let's say "Gender" here for this label, this will be our radio buttons. Let's make this smaller, let's say 24. Now we want radio buttons. We can go to "Forms," and you can try and see if you can find it as you scroll through, but what I normally do is, I just go to "Quick Add," type in "Radio," and there you have it. That's one, let's duplicate that, because we want two radio buttons, and we want the first radio button to say "Male." Move this over, and the second one will say "Female." Let's put a colon here, and let's group these, so now we can move these all at once. Gender "Male." Let's duplicate that as "Command D," to duplicate, and let's go in here and change this to "Height" for that label, and let's go in here and change these. Get rid of the radio buttons for that and let's add some "Text Input" fields, let's add a column here for "Height." "Text Input," so we want them to put their height in feet, so we go to "Text Input" for that. Let's grab another label, and let's say "Feet." Let's group those, "Command G" to group a shortcut, and let's duplicate that. This one will be "Inches." Let's go back out, so here we have it. We have a height section for User to add their profile information. How many feet they are? How many inches? Gender, male or female. Let's duplicate this again. Now we want them to fill out some information of what fitness level they are. Let's move these radio buttons. Let's place them one under the other for this section. Let's move it over. What fitness level is the User? We want them to answer that, so that could be "Beginner," "Experienced," and let's duplicate that. Just grab it and move it down. Say, "Advanced." Let's go back out again. Here we have the "Gender," the "Height," the "Fitness Level." One last section. Let's duplicate this one more time, so we can keep the labels the same font size. Then we can go into that group, and get rid of the elements. Actually, let's not do that. Let's create a label from scratch. I think those were 24? Yes. In this section we want the User to let us know the type of workouts that they like. Let's grab an image here. Do we have an image showing here? No, let's just type in "Image" in quick add, there you go, gives us the image box. Let's start to line these things up a little better. As you see, hit the little arrows that help you align your elements a lot better. Workouts that you like. We have an image here, and let's grab another label and this will be "Cardio." Let's set it out with this image, and let's group these two elements. That way we can duplicate. Space these out. Let's move this label over, and then we can move all these over as well. They like cardio, they would select that image. Let's say this one is called "Weights," and let's grab both of these, let's duplicate both of these, bring this down, and let's say this one is "Hit Training," and this one is "Bodyweight". We got bodyweight exercises here. Let's make sure this is centered. Let's do the same thing with this one. We'll back out, go to "Weights." Lastly, let's add a button, so once they fill in all the information, we want the User to click a button to get to the next screen. Let's say the button will say "Continue." Let's make the button bigger. Let's center it overall, and let's try to move some of these things up here. We can group these, so let's group these five controls here. Now we can move them all up as one. Lets grab these, and smooth these up, and let's grab the user's name, move that up. Create a little bit more space here. That is our profile setup screen. Let's rename this, double-click it and we can call it "Profile Setup." That is our profile setup screen. The next on our list is, once you created your profile, then you would pick a workout from the list of workouts, so that'll be a next screen that we create. 10. Wireframing the List of Workouts Screen: For this video, we're going to create our next screen, which is the list of workout screen. This is the screen that the user will come to after they set up their profile. If you remember in their profile set up, they selected their gender, added their height, and feet, and inches information what fitness level they are. Then select the type of workouts they like. Once they select the type of workouts say like, then they will be taken to this list of workout screen based on those workout preferences and that is the screen we'll create now. Let's go into symbols. Instead of duplicating this wire-frame mock-up, let's go into our symbols. Remember we created our iPhone 8 symbol earlier, in earlier lesson. Let's add that. Let's add a new mockup and then this'll add our phone. Let's start creating our mockup here. Our lists of workouts. Let's go to forms. We see a search, we would like a search at the top, let's say. Users can search through, they can search through the list of workouts that are being shown. We have our search box. After that, let's get a button bar. Let's say the user has selected body weight in the HIIT training as the type of workouts that they like. Let's add those to the button bar so that the user can toggle between those two and see the list of workouts based on those two categories. We got body weight and HIIT. Let's move this down a little bit. Let's grab another image as we had before. Let's fill that in here. Unlike before where we just had a blank image control, let's add an image into this an actual image. If you go over here to the "Properties panel" for this box, as you click on it, you'll see the Properties panel. You click the "plus sign". Then you can sift through. Let's grab this. Add that to the box, and let's say sketch it. Gives it that sketchy look. For this, let's give it a border. Let's create another labels. This work out will be called burpees type in burpees center to that, let's group it. Let's duplicate that. Some space move that over. This next one, let's give it the name of this workout is called Crushing It. I don't know a name to call this that seams to be fine and let's call it Crushing it. Let's change the image and let's give it a image of, let's go at this one. You import it. It's in there and it's sketchy, gives it a sketchy feel as well. Here we have our list of workouts on the body weight, so the user clicks "HIIT", it will show a list of workouts. Well here on the body weight as an example, we have burpees, we have Crushing It. Let's duplicate this. Move this down and now let's call this workout option Fab Abs. Let's grab another photo for this there you go. Let's go back out and our last option will be, i'm not really good at naming workouts. Let's call this one Tough Cookie. This is a tough work out here. Let's change the image. Here we have our list of workouts screen. Let's add at the bottom, once they get here a tab bar. Let's double-click "Rectangle" to give our tab bar a background. Let's move this down a little bit. Let's grab an icon with a label double-click. Let's say this is called workout, so the user can quickly get back to the workout screen. Let's give it a star icon. Extra small. Do we want to extra small? May be too small. Let's call it small. That's one that's duplicate that and add the one will be profile. Let's go in here to the icon search in the Properties panel. You could click this button, as we talked in earlier lessons, to open the entire Icon Library, which will give you everything. Or you can type, I can search on a person for the profile. Let's say person. Let's get this generic one here. Move it down to small. Now we have our bottom tab bar and there you go with that. Let's group these three items and there you have it. That is our list of workout screen. If you click "Profile", that essentially will take you to your profile page. It will show you all the information that you set up in this screen here. If you click "Workouts", it'll take you back to your list of workouts on this screen. The next two screens, in the next video we will create what happens when you click an actual video. If you click "Fab Abs" or "burpees", it'll show you the details of that workout. We want to create that workout detail screen. Then we're going to create what happens when you play that specific video workout. Those are the last two screens will create, and we will create those in the next lesson. 11. Wireframing the Workout Details Screen: For our next video, let's create the last two screens for our wireframe mockups, which will be the workout detail screen, and when you click on, say, start or play, it will create a screen for the video actually being played. Here we have a list of workouts, let's double-click that and let's change the name to list of workouts, rename, and then let's duplicate this screen, so click duplicate, okay. Let's get rid of some of these elements here. If you click burpees from this screen, it'll take you to the burpees workout. Let's add another image. Let's make it fairly big, and let's populate that with burpees image. Let's select that so we get the properties panel to the right and let's click sketch it again. You have the sketch here, we have our tab bar. To get back to workouts, which is the list of workouts here. Let's create an arrow also. Where is icon? Let's grab an icon. Let's throw that up here to the top left. Let's go into icon search in the properties panel, and let's click this icon there and let's reduce it down to small. Now the user can get back to the previous screen list of workouts by clicking the back arrow. The last thing on the screen, let's say we add a button that says start, and the user will click start to play the actual video. Let's save that. In balsamiq your changes are auto saved anyway but sometimes I click command S just to be safe. Let's rename this first before we move on to the next screen, and this is the workout details screen. Let's duplicate that for our last screen. Lets move this Icon. This is our video, when the video is actually being played. Say it opens up a modal that takes you to a screen that fills up. Let's change this icon to a close button. Let's say you want this X here. This is fine. Let's move this up. We want the X to go a little bit so these two things line up little better. Let's say the video was playing. You can move this over here. Lets say this is your burpee workout. Let's grab another arrow. Let's grab a label. Let's say the video is playing, it is showing you the time left in this workout as you do it, so let's say it's giving us a minute and 17 seconds. Let's make that bigger. Let's center that. Once the workout is going, you can work out along with the video. The count down will tell you how much time is left in this workout. Let's grab another button so that you can go to the next exercise in this burpee workout for example, maybe it's another variation of burpees. Let's grab a button, let's call it next. Let's add an icon to this. You if want to go, here you go. You have an icon in there. Let's make that smaller, that icon. Let's make the button bigger. Let's see if it's actually small, yes it's okay. Quick wireframe is for people, stake holders, other team members to click quickly click through. That's your next button. That is our list of five. What we don't want is this. We can move this down. We have our video playing, we had a close button to get out of this screen, which will take us back to our workout details, and we have next, which will show us the next variation in our burpee workout. Those are our five screens, create an account, profile set-up, list of workouts, work detail, and workout videos, let's call this workout video. We have our five screens. In the next video, I will show you how you will link all of these wireframes to create a clickable prototype. We will do that in the next video. 12. Linking and Presenting the Wireframes : Here we are after we created our set of wireframes or mock-ups. Now we're ready to link them together to create a prototype. In this video we'll talk a little bit talking about linking your wireframes. After linking them, creating a prototype and presenting them to your design team members, your test users, or the stakeholders in the project. Let's get started. In our previous lesson, we created our final set of wireframes and work out details and the workout video. Now let's look at the wireframes that we have. We have to create an account profile, set up the list of workouts, workout details, and work out video. Our first mock-up is to create an account we want to use or to fill in the information, the first name, the email the password, click the terms of service, checkbox, and click the create account button. That will take you to the profile setup page. In order to link creating the account mock-up to the profile setup page, we have to click the button creating the account that we want to be the link to that profile set-up wireframe. To do that, we click the create account button and you see in the properties panel, list of options come up. What we want to go to is the links section. Here we want to link our mock-ups to put the names we've chosen for our wireframes and in all of that you have linked to web address, linked to new mock-up, linked to duplicate of this mock-up, go back, which is in full-screen mode and no link. These bottom five here we're not going to worry about because we want to link our wireframes to other wireframes that we created in our set. We just worry about this top section here. You click the create an account button, go to links pulled down and select profile setups because that's where we want it to go. Now when you click the create account button, it will go to the profile setup screen. A profile set up, we want to use it to fill in their information, their gender, their height, their fitness level. The work-outs they like, select the workouts that they like. Then click continue and that'll take you to the list of workouts. On this screen, we want to click the continue button. Under links again, we want to tell it to go to the lists of workout screen. Now let's good list of workout screen. Once the user sees list of workouts based on what they chose in their profile setup. Let's say they chose a light body weight workouts. Now you have a list of body weight workouts. Burpees, crushing it, tough cookie, fab abs, you would click one of those exercises and it will take you to the details of that workout. Let's say burpees will be the clickable button here in this wireframe. We go to link again. We want to link that to the workout details screen. Now also we should probably link our bottom tab as well. Let's link that to a list of workouts as well, let's go back out to the home profile. I don't want to go back to the profile set-up because once you set up your profile as you take you to actually see your profile page. But we didn't create a profile page for these set of wireframes. We're not going to link that for now. You're at list of workout, you click burpees and it takes you to work out details screen. When you're here, you can go back to your list of workouts if you made a mistake. Let's go to links again, and let's go back to list of workouts. Also if you click the workout icon in the bottom tab navigation, that will take you to list of workouts as well. If you're ready to start your video, just click the start button and that'll take you to your work out video. Now we're at the workout video and the clock is running. You see the exercise video showing you how to do the certain types of burpees. We would next would normally go to another set of burpees maybe in that group of exercises. But we didn't create those screens so, this will be a last screen in this set of wireframes. In this user flow. The action here will be to closes video by clicking the X or the close icon and that'll take you back to the work out details. We have all of our wireframes linked together. Now they have now become a clickable prototype once we export them. Now we want to export them into a PDF. To do that, you want to go to the top, click project at the top and drag down till where you see export to PDF. Click that and now you have an option of how you want to export your mock-ups. You want to explore all of them. The current one that's selected? Or do you want to select a set of mock-ups to export? For this, we do not want to export all mock-ups because that would also include our user flow, our persona. That's what we don't want that in our prototype. We want to create a set. We want to export a set of mock-ups. We just want to check the mock-ups that we want in this prototype PDF, which would just be these five. Let's use opt to optimize for viewing on screen. Let's show linking hints. Add the mock-up names. We don't have any notes in this set of wireframes, but if you want to include the mock-up notes, you can check this box here. Let's export to PDF. Then you would save it to a certain area, prototype PDF. Another option that we have is to not only export a PDF, but we can actually present these mock-ups in full screen in seibel solving. In order to do that. Say instead of having your design team members or test's users or stakeholders in the project. To actually test it on their own. You want to demo the prototype for them. You would click this presentation icon up here, full screen presentation. That'll take you to your wireframe mock-up prototype. Now you have clickable areas will only give you, it'll let you know what areas of the prototype or clickable. Create an account. We'll give you a little hint when you go to the screen as it turns a little shade of red. We select our workouts and fill in our information and click continue. That'll take you to a list of workouts. We want to do burpees here and now let's start and watch our video. Now our video was playing. That is our quick prototype we put together based on a set of wireframes. If you click this close button to take you back list to work out, yes. So it does, in order to get out of full-screen mode, you just click escape and that takes you back to your wireframe, mock-up. That is another way to present your wireframes as a prototype, full screen presentation mode, or you can export as a PDF so to users can go off on their own and tested. In the next lesson, we'll go over the PDF prototype that we created. 13. PDF Prototype Presentation: We created our prototype.pdf file in the previous lesson. Let's take a look at that file. This is the low file prototype in PDF form that you would send out to test users, your design team members or stakeholders of your project. Looking at this file, we are on the creating the account screen and here users would enter their name, their email, and password and then they will click the "create an account" button. Here you on the profile setup screen. Users will enter whether they're male or female, their height, their fitness level, the type of workouts that they like and then click "continue". Here we are on the List of workout screens after you selected the type of workout you like, say you like the body weight. This would show the type of body weight workouts that you could perform. Burpees, crushing it, fab abs, tough cookie. Let's say when you click on, you want to go do a burpees body weight workout. This will take you to the initial screen for that workout where you can press "start", which will play the video or click the "arrow" button, it will go back. Let's click "start". At the bottom also, you have the tab that we created. If you click "workouts", takes you back to the Workouts page as well. Let's click "burpees". Click "start" and now the workout will begin. Clock would countdown and the "next" button would actually show the next variation of burpee workout. But since we didn't create all of those screens, this will be the final screen of this flow. At the top you have the "close" button, the user would then close out this video and it will take you back to the video start screen. This is our prototype PDF. This is what the prototype would look like in PDF form if you were sent it out to your test users and design team members to get feedback from them. 14. Final Thoughts: That's the end of the class. In this course, we talked about Balsamic and its importance for wireframing and prototyping. We went over the tools in Balsamic and we wireframe and prototype in the example app. So you can see my process. That's it for the class. I hope you guys learned something about low-fidelity wireframing and prototyping, and I look forward to seeing what you guys come up with in the class project. Remember, this is a very important step in the design process, so happy prototyping.