Learn UX: Wireframing and Prototyping a Mobile App

1. Introduction: Hello. My name is Gene Guy. I'm a product designer and developer. I've been doing product design and development for over 15 years now. In this class, I will teach you how to wireframe and prototype with Balsamiq and Adobe XD. We will wireframe and prototype an example mobile app based off of some example UX documents like personas, user flows that I have prepared for the class. I will show you some tips on using Balsamiq and Adobe XD and my process of wireframing and prototyping a mobile app. This class is for beginning and intermediate UX designers who would like to learn or want to 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. What Is a Wireframe: What is a wireframe? Wireframe is the essential part of a designer's workflow. It's one of the important aspects of a designer's workflow because it helps ensure that a website or mobile app will have consistency and clarity in order to make for a positive user experience. A wireframe is a simple, low-fidelity representation of your app or website. Think of it as a blueprint for your website or app. It is where the beginning stages of the thought process begins about understanding what elements will be laid out on the screen. Think of a wireframe as being similar to a blueprint or floor plans of a house. Before you start to design a house, you have to have a blueprint or a floor plan to identify where the kitchen will go, where the bedrooms will go, etc. Wireframes for a mobile app or a website serve the same purpose. You have to map out what will go on each screen, and you'll place boxes on the screen to act as place holders for elements of the actual design will go. Where will the navigation go? Will there be a hero image on the screen, etc. Wireframes allow us to quickly iterate through our ideas so that we can show and get feedback from stakeholders. Wireframes give the overall structure of the page and how the navigation will flow. When creating wireframes, each aspect of the website or app is represented by a shape or simple graphic. Boxes with that diagonal lines in them represent images, horizontal lines are used to represent text, and a circle with an L inside it is most commonly used as your logo. A good wireframe can help create the vision for your entire website or mobile app. Wireframe serve as the first stage of design. After wireframes are finalized, you'll create mock-ups and then prototypes, but wireframes helps to make sure that you're on right right path with your product before you start wasting time with a design that in the end, doesn't seem to work as you had expected. 3. Why You Should Wireframe and Prototype: Why should you wireframe? Rapid wireframing and prototyping are important steps in your design process. It allows designers, developers, and entrepreneurs to get ideas out quickly. By making wireframes fast, you could throw out the bad ideas and discover the best solutions for your web app or mobile app. By using Balsamic or Adobe XD, for example, you can create wireframes and prototypes that allow the user to focus the conversational content in the interactions and not details like color scheme, a certain image use instead of another image, or size of buttons and stuff like that. All of that stuff comes later in the process. The main reason for wireframes and eventually the low-fidelity prototype from those wireframes is to make sure all the necessary elements for each screen or page all in there and how those elements interact with one another. Low fidelity keeps the conversation centered on figuring out the problem and communicating the functional solution. Wireframing helps you visualize the layout of your content, save time in the overall design process by being able to rapidly flush out wireframe designs of screens, test easily for usability issues, test and refine your navigation, perform rapid prototyping with users and stakeholders, and evaluate if your wireframes adhere to the best UX practices. Wireframes help to bring clarity to how elements will be organized on the screen. 4. About Balsamiq: I have been using Balsamiq for a few years now. It is one of the best tools out there for rapid wireframing and prototyping. It is very easy to learn, so you'll be able to jump right in and start creating. What makes Balsamiq so good to use for low fidelity wireframes is the fact that it reproduces the experience of sketching on a notepad or whiteboard, but you're using a computer instead, so you'll drag and drop components from Balsamiq onto your canvas and quickly test out ideas fast so that so you can get rid of the bad ideas and not waste time. As you can see, there are a lot of big name companies that use Balsamiq, so you'll be in good company. When you look at job descriptions for a lot of UX designer jobs, you'll find that Balsamiq is usually one of the tools companies will like you to know how to use. You see here Balsamiq comes in three versions: Balsamiq Cloud which is the web app, Balsamiq for Desktop which runs on Mac and Windows, and then there's Balsamiq Google Drive which integrates with Google Drive. Each version comes with a 30-day trial, so you can download one of these versions and use it for this course. 5. Navigator Panel and Canvas in Balsamiq: By now you should have downloaded and installed one of the free trial versions of Balsamiq, if you don't already have it. Now we can open up Balsamiq and we will see the dashboard, which consists 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 the UI controls we can use for 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. In this lesson, we will go over the Navigator Panel in the canvas. The Navigator Panel is where all of our wireframes, acids or symbols will live. When you make a new wireframe mockup, it will show up in this area, and items are dragged into the canvas area here. Let's make a quick wireframe mockup and see how this area works. We will go over the UI library controls in the next video, but let's grab a few controls now so we can get a mockup to show up in the Navigate Area. We have our first basic wireframe mockup and as you can see, it shows up in the Navigator Panel. If you select a wireframe mockup by clicking it, you will see an arrow in the bottom right appear. If you click that arrow, some options will display which are Rename, Duplicate, Move to Trash, and Create Alternate Version. To rename your wireframe mockup, 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 mockup and then click "Rename". The next option is Duplicate, if you click that, it will create a duplicate version of that mockup and at the end of the name it will add the text copy, to let you know that it was a duplicate version. You can also use the keyboard shortcut Command D to create a duplicate version. Next you have the Move to Trash. Select which wireframe mockup you wish to delete and select Move to Trash, and that mockup will be deleted. The last item in the menu is the Create an Alternate Version. If you select this option, an alternate version will be created that would display at the bottom right of dashboard in the Alternate Version section of the Properties Panel. These versions will be named 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 they offer. If you right-click the Official Version, you will see an option to Discard All Alternates. If you right-click or click the "Alternate Version" and click the arrow that shows up, you will see options to Rename, Duplicate, Duplicate as New Mockup, Promote to Official, Merge with Official and Discard. Select and Rename is the same thing as we've seen before, Select and Duplicate, duplicates that alternate version. It will create a Duplicate Version with a new name, but it will not create a new wireframe. If you wish to create a new wireframe mockup, you would need to select the next option which is Duplicate as New Wireframe. This displays a new wireframe. If you click "Promote to Official", this will make that wireframe become the Official Version and make the previous Official Version, now the Former Official Version. If you select Merge with Official. It will add that alternate next to your Official Version on the screen, and then you can add or drag or whatever is on the Alternate Version over to the Official Version to update the Official Version. Lastly, you can select this discard for each Alternate Version to delete them or you can click the arrow in the Official Version and delete all Alternate Versions at once. 6. UI Library Properties Panel in Balsamiq: Now let's talk about the UI Library in the Properties panel. 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, so you can click on one of the category buttons like "All" and see all the UI controls in the library. Or you can click "Containers" and see all of 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 symbols that you created for your project. By selecting any of the UI controls, it allows me to show you how the Property panel works as well. Let's grab a button control. If I add it to the canvas, it remains selected, and to the right on the dashboard you will see the properties for that button control in the Properties panel. You can see the position and size input fields that allows me to input a new set of numbers, and when I click "Enter" the button will update. There is a layering section where I can bring the button to the front, bring it forward, send backward or send it back. There's an Autosize section and a Color section which allows me to change the background color of the button by clicking this "Background Color" icon and selecting 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 into the icon search box, or I can click the "Open Icon Library" icon to see all of the icons available. These are the Font Awesome icon set that comes pre-installed. If I search for the Apple logo, 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 to rotate the icon within the button, or I can click the "Remove Icon" 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 double extra large. There's also a link section where I can make the button clickable so it will take me to another marker, this feature is what allows you to set your wireframes to become a clickable prototype. Then there's a 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 will turn it blue I can make it in focus which puts a thin blue line around the button, or I can make it disable, this gives the effect the button is being grayed out. Then the very bottom there is a Text section where I can bold, italicize, underline, or change the font size or the text alignment. If you have multiple controls selected, options for aligning and distributing those controls is displayed. I would suggest 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 section, and I'll show you how I create wireframe. When no controls are selected, the Property Inspector shows notes for the selected wireframe. By clicking the "Project Info" button in the toolbar, the Project Info panel displays and allows you to define the project-wide settings for the project skin, font, link, and selection color. These settings will be applied to all your wireframes in the project. The Skin section gives you two skins, which allows you to work on your 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 presentation. 7. Balsamiq Toolbar: Now let's talk about the toolbar at the top of the dashboard. At the top-left, there's an icon highlighted in blue that allows you to hide and show the navigator panel. Next to that, you have an icon that allows you to view your wireframes in a thumbnail grid format, and the plus sign that allows you to add a new wireframe. In the top middle section, you have buttons for undo and redo your actions, magnifying glass, icons for zooming in, zooming out, and zoom to fit, etc. If you select an item on the canvas, you have icons that become active where you can group the items selected. You have an icon that changes the position of an element, bringing it to the front, sending it to the back, etc. Then also, an icon to lock an item so it can't be moved as you're working. To the right of that group of icons, you have a search box where you can quickly search for UI control. Next to that is a button to hide and show the UI library and after that, there is an icon to add a comment. If you click in the add comments box, it will ask you initially for your e-mail and a name, and then you can add comments, delete comments, and edit comments. The next tool allows you to hide and show the inspector. After that, an icon that hide and show the project info, and the last icon is the play icon, which you would click to preview a prototype of your set of wireframes. 8. Let's Start Wireframing in Balsamiq: Based on everything we've done so far in previous lessons, let's start making some wireframes. Essentially what I do when I first start out, I like to have some process before I start sketching out a wireframe. What I made here were a few templates, just to give you an idea of my thought process as I start to create wireframes. The app that I'll be making in this series of quick wireframes, 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. Why they would use the app, what their goal is for using the app? I could 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 bodyweight exercises and cardio, and she prefers not to use weights when she works out. This is the first persona. The second persona created was David. Here are his details. He's a sales manager, 44 years old, has an MBA, travels a lot for work. He needs a home workout plan because he doesn't have time to go to the gym. He likes to do bodyweight 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 personas I'll use for this exercise of wireframing 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 app. 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 wireframe. This should be creating the account screen, then after you create your account, you take your screen where you add your info and goals 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 lists of workouts, you'll be taken to a screen. Once you select a workout, you'll be taken to a workout detail screen explaining the workout. 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. Just want to get some quick jot down some notes what each screen should have, just allow me as I sketch it out. I also did a quick flow. When you first get to the app, do you have an account? If yes, you log in, I won't create any login screens. This is going to be strictly for people who do not have an account that I'll do the flow of the wireframes for that flow. 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. 9. Wireframing the Create an Account Screen: Let's start creating our Wireframe. One of the first things I do when creating mobile Wireframes in Balsamiq, is to make sure the screen that I'm creating the Wireframe for is the same screen size as the mobile phone that I'll be designing for. Let's create a new Wireframe, let's click the plus sign, it adds our new Wireframe, and let's go to iOS since we'll be creating a mobile iOS app. Go to iOS, double-click iPhone to add it to the canvas. Now, if you select that UI control, you can see to the right in the properties panel, it is the iPhone 10. What I want to do is create these set of Wireframes for the iPhone 8. Let's click iPhone 8. Now, let's make sure that our screen size is the same size as an actual iPhone 8. The actual iPhone 8 size is 375 by 667. Let's grab a rectangle, add it to the canvas, and let's give it a size of 375 by 667. Now, the iPhone frame behind it should be 429 by 848. As you can see, I'm just typing in these dimensions in the size section here at the properties panel. Let's line it up to make sure our rectangle is in there, in the center there. Now that we created the iPhone screen size to be the exact same screen sizes as an iPhone 8, let's create a symbol so that we can use the same Wireframe UI control in all of our mark-ups. Let's grab the iPhone frame in the back, let's grab the rectangle we just created as well and let's group them. Before we create a symbol, we need to group them. You can either do Command G to group them or with them both selected, you can click this button here, the Group button. Once you group it, you see that it turns purplish color. Now to the right, you'll see you have the ability to convert it to a symbol. Let's first name our new symbol, let's call it iPhone 8, and let's convert it to symbol. Now we have it as a symbol that we can use throughout all of our mark-ups for this project. How do we know that? If we go to Symbols we'll see our iPhone 8 now as one of the UI control. Let's start creating an account screen. What we want on the screen is an image for a logo, you want a title, and you want some input fields, terms of service checkbox that people can select to agree to the terms of service. We will want a create an account button and that sort of thing. Let's start with the logo, we will just grab an image for that. Let's go to Quick Add here in the top right, let's click in that input field and let's type image, and you see image comes up here. Let's double-click that and that adds it, and let's add it to our screen. You see there's a blue line, it let's you know that it's being centered. Now let's create a title for our screen. We can either go to the top right here and type in text or label to find what we want, or we can go to the text, click the Text button here and we see our UI controls regarding text. What we want is a label, so let's drag that into the screen onto the canvas. Let's name the title, Create an account, and let's make it a little bigger. Here in the right in the properties panel, let's make it 28. Let's center that as well. Now, let's create some input fields for users to type their first name, e-mail, and password to create their account. Go back up here to Quick Add is what I like to do. Let's go look for an input, Text Input right here. Just grab that and let's pull it along so it will be around the same width as the title. Let's get another label on top of that input fields. Double-click this text here, there's a label and let's call it first name. Now this label goes with this input field here. What we want to do is we want to group them so we can easily duplicate these, and then create more input fields. It makes it much easier. Let's select the first name, select the input field, and let's group them, and now we have our group UI control here. Now let's duplicate that. We can either do Command D or we can come up here to this button here and click "Duplicate" and that will duplicate the input field. Let's call this one e-mail. It's for the user to enter their e-mail here. Let's do one more, let's call this one password to set up their password. Double-click in there and then type-in password, and to get out, we click this little Home icon here that gets it back out of the canvas. We have our input fields for the user to create their account. Now, let's add terms of service. What we want is a check box, so let's go up to this Quick Add, let's type-in checkbox. Here, we have it here, let's double-click it, it will add it, and let's change this text here to say terms of service. There you go. Now, we need a button so that once the user fills out all this information they can click a button which will take them to the next screen. Let's go to Buttons, and here we have this first button and we can just double-click that to add it, and let's make it a little bigger. Let's change this text to create an account. Let's make our button a little bigger and center it. This is looking like a pretty good low-fidelity create an account screen. Just one more thing, let's say we have someone who already has an account, they don't need an account so they just want to login. So let's create an option for that. Let's go up and around, let's find some text, double-click that, bring this down. Let's see, what do we want it to say? Well, let's have it say, I already have an account, and we want the action for them to take is to click a login button. Let's duplicate this text, and then let's change it, put it next to it, and let's call this login. Let's group these so we can move them around easy. Let's double-click this login and change its color so that we know it's a link that's underlined. Create an underlined user link and change the color to say blue. Click the "Home" to get back out, and so there you have it. That is our creating an account screen, where we have our logo at the top, the title of the screen creating the account. We have our three input fields for the user to type-in their first name, their e-mail, and password. We have a terms of service. They would click that checkbox and then create an account. If they already have an account, they would click a login, and they will go to the login screen instead of being here on the create an account screen. Let's actually name this. Let's name our Wireframe here that we just created. Click "Rename" and call this create an account, and there you go. Let's start creating our next screen which is the profile setup screen, and we'll do that in the next video. 10. Wireframing the Profile Setup Screen: Now let's create our profile setup screen. In the previous video, we created our Create an Account screen, so now we'll move on to what happens to the user once they click the Create an Account button. We will make a new wireframe. Lets duplicate this wireframe, and let's rename it and call it Profile Setup. Let's delete everything we have on this screen so we can start afresh. For our profile setup, the user types in their first name here on the Create Account screen. That'll show up on the Profile Setup screen. Let's look for a label, double-click. Let's bring it onto the Canvas. Let's say, in the Create Account screen, his name was Joe. Let's make this a little bigger. Let's make that 28. Is that centered? Yes. What we want the user to do is fill out information in different sections, so we'll have a gender section, what height they are, their fitness level, and what type of workouts they like. That way you can get all that information from them, and it'll populate that in their profile and allow the app to display a list of workouts based on their workout preferences. Let's create the gender screen. We want to get another label. In fact, we can just duplicate this one. Let's make it a little smaller. Let's pull back out. Let's call it Gender. Let's make this a little smaller. It's still too big. Gender. Let's look for some radio buttons. Let's type in radio. Here we go, double-click. Let's add this and let's change this to say Male, this option, then let's duplicate that and call the next one Female. That's our gender section. Let's group this so we can easily move these around and then center it. Well, no, let's left-align these. The next section we want is the height. Let's go in here. Let's copy this. Well, no, let's just see it. It was at 20. Let's go back out. Let's grab a label, double-click, and let's call this section Height. Let's make it 20 similar to the same size as Gender, and let's grab some text input fields so they can input their height in feet and in inches. Let's type in input, text input, double-click it. Let's bring it onto the screen. Let's size it down, and then let's grab some texts. I guess we can do a label as well for this. Double-click that. Let's say this first one is feet. Let's add some colons here. Let's group these. The input field and the feet text, Command G. Let's duplicate that, Command D, or you could also go up to the top as we've done previously. Let's name this inch. Let's go back out. That is our height section. Let's grab all of these. Let's group them so we can easily move them around. That's the height. Now let's create the fitness level section. Let's go grab a label again. I think we got to include the text button label. Double-click that and let's type. Make this text to Fitness Level. Again, let's make this 20. Let's find some radio buttons. Also, add that colon again. Radio button. What we want to know is if they have the beginner, experienced, or advanced levels. This first one will be Beginner. Let's duplicate that. Next one we'll say Advanced. Duplicate that again. This will say Experienced. Again, let's group these. Now let's create a section for them to select the type of workouts that they like. Again, let's grab a label. Let's type in label, double-click. I would say Workouts You Like. Again, let's make this 20. Let's have what would be images of these workouts. It will have an image of cardio that they can select, weights that they can select, hit training that they can select, or body weight training. Let's look for an image. Double-click that. Let's see real-quick. That's too big. Yes, a little too big. Let's move this in. Let's add a label to this, and let's call it Cardio. Let's group these so that we can easily duplicate them. Let's move this up. Click back out. Now let's duplicate this. Let's call this one Weights. Let's center this. Let's duplicate this one again to create another row. It looks like we're going to run out of space. Let's try to move everything up because we need a space for our button at the bottom. Let's move this up. Move this one down slightly. Let's call this text here Hit. You can click the home button or you can double-click to Canvas to get back out. Let's duplicate this. Let's call this Bodyweight, so they like to do bodyweight training. That's looking good. Let's look for our button. Double-click it. Let's say, the button should say Continue. Let's make the button a little bigger and let's center it. That is our Profile Setup screen. On the previous movie, we created Create an Account screen. User fills this out, type in their first name, their first name will show up in the profile setup, and then they select their choices to continue to set up their profile, which will be select their gender, add their height, what fitness level they are, and the type of workouts they like, and then they click "Continue". From there, once they click "Continue", they'll be taken to the next screen we'll do in the next video, which will be a List of Workouts screen. Let's start creating that screen in the next video. 11. Wireframing the List of Workouts Screen: Let's start creating a list of workout screen. This screen will be where users can view a list of workouts by category. They can search for specific workouts or exercises that they wish to complete, such as burpees or maybe some leg exercises. There will be a Bodman navigation tab bar that will enable users to navigate to the home screen, the workout screen, which is what we are creating right now, and a profile screen. Let's start creating an adding elements for this new screen. First thing we'll do is add a new wireframe. Let's call it list of workouts. Let's grab our iPhone 8 symbol, so click on the "Symbols" button and we can double-click the "iPhone 8" symbol to add that to our canvas. Now let's start adding some elements. Initially the first thing we want is the search bar. Let's say we search for a search box, here it is, double-click. Let's add that at the top of the screen and let's move that across the entire width. The next item we want is a button bar, where users can use this to navigate to different categories. Button bar, let's bring that on this canvas, and let's also spread that across the screen. Let's give it some categories, so lets say body weight, HIIT, cardio, and weights. If you separate each of these words here with a comma, when you click out, it'll add a button bar, so there we have our button bar. Now let's create a list of images that will show a list of workouts based on the category that the user clicked at the top. If they click bodyweight it will show a list of bodyweight exercises, HIIT, it will show a list of HIIT exercises, and so on. Let's create an image. Say we're in the body weight category since that is selected. Let's create it, find an image. Let's bring that down, and let's make that a 130 by 80. Instead of trying to figure out what each workout should say, let's just add a line of text. Let's search for text. Let's do a block of text. Then we can easily change that here, like so, let's center it, and let's group it. You now have the image and the name of that workout or exercise. Let's group that. Now we duplicate that. Here's another exercise. I'll let say this is maybe burpees and this is pull ups for example. Let's grab those and duplicate, command D, hold the button up top that we've been using, and let's space those out. Let's do that one more time, command D. Let's move these up a little bit. That's our list of images centered. When the user clicks HIIT, the idea is for these images to populate with all the exercises or workouts that are tagged with HIIT, same with cardio, and weights. These will populate based on those categories being clicked. Lastly, let's create a tab navigation. Tab navigation, let's grab a rectangle as the background for our tab navigation. Let's grab some icons. We want icon with label, we type in icon, lets get icon with label. Let's add that and let's search, so on the properties panel here and the icon section, if you search for an icon and say home, it'll add the home icon. We want that to be small. Let's say home for this icon, let's duplicate that. Let's change this to say, workouts. For that, let's change the icon, maybe a star icon. Let's duplicate that again. Let's call this profile, or actually let's call it my profile. That's maybe one a person for this. There you go. We have our tab bar with our different sections. We have our images, which will populate based on the category selected, and we have our button bar, which users can click on different categories, and we have our search bar at the top. In the next screen, what we'll do is, we'll create the workout details screen. Say a user is on the body weight, they click this image, say it's a burpee workout, they click that and it'll take them to the burpees detail, that specific exercise or workout detail screen. We'll create that screen in the next video. 12. Wireframing the Workout Details Screen: Let's start creating our workout detail screen. This page will display the details of the selected exercise or workout that you've chosen. For example, if you selected burpees on the previous list of workout screen, it will show that workout and details about that workout, such as the workout description, etc. Let's start creating and adding elements for this screen. Let's first duplicate our list of workout screen so that we'll already have our tab bar at the bottom, which we'll need for this workout details screen. Let's select this and let's click the "Duplicate" button at the top, which will create our new screen. Let's rename it and call it workout details. We have our tab bar. Let's delete all of the other elements. What we'll need for this screen initially will be the back arrow button. Let's look for icons. Lets go to quick add and let's click "Icon". We don't need an icon with a label, we just want the icon so let's double-click that. Let's add it to the Canvas. Let's search for arrow. We want a back arrow, let's just use this arrow. We have an arrow here. Now let's look for a title for our screen. Let's call this class details. It's very big so let's make it a lot smaller. Let's make it as 16 pixels, and let's center it. Let's duplicate this and let's have a title for our workout or exercise. Let's call this workout title. Let's make this a little bigger. Let's double it in size, make it 32 pixels and center that. Then let's have an image, the main image for the workout. Let's go back here again. Here, image box, stretch that across. Now we'll want a description to let people know what this workout is about. Let's duplicate this one. Let's size this up to 18. Let's just call this description and let's center that. Let's get some text. We don't know what we want it to say. Let's just get a block of text just to let users and stakeholders know that this is where our description of the workout will go. We don't know what the final text will say just place order for now. Let's center that. Under that we want a button. We just click on "Buttons" here and let's drag this in. We want this button to say start. By clicking this button, this will start the video. Will take you to the workout video screen which is where you can start playing the video, start playing the actual workout. There you have it. Once you go to list of workouts, you click on a workout, take you to the workout details. You have an arrow to go back, you have a class details to let you know where you are in the app, the workout title, an image, you've got a description, description title. Actually, just to make sure we left align this, let's left align that. We have a description title and we'll have under that the actual description of the workout or exercise, and then we have our start button. On the next video, we'll work on the workout video screen, which is where you'll actually play the video, you can end the video. It'll show the duration of the video, how much time is left in that workout. Let's start working on that screen. 13. Wireframing the Workout Video Screen: Let's start creating a workout video screen. This screen will display a video of the workout or exercise that you have chosen. It will display the duration time of the video, and we have a button for you to end the workout. Let's start creating and adding elements for this screen. Let's create a new wireframe, and let's call it workout video screen, and let's look for a iOS, iPhone 8 symbol that we created earlier. Let's start adding our elements to this screen. This is a workout video screen on the previous screen. The workout detail screen is where you can start the video. So when you click the "Start" button, it'll take you to this screen here which will play the actual video. Let's look for video player, add that. Let's make it a little bigger. Center it and let's add a title, and this will display the duration, I mean how much time is left in the video as you're working out. Let's say eight minutes and 34 seconds. Let's make that a little bigger. Let's make that 72, and let's move the video up a little bit. Let's make this 14. Let's create a button which will give us the ability to end the workout. Let's look for a button. Let's double-click that, and let's call this End Workout. Let's make it a little bigger, and let's center it, and there you have it. We have to add an image. Let's add an image in this video. This will display our image. Let's say you wanted to add an actual image into this image box. You could do that by clicking the plus sign, and on your computer, find a video. I have this. I have some videos here. Let's add this one. I must have uploaded this before, so let's say existing, or let's use a name. Here we go with our image, and we want to keep this low fidelity. So what we can do is click the "Sketch it" and it'll give the sketchy field, and now we have our video there. If you want to crop this image, say just click this "Crop" button, and you can crop it like so. You want to make it smaller, you want bigger, that sort of thing. That's how you can add some images and still keep a low fidelity. We click the "Play" button video so as to play, the duration time here at the bottom, and if we have to end our workout early, we end the workout. End the workout, it'll take you back to the workout detail screen. That is our workout video screen. What we'll do next is create a low fidelity prototype using all these screens so that we can hand it off to stakeholders or users to test and see if they like the flow of it. We'll work on that in the next video. 14. Linking and Presentation in Balsamiq: Here we are. After creating our series of wireframes or mockups, we are now ready to link them together to create a prototype. In this video, we'll be talking about linking our wireframes and after linking them, creating a prototype and presenting them to your design team members, your tests users, or your stakeholders in the project. Let's get started. In the previous videos, we created a Create an Account wireframe, Profile Setup wireframe, List of Workouts wireframe, a Workout Details wireframe and a Workout Video wireframe. Let's start linking them together so we can create our low-fidelity prototype. On our Create an Account screen, we have the title, the first name, email, the password text inputs, terms of service that the user will click and then they will click the "Create an Account" button, which will take them to the Profile Setup screen. In order to link this to the Profile Setup screen, we go to the Link section in the Properties panel. After the button is selected and you'll see we have a list of wireframe mockups that we created, with their names that you also see here on the left, also in this area. We click Profile Setup. It will now link to the Profile Setup screen. You also have these other options below, Link to a Web Address, Link to a New Wireframe, Link to a Duplicate of This Wireframe. Go Back (in Full Screen), No Link. We're not going to worry about these bottom options here. We're just going to use the top options here. Now let's go to the Profile Setup screen. Here we have our name that we put in the Create an Account screen, the gender section, the height, that you user will fill out, their fitness level and the workouts that you may like. They would select what type of workouts they typically like and then they will click the Continue button. We'll select the Continue button, go back over to the Link section in the Properties panel and we will link that to List of Workouts. Let's find that, List of Workout screen. Okay, now, we'll go to the List of Workout screen. You have to search option. You have your categories of workouts that the user can click to see a list of workouts based on that category and we have the Tab Bar at the bottom. When the user selects a workout, that they like, they'll be taken to the Workout Detail screen of that workout. We select a workout, go back over to Properties panel and link it to the Workout Detail screen and you see that little icon pops out, to let us know that it's linked to another screen. Let's now go to our Workout Detail screen. Once the user click that workout that they selected, you'll go to a Workout Detail screen, which has the workout title, a picture of the workout, a description of the workout and they'll click "Start", to begin viewing the video and to start the workout. Again, let's go to the Properties panel and find that wireframe to link it to, that will be called the Workout Video screen and now lastly, let's also use the "Back" button and let's link that back to the List of Workout screen. While we're at it, let's do our Tabs also. Our tab can go to List of Workouts. Let's do the same thing on the Workout Detail screen, with the Tab, that will go back to List of Workouts and our last screen is the Workout Video. Once the user click Start, they'll go to Workout Video screen, will show the video, the duration of the video and their ability to end the workout. Here, we'll just link to End the Workout, which will take you back to the Workout Details. Okay, let's link this, it will take you back to Workout Details, and there you have it. We've linked up all of our screens. Now that we have all over our wireframes linked together, they will now become a clickable prototype, once we export them. Now, we want to export them as a PDF and to do that, you want to go to the top and click "File" and select "Export to PDF". Click that and you see the options of how you want to export your wireframes. Do you want to select All of the Wireframes? Do you just want to export the Current Wireframe? Or do you want to just select a specific Set of Wireframes? Now we don't want to export all the wireframes, because that would export the Persona , the Storyboard and the User Flow. We just want to select the option, "A Set of Wireframes". We click that and now we'll select the wireframes that we want exported. We want to Create an Account, Profile Setup, List of Workouts, Workout Details and Workout Video. After that, I normally select Optimize for viewing on the screen. After that, I select Show linking hints and Add wireframe names. Okay, now we're ready to export to PDF. We just click that button. Another option we have, is to not just export these wireframes to a PDF, but to present these mockups, full-screen insoluble solving. If you didn't want the stakeholders, the design team members, or test users, to actually test it on their own, but instead, you want to demo the prototype for them, you will click the "Full Screen Presentation" button here in the top right and that will display your mockup in the full screen mode. As you see, as you roll over clickable areas, it will show us a hint by turning this shade of red and that the button is clickable. Click the active of buttons to click through the demo and presentation mode. In order to get out of full-screen mode, you will click the "Escape" button and that takes you back to your set of wireframes. Those are the two ways to present your wireframes, as a full screen presentation or export them as a clickable PDF. In the next lesson, we will go over the PDF prototype that we created. 15. PDF Prototype Presentation in Balsamiq: We created our prototype PDF file in the previous lesson. Let's take a look at that file. This is the low-fidelity prototype in PDF form that you will send out a test users, your design team members, or stakeholders of your project. Looking at this file, we are on the create an account screen. Herr the users would enter their name, e-mail, and password. Then they would click the "Create an account" button. Now we're on the profile setup screen. Users will enter whether they're male or female, their height, their fitness level, and the type of workouts they like and then they will click "Continue." Here we are on the list of workout screen. This screen breaks down the workouts in the app into categories with those categories being body weight, HIIT, cardio, and weights. Whichever category they selected, a list of workouts pertaining to that category is displayed in the main content area. Let's say you select a workout and then you'll be taken to the initial screen for that workout where you'll see the title of that workout, an image of that workout, a description of the workout, and a "Start" button where if you click it, it will begin to play the video of the workout. At the bottom of the screen, we have the tab bar where users can navigate to the home screen, workout screen, and view their profile. At the top there's an arrow button where users can go back to the previous screen. Let's click "Start", and now you'll be taken to the workout video screen. Now you're on the work out video screen, which displays a video player, the time elapsed of the video which will count down as the video plays to show the user how much time is left in the workout, and an end the workout button for users to click just in case they can't finish out the workout for some reason. This is the prototype PDF. This is what the prototype would look like in PDF form if you were to send it out to test users, your design team members or stakeholders of the project to get feedback from them. 16. About the Project in Adobe XD: For this project, we're going to create a set of wireframes around five. Then take those wireframes 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 the course. During the course, I'll go over the steps I took to create those wireframes and prototypes so you can see how I do it. You can use this as a template for your project. You don't need any prior experience with the Adobe XD software, as I'll quickly give an overview on how to use it throughout the course. The final project is something that you can use in your portfolio to show clients, your design team members, or even potential employers. When you look at UX designer job descriptions, being able to wireframe and prototype is very often in those descriptions. This is a skill that will really help you in your current job or if you're looking for that next UX Job. Adobe XD is a very popular tool that a lot of the UX department to use nowadays. 17. Personas and User Flow in Adobe XD: Before we start creating our wireframes, I created a savvy user personas and a user flow to show you a little bit about the documents that are usually part of the design process. I made two personas, one male and one female. Both of these personas were developed so that when you're going through the wireframe process, you're doing so with specific users in mind. These personas are named Jennifer and Chris. These personas will be available for download so you can use them as a template when you start working on your wireframing project. Below the personas, we have a user flow example. This helps us understand the journey the user will take when we're creating our set of wireframes. In this journey, the user will create an account, set up a user profile, pick a list of workouts; there'll be a workout detail screen, and then the user will view a video of the workout. This is our user flow and we'll be creating five screens based off of this flow. Then we will link them together to create a low fidelity prototype that can be tested by users. 18. Overview of Adobe XD: In this video, let's quickly go over the tools in Adobe XD. The setup is similar to other design tools such as Sketch and Figma. On the left, you have the design tools. We have the selection tool, the rectangle tool, the ellipse tool, and the polygon tool where you can create shapes on the canvas. We have the line tool below that along with the pen tool. Under that we have the text tool, which allows us to add text to our designs. Under that we have the artboard tool. When selected, we then see on the right all of the different artboards we can use for our designs. There are artboards for mobile designs, tablets, web desktop, and social media artboards to create designs for Instagram and Facebook, and then Artboards also to create designs for the Apple watch. Under that we have the zoom tool. At the bottom left we have icons that represent libraries, layers, and plug-ins. Libraries are where the colors, character styles, and components for your project live. Layers show the different layers of our designs and plugins is where we add new plugins to our project or view plugins that we currently have in our project. At the top center you have a drop down where you can rename your project. At the top left there are sections for design, prototype, and share. The design section displays our tools in order to create our designs. The prototype section allows us to create a prototype of our designs. So if you select an artboard, you will see it highlight in blue and an arrow will appear. This arrow gives us the ability to click and drag it to another artboard. After you click and drag the arrow to link it to another artboard, the properties panel on the right will become active. Well, we now have options on how linking to that other screen will be triggered. Will it be a tap, a drag, time, keys and gamepad, or voice? Under that you can select the type of transition that you want. You have auto-animate, overlay, previous artboard, audio playback, and speech playback. Under that you had the destination section, which is where you decide which artboard is the destination artboard. You can change which artboard will be linked from here. Under that we have the various types of animations that we can select, such as dissolve, sliding or pushing. The share section allows us to create a link for your prototype to be shared with others. You can select the view settings such as design review, development, presentation, user testing, or custom. Under that you can grant access to anyone with the link only invited people or anyone with a password, and after you make those selections, you will click the create link button, which will then create a link that can be shared. At the top right you have icons for inviting collaborators to access and edit your document. Device preview, where you can preview designs on a USB connected device. Then you have the desktop presentation button where you can preview and interact with your design. To the right we have the properties panel. So when you select an element or add an element to the canvas, the properties panel to the right becomes active. As you can see, you can align your items in the top section here. Under that you have the option to repeat grid and create shapes using Boolean tools to the right of that. Under that you have a section where you can create components for your project. Then you have a section where you can transform your design elements. You have a layout section where you can make elements in your design responsive. You have a section for your text where you can change the font, font color, font size, etc. That is my quick overview for Adobe XD. It's really a great tool to use for UX and UI design. 19. Create an Account Screen in Adobe XD: Let's start creating our wireframes. Before we start, XD along with other design tools give you the option to create a wireframe assets or elements yourself, or you can download a wireframe UI kit with premade elements and just customize them from there. We're going to go the download a wireframe UI kit route in this course. It makes the task of making wireframes much quicker and much easier. In order to download a wireframe kit in XD, you would go to the File menu, and then go to Get UI kits, and select "Wireframes". From there you'll be taken to a webpage where you can download the wireframe kit. Click the download kits link, which will download both the web and mobile versions of the wireframe kit. Once you have them downloaded, find those downloads on your computer and then double-click the mobile version XD file. Once that is open, you will see a wide variety of wireframe elements that can be used from sample sign-up forms, profile screens, filter and search, and much more. Before we start using this, I'd like to keep my wireframe elements as low fidelity as possible. Meaning, instead of having these blue range of colors I like to keep it all grayscale so that color is not a distraction when designing the wireframes, or it's not a distraction as well for the users when they're testing our eventual prototype. Let's change the color scheme of this wireframe kit to grayscale. In the bottom left you'll see a set of icons for libraries, layers, and plugins. Click the library's icon, and you'll see a new panel appear. This panel will display the UI kit's character styles, color styles, etc. Let's go up to colors and if it's closed you can open it just by clicking the arrow and you'll see the color styles for the kit. When we change the colors here, it will make all the necessary color changes throughout the document. Let's change the first color. If you right-click on the color, a menu will appear with the option edit color. Let's select that. Now, we just pull our color that you see currently is in blue. We pull that over to the grayscale equivalent, which will be right about here. Now we have our darker gray color here, and it'll start to make the color changes throughout our document. Let's zoom out a bit so as those colors get updated we can see them. Now, let's grab our second blue color, let's right-click, click "Edit", let's pull this one down to right about here. As you see, our colors are swapping out and changing. Let's grab our light blue color here and let's pull that down to here. Again, you see our wireframes are changing the grayscale with each change in this last light blue color, we can change and just add that here. We have our grayscale palate. Some of these colors will have to update manually and we can do that later if we actually use anything in this menu section or this message section or even these popovers. Let's start creating our create an account screen. That will be the first screen that we will create in our set of wireframes. Let's click on, let's go back to our wireframing document, and let's add an artboard. If you press "A" on your keyboard you'll see the panel on the right, show you a variety of artboards that you can create from mobile, tablet, web desktop, social media, etc. Let's do iPhone X for our wireframes and let's drag this down here below our user flow. Let's zoom in a bit. This will be our create an account screen that we will start out with, let's actually call this artboard, create an account. Let's start grabbing some elements from our mobile wireframe kit that we downloaded. Let's switch back to wires mobile and let's grab a section where our logo would be housed. We have a sign up section which is what we want, our create an account screen will be about having the user sign up. We can grab this section here let's just copy it. Go back to our wireframes and we can just paste it. Let's just say this is where our logo will go. Let's go back to the wires, and let's look for creating an account section. Let's zoom in. This looks pretty good. Let's grab this create an account and let's select these input boxes as well. Let's go back to our wires, wireframe kit and let's look for a sign up section where we can create an account, input fields and the create an account header. Let's grab this header here, well, we can just grab this header here. Let's go back to our wireframes and just add that center it. Let's go back to wires and let's find some input fields. I think this is good here. Actually, we could just grab that create an account. Let's go back to wireframes and let's paste these input fields in here, and we want full name, email and password, and confirm password. That's perfect. Let's go back and look for a terms of service and we have one here. Let's go back and paste that. Let's add that below and let's make sure that's centered okay, and let's look for a button where we can have a Create an Account button that the user will click once they've filled out the form. Let me just grab this Continue button here and let's add that. Let's change this to create an account, and let's say we want us a button for a user if they already have an account they can just login. Let's go with this, already have an a account login, and let's just grab those elements and let's paste them into our document. Let's move some stuff up here. Let's move these up. Terms of service, create an account. Here we go. See how quick that was. With premade elements in already made wireframe UI kit, it made creating our first wireframe screen very easy. Just a matter of changing the colors to low fidelity if you want that, going back to the wireframe UI Kit and copy and paste in the elements that you need pasting them onto your wireframe Canvas. This is our create an account screen. We have the logo, create an account header. The user will input their full name, their email, a password, and confirm their password and then they'll create an account. If they already have an account, let's move that down. If they already have an account then they will click login and they'll be taken to a login screen. We won't be using that flow. The flow we'll be doing right now is just create an account which is here where we say we start, do you have an account? No. Create an account, set up your profile, pick from a list of workouts, work out details, etc. This is the flow we're going with here and the first screen of that flow is create an account, which we have here. Our next screen that we'll create is set up your profile screen. We'll do that in the next video. 20. Profile Setup Screen in Adobe XD: Let's create our next screen, which will be the profile setup screen. Let's create a new screen, let's just duplicate our Create an account screen by pressing Command D, and let's rename this to Profile Setup, and let's get rid of some of the elements that are on here so we can start fresh. Let's keep these for now because we may end up needing them. So the user will create an account by filling out their name, e-mail, and password and then create an account. Let's say they created an account, their own profile set-up and their name will appear at the top. So let's say the name is John Doe. Let's center this. In the properties here, you'll see you can left, center align or right align, and let's center align John Doe, and then let's put it here. As you can see, as you click an element, here you have the properties panel for that element to the right. We have that here. Let's see what the font size is. Let's keep it at 20, that should be fine. Here on the profile setup screen, we want a section for users to be able to select their gender, their height, their fitness level, and they can select the type of workouts they like, and then they will click, "Continue". We have the name of the person here. Let's add a section where they can select their gender. Let's go back to the wires, mobile wireframes and let's scroll out. Let's see if we can find anything with [inaudible] just grab this radio button here and let's paste that. Let's say this says, male and then let's duplicate that, Command D and let's say this says, female. Okay, let's grab them both. Let's move them over a bit and let's duplicate this John Doe so we can give this section a title. Let's call this gender and let's make it a little smaller. Let's make it 18 point. Lets move these back over. Let's give this a colon here at the end, and let's change the color of this because I don't want these two colors to be the same. Let's make this a little lighter. Let's go back to wires and we'll see we have all our colors here. Let's grab a color. We can copy this hex color here. Let's go back and let's add that color in the fill section. There we go. Now if we go to library colors, we don't have anything in our color section. Let's start adding those into our document colors. Let's double-click this and let's add that color, so now we have this color added. Let's go here, and let's add this color. Now we can just click on these colors as we go through to add them when we need them. Okay, so we have our gender section. Let's group these, Command G. We'll group. That's not center, we want these to be left aligned, but that's our gender section. Let's duplicate that. Move this down, and this next section will be the height section. Type in height, and we want that left aligned, and what we want here are text input fields, not radio buttons. So let's get rid of the radio buttons. We want this to actually be feet, and we want this to be inches and then let's grab a text field. We can just grab this one here on the, "Create Account" screen and let's paste that in here and then let's size it down and make it smaller. Maybe something like this here. We can add that next to feet. So now user will type in there the amount of feet they are, five feet, six feet there and let's duplicate this and give it one for inches as well. Let's look and see where all of our layers are. Let's add these input fields into this group. So now that we can move this around, so we have our height section. Let's space this out a little bit. All right, so now let's add a fitness level. Let's duplicate gender again, and let's call this fitness level. Got to remember to make these things left aligned. What we want is, we want the user to be able to select whether they are a beginner, experienced. Let's duplicate that again, Command D and say, "This option is advanced". So those are all lined up. Let's move this down slightly. All right, so we have the name, we have the gender they would select, they would add their height, six feet, two inches, for example. Fitness level, select whether you're a beginner, experienced, or advanced. Now we want to have a section where we find out the type of workouts that they like. Let's just copy this and let's paste it and let's say this header will be workouts you like. We need some images. Let's move this down. We'll need some images that will act as place holders for the type workouts. For example, maybe we'll have a cardio section, a weight section, a HIIT section and a body weight section, and they would select which of those workouts they like. Let's go back to the wires, wireframe kit and let's find some cards maybe. Let's see if there's any cards on here we can grab. Let's zoom out. Let's get a better view. Let's go over here to this section and let's just grab some cards from our UI elements section here and let's copy that. Let's go back to our wireframe and let's just paste that in. Let's just get rid of this bottom right here, bottom text and let's call this cardio. Let's change the color of this. Let's center the name, cardio and let's duplicate this. Move this over, and this will be a selection for weights. Let's grab both of these and center. Let's move it up a little bit. Let's move our create an account button down, and let's duplicate this row. Bring it down here, seems like we have to move a bunch of stuff up. Let's move some things up so we can have some room. Okay, let's call this HIIT, and this will be bodyweight exercises. If they like those, they can select that. We can actually just make this screen a little longer so we have more space. If you select a frame and then grab the bottom, you can change the height of the art board. Same thing with the width. You can change the width, but we don't want to do that. So let's make it a little longer. This way we can move our button down and things aren't so smushed together, give it some space. Select this section and move it down, select this and move it down. Get a little space here. Here we would just want our button to say, "Continue". So that is our profile setup screen. Right now we have two screens. We have the create an accounts screen. They create an account, it'll take them to their profile set-up where their name will be populated from the full name input field here. Then they would select their gender, add their height information, what fitness level they are, and the type of workouts they like. Then they will click, "Continue" and they'll go to the next screen, which will be our list of workouts screens. So we'll create the list of workout screen in our next video. But these are the first two screens we have currently in our wireframe set of mockups. So we have Create an account, and set up your profile. Again, we'll create the list of workout screens in the next video. 21. List of Workouts Screen in Adobe XD: Now, let's create our List of Workout screen. We have our two screens that we created in previous videos, Create an Account and Profile Setup. Now we'll create our third screen, the List of Workout screen. Let's duplicate Create an Account. Let's rename it to List of Workouts. Let's get rid of some of the elements so we can start it from scratch. On this screen, we have the List of Workout screen. We want a search bar, list of workout types where users will click one of the category buttons, and now it'll display a list of workouts based on that category. For example, if you click "HIIT", the HIIT category will display a list of HIIT exercises. If you select "Weights", it'll select display a set of exercises displaying your workouts with weights. If you select "Cardio," for example, that category will display a list of cardio work. Under that, you'll click "Continue" again as well, and we'll have a tab bar at the bottom, which all users can go back to the Home screen, they can go to their Profile screen, and they can go to the List of Workout screen. Let's just create this List of Workout screen now. The first element that we'll need is a search field at the top, so the user can search for, if they want a specific workouts, say burpees, they can search for burpee. Put burpee in the search box, and that will populate a list of workouts that includes burpee exercises. Let's go back to our wireframe screen. Let's go down to filters and search. Let's search for a search field. We can grab this one. This looks good. Go back up to our wireframes, and let's add that to the top. Then our next section, let's look for a title for our category bar. Let's go to UI elements and see if there's anything on there. We can probably use this. Let's add this. Lets look for header of some sort that we could use. I could just copy this, duplicate it, and just size it down. Make it 14. Let's make it 16. Let's call it workout type. Let's make it workout type, and then we'll have a list of buttons. Let's go back to our wireframe kit. Let's go to UI elements. Let's grab some buttons. Let's grab this normal button here. We'll copy that. Paste that into our wireframe. Lets size it down. So we want three of them, so make the width, we say, 100. Let's say this first button will say HIIT. Let's duplicate that, and this second workout will say Weights. Let's duplicate that again, and this one will say Cardio. Under that we will display a list of workouts based on the category. You select HIIT, it'll show a list of HIIT workouts. Let's grab a card here and let's add that as a place holder. Show workouts, let's show this as Burpees. Let's center that. Let's duplicate this. Let's say Cardio. Let's duplicate that row down. Let's say this is Core Cardio. This one will say Strength Training. Let's change the colors. Let's say HIIT workout type is default. Selected by default, so let's [inaudible] color of this. This is the active color. Under all of these, we want to have a button that says Continue. You search for workout, if you have a specific workout in mind, say push-ups. Display the push-ups here or you can go by category type. HIIT will show, you the HIIT workouts. That will display the same here. If Weights, it'll change to that color, and it'll show you a list of workouts with weights, and so on with Cardio. See? Now we want a tab bar at the bottom. Let's go back to our wires screen and let's see if we have a bar. A bar here. What else? Just use that bar here. That'll be our tab bar, and we'll worry about what sections would be in there later. This will be our tab bar that we can click back and forth based on the link in the tabs. We can navigate towards different screens in our flow. We won't necessarily make all of those screens, so we don't really need all these buttons right now, but we can fix that later. But this is our list of workout. So we got Create and Workout, Profile Setup, and List of Workouts, search bar, workout type category buttons. Then from there, we have our workouts display based on that category, continue bar, and our tab bar. In the next screen, we will create our Workout Detail screen. Let's say this HIIT workout, you select burpees, and you'll be taken to a Workout Detail screen, which shows that burpee workout. 22. Workout Details Screen in Adobe XD: In this video, we will create the Workout Details Screen. This screen will have the details about the workout the user selected in the previous screen. So we'll have a workout title, we'll have a place holder image for the video, we'll have a description about the video, and a start button. Let's go on and create this screen. Let's duplicate the create an account screen, so let's get rid of whatever items we don't need. Let's start creating this screen. First we'll need a back button to get back to the list of workout screen. Before we do that, let's name this artboard here, workout details. Okay, so we will need a back button. Just in case you user it wants to get back the list of workouts screen. Let's go get an arrow. Let's go to the wires mobile and let's look under UI elements, let's look for an arrow, back arrow. We can use any arrow, but let's use this. Let's zoom in and we'll grab this arrow. Let's go back to our screen. Let's add that and let's have a title for this screen. Let's duplicate this, let's move it up and let's call this class details screen and let's size this down. Let's make it say 14 and let's center it and let's have a title. So placeholder text for right now, we'll just call it workout title. Center that text. Now center aligned and center it on the screen and now we need a placeholder image right about here. So let's go back to wires and see if we can find a place holder image. Let's scroll out and go to UI elements and here you go, here's an image we can use as a placeholder. Let's put that on our screen and let's center that. Let's get rid of these log in elements, we don't need those. Let's move this down. Let's change the color of this and let's add this color. If you double-click and you see the fill color here, you can just add that, so that will add a new color in your colors palette. Now we can just easily click on it, click on the color of the change, the colors as we need them. All right, so now let's go find a description. We'll add a description down here. Let's go back to wires and let's find a description. Looks like we have something here. Let's just select that, let's copy it, let's go back to our wire frames and let's paste that in. Let's get rid of this small body and grab these handles. You can change the width of the text. Let's center this. Now let's use this button, let's change it to say start. So the user would click this to take them to the actual video screen where they can start playing the video and start doing their workout. Let's add this tab bars well to this screen. So we have our workout detail screen. So here in the list of workouts, a user will click a category, let's say HIIT, they'll have a display of the hit workouts in that category. For example say these are burpees, HIIT workout. You click on that, you'll go to the workout detail screen, which we just created. Which will have a place holder of that video image, which will have a placeholder image of the video that will display, that will have a description and let's change this to say description title and let's bold that. So we have a description title, some placeholder text which we'll describe what that workout will be about, and a start button. You click the start button, it'll take you to the next screen, which will be the workout video screen and we will create that in the next video. 23. Workout Video Screen in Adobe XD: Let's create our last screen, the workout video screen. On this screen we'll have the video which you can click the "Play" button, it'll start playing the video and we'll have an End of Workout button, which allows a user to end the workout if they have to end it quickly for whatever reason. Let's start creating the screen. Let's duplicate Artboard or we can just create another Artboard by clicking this icon here. Let's do another iPhone 10. Let's call this Artboard Workout video and let's search for a video placeholder. Let's go back to the Wires-Mobile. Let's zoom out and let's scroll down to photos and video. Let's find video, let's copy this. This is a good one. Go back to our Wireframes. Let's paste that in and that's good. Let's grab a button, copy this from our workout detail screen, paste it in here and let's change the name to End Workout. If the user has to end the workout early, they can just click a button to do so. Let's find like some video time duration. We can find that. It allows the user to know how much time is left in the video, how much time has elapsed, etc. Let's come down here and let's copy that and let's add that to our screen. Let's move that up. Lets group it. If we want to group, we Command G. Now, let's just call it time duration or something like that and now we can move these elements around easily. I think for the most part that's why we went for the screen. You get to this screen by the user at being at the workout details. They have the workout title description and they click "Start". Then that'll take them to the Workout Video screen here where they can play the video. The video will play and then, they'll see how much time has gone by, how much time is left. Then they can end the workout if they need to end it early first for whatever reason. If they end the workout early, they click the button, and that'll take them back to the Workout Detail screen. These are our five screens, we've created all five; Create an Account, Profile Setup, List of Workouts, Workout Details, and Workout video. In our next video, we will start to prototype, where we will create a low fidelity prototype by linking all of these screens together so that when you click a button or whatever action on each screen, it'll take you to the next screen. This will allow our design team members or our test users or the stakeholders of the project to be able to quickly test our prototype to see if it's headed in the right direction. What you don't want to happen is, you design all these screens, start to build the app and realize, "Oh, we forgot this screen. Oh, we forgot this element on that screen." You have to go back and make all these changes in the development phase. Whereas if you just created a prototype in the beginning, you can get a good handle if the flow is good for the user, if there are any pain points that you need to fix before you get to the Development stage, the coding stage of the app. In the next video, we'll create our low-fidelity prototype. 24. Linking and Presentation in Adobe XD: Now let's start linking together our wireframe screens so that we can produce a prototype for users to test. In the top left corner of XD, click the "Prototype" tab. Now let's select our first art board so we can start making it interactive. Let's zoom in a bit. What we want to do, we don't want to link the entire screen, we want to link just the "Create an account" button. So what we'll do is we'll select that button. When you select an element, you'll notice that it will become blue, and on the right side an arrow will appear. Click that arrow and drag it to the art board or screen that you want to link it to. So in this instance we want to click and drag to the profile setup screen. You release the mouse once you see a blue border around the art board that you want to link it to. Once it's linked, you'll see in the right column here, options to customize the interaction. You have what will trigger the interaction, a tap, a drag, the keypad, or voice trigger, what type of transition, auto animate, overlay, scroll to, previous art board, audio playback, or speech playback. In this case, we just want a transition. The destination screen that you want to go to, we select a profile set up. So we'll keep that as the same profile setup. What type of animation, dissolve or you have sliding options, or push options. Let's go with slide left. Then we have easing and duration, and we'll keep those as default. So we wanted to continue that same process for the rest of our screens. We want to click on the element that will be clickable in that art board, and we want to link it to the screen that we want to take the user to. So I'll continue to link all of these buttons. Click ''Continue'' on the profile settings screen link it to the list of workouts. Click ''Continue'' on the list of workout screens. Let's link that to workout details. Click the ''Start'' button and let's link that to the workout video screen. For this transition, let's try something a little different, let's slide up. So now we're ready to preview our prototype. What we have to do is click our initial art board, which will be like the home screen, which will be where the prototype presentation will start. So where we want the presentation to start, we're going to start with this first art board here. So we click that and then we click ''Preview''. Now we can start clicking through our prototype. Users will come to the "Create An Account" screen, they'll fill out their name, e-mail, password and confirm password, click ''Create an account'' and then they have their profile setup screen with their name John Doe, say that was entered in the screen previous. Select their gender or height, fitness level, and workouts that they like. Click ''Continue''. Now you're on the list of workout screen. You have the workout types, user selects ''Hit'', you see a bunch of hit workouts, and they click ''Continue''. Now you have the workout title. Say you selected ''Barbies'' on the previous screen. So now this will be the workout title say Barbies, an image of that workout and the description. You can click ''Start'', and as you see it pushes up, and you can start to play your video to start your workout. So here we have our finished prototype in XD. Now, let's say you want to share that prototype. In order to share, you go to the Share tab top-left of XD, and you'll see options in the right side again giving you options to customize how you want to share this link. What do you want to link? Well, we want to link the UX intro to wireframe which is the name of our project, the view setting, design review. You want to share it to developers. Presentation mode, user testing or custom, we'll just leave it as design review, and who has access to the link: anyone with the link, only invited people, or anyone with the password. We'll go with anyone with the link, and then we would click ''Create Link'' and XD will process and shortly give us a link that we can then click on and we can share this link with our users, stakeholders, other designers, development team so they can preview the prototype and give us feedback. Let's click the link. Let's just scroll through these initial persona screens, user flow and let's get to our first art board. So the users, whoever you want to test the screen, will now click that link and see this in the browser and then they can click through the prototype. Then they can add feedback, they can make a comment, type in some text, submit, that sort of thing. So there we have our prototype in XD, and we had the ability to show it to our stakeholders, fellow designers, developers, other team members. So it's not really that difficult to create a prototype in XD or share with your team members. So I'm hoping you'll build a few screens in XD, practice linking those screens up and start making prototypes on your own as well. 25. Final Thoughts: That's the end of the class. In this course, we talked about Balsamiq and Adobe XD and its importance in wireframing and prototyping. We went over the tools in Balsamiq and Adobe XD, and we wireframed and prototyped an example mobile app so that 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.