0 1 00:00:00,510 --> 00:00:03,860 All right. So how was it designing your user flow? 1 2 00:00:03,870 --> 00:00:07,730 All right so how was it designing your first user flow diagram? 2 3 00:00:07,770 --> 00:00:14,280 If it's particularly remarkable or particularly beautiful, feel free to share it in the comment box below 3 4 00:00:14,310 --> 00:00:16,660 and we can all marvel at your work. 4 5 00:00:17,040 --> 00:00:17,330 All right. 5 6 00:00:17,340 --> 00:00:19,650 So it's time to go onto the next stage. 6 7 00:00:19,650 --> 00:00:25,520 What do you do once you've completed the user flow diagram and you've designed all of the user journeys? 7 8 00:00:25,530 --> 00:00:28,540 Well, you go on to a state called wireframing. 8 9 00:00:28,620 --> 00:00:34,980 Now what are wireframes? Wireframes are essentially a low fidelity representation of how your app will 9 10 00:00:34,980 --> 00:00:36,320 look in the future. 10 11 00:00:36,540 --> 00:00:42,720 So, essentially you're designing with a piece of paper and a pencil and you're drawing out where the 11 12 00:00:42,720 --> 00:00:45,430 images go, where the buttons go. 12 13 00:00:45,480 --> 00:00:49,990 Essentially just a sketch or an outline of how your app would look. 13 14 00:00:50,010 --> 00:00:52,290 And this is really meant to be very rough and ready. 14 15 00:00:52,290 --> 00:00:58,480 It shouldn't take you more than 20 minutes to draw up you know 10 screens in your app because nobody's 15 16 00:00:58,500 --> 00:01:00,120 judging your drawing abilities. 16 17 00:01:00,120 --> 00:01:07,020 All it has to do is to make the layout of the screen super clear so that in the future when you're designing 17 18 00:01:07,020 --> 00:01:09,420 a mockup or you're designing a prototype, 18 19 00:01:09,630 --> 00:01:11,670 you know how the screen will look. 19 20 00:01:11,820 --> 00:01:15,060 So this is about the placement of the images. 20 21 00:01:15,060 --> 00:01:17,400 Am I going to use a tab bar? 21 22 00:01:17,390 --> 00:01:25,380 Am I going to have a navigation controller? etc. And it's only meant as-- and it's only meant as a rough 22 23 00:01:25,380 --> 00:01:27,720 sketch of how your app will work. 23 24 00:01:27,720 --> 00:01:31,270 So I'm going to tell you about some my favorite tools for wireframing. 24 25 00:01:31,380 --> 00:01:35,090 Now just a disclaimer, we're not affiliated with these guys. 25 26 00:01:35,160 --> 00:01:39,130 I just use a lot of their tools and I really like them. 26 27 00:01:39,150 --> 00:01:40,900 And so that's why I'm telling you about it. 27 28 00:01:40,980 --> 00:01:46,560 So one of the companies I really like is UI Stencils and they produce these stainless steel stencils 28 29 00:01:46,560 --> 00:01:50,360 that remind me of when I was a kid. And they've created the same thing, 29 30 00:01:50,370 --> 00:01:56,790 so cut outs, of all the common icons that you use when you're designing apps. 30 31 00:01:56,790 --> 00:02:04,980 So for example a location indicator or a heart or a thumb up or the play button and it comes in really 31 32 00:02:04,980 --> 00:02:08,080 handy when you're just sketching things off the bat. 32 33 00:02:08,100 --> 00:02:16,180 And another thing I use from them is a sketch pad which has iPhone or Android phones or iPad or website 33 34 00:02:16,200 --> 00:02:25,850 whatever that is printed on a thick paper and you can essentially sketch on the go all of your ideas. 34 35 00:02:25,860 --> 00:02:32,730 So for somebody like me who has an app idea probably realistically every five minutes, 35 36 00:02:33,000 --> 00:02:34,730 this is really a boon. 36 37 00:02:34,730 --> 00:02:42,050 So I can get those ideas down on paper and see just how terrible or great they are. Mostly they're terrible. 37 38 00:02:42,060 --> 00:02:45,880 But my procrastination saves the world from all my terrible ideas. 38 39 00:02:45,900 --> 00:02:51,740 So if you just want to use these templates you don't actually have to buy it from them. 39 40 00:02:51,750 --> 00:02:58,230 I've included a download link to a free version, a free PDF version that you can download and print out 40 41 00:02:58,230 --> 00:03:01,100 yourself and it's in the text box below. 41 42 00:03:01,170 --> 00:03:02,360 So have a look at that. 42 43 00:03:02,370 --> 00:03:07,620 Now what we're going to do is we're going to take or user flow diagram that we created in the last 43 44 00:03:07,680 --> 00:03:12,020 module and we are going to convert all of the screens. 44 45 00:03:12,030 --> 00:03:16,140 Remember that screens are represented in user flow diagrams by rectangles. 45 46 00:03:16,260 --> 00:03:20,480 So we're going to take all these screens and we're going to turn them into wireframes. 46 47 00:03:20,610 --> 00:03:25,210 Let me show you how I've done it for this example workout app. 47 48 00:03:25,300 --> 00:03:29,270 And please don't judge my terrible drawing. I've decided to go for very simple welcome screen. 48 49 00:03:29,280 --> 00:03:35,250 It'll probably have a background color, a single flat color. And I've got an image of some dumbbells over 49 50 00:03:35,270 --> 00:03:37,260 here and I've got two buttons: 50 51 00:03:37,260 --> 00:03:39,690 login with Facebook or login with Google 51 52 00:03:39,930 --> 00:03:46,170 as we saw in our user flow diagram. Now the next stage if you click on one of these buttons you get 52 53 00:03:46,170 --> 00:03:51,120 taken to the home screen. And on the screen I want to give people an encouraging message when they first 53 54 00:03:51,120 --> 00:03:52,020 land on it. 54 55 00:03:52,050 --> 00:03:58,710 So telling them how many days have they been on a streak of workouts. "You've had a three day streak. 55 56 00:03:58,770 --> 00:04:00,480 So keep it up" essentially. 56 57 00:04:00,600 --> 00:04:03,840 And then there's a start button which allows them to start a workout 57 58 00:04:03,900 --> 00:04:06,450 and also there is a tab bar at the bottom. 58 59 00:04:06,450 --> 00:04:13,080 Now this is compliant with the iOS design guidelines where navigation between screens is mostly done 59 60 00:04:13,080 --> 00:04:14,490 through tab bars. 60 61 00:04:14,490 --> 00:04:16,110 Now if you're designing for Android 61 62 00:04:16,110 --> 00:04:18,240 the rules are slightly different. 62 63 00:04:18,240 --> 00:04:24,390 And the reason for that is on Android you have physical buttons usually on the phones down here. 63 64 00:04:24,390 --> 00:04:30,930 So you've got a back button, you've got a home button etc. So you never want to have two rows of buttons 64 65 00:04:30,930 --> 00:04:36,260 on top of each other because the chance for tapping on the wrong button is very high. 65 66 00:04:36,450 --> 00:04:42,450 So for Android designs you tend to see a hamburger menu so the three lines up here and it looks a bit 66 67 00:04:42,450 --> 00:04:45,170 like a hamburger and you get a pop out menu. 67 68 00:04:45,180 --> 00:04:50,880 It's always important to be aware of the design conventions for the environment that you're designing 68 69 00:04:50,880 --> 00:04:51,130 for. 69 70 00:04:51,150 --> 00:04:56,250 So coming back to work out app you can click on this button to browse through workouts and click on 70 71 00:04:56,250 --> 00:04:58,920 the calendar to see how often you've been working out, 71 72 00:04:58,920 --> 00:04:59,840 look at your stats. 72 73 00:05:00,150 --> 00:05:02,380 You can click on this button to check your profile. 73 74 00:05:02,400 --> 00:05:04,680 And this of course is the current homescreen. 74 75 00:05:04,710 --> 00:05:08,660 So the next screen that we've got is the workout list 75 76 00:05:08,700 --> 00:05:14,100 so the browsing through the workout screen. And I have decided to go for a sort of table layout where 76 77 00:05:14,100 --> 00:05:16,050 you've got the name of the exercise, 77 78 00:05:16,140 --> 00:05:18,240 you've got an image of the exercise 78 79 00:05:18,270 --> 00:05:20,730 and how many reps you should do each time. 79 80 00:05:20,730 --> 00:05:27,880 And here I wanted to be able to tap on these images and select them and add them to my workout. 80 81 00:05:27,900 --> 00:05:33,300 And finally the last screen we've got is the workout sessions screen. Again 81 82 00:05:33,360 --> 00:05:40,020 really poor drawing on my part. You should imagine that this is a man jumping into a star shape. And it 82 83 00:05:40,020 --> 00:05:46,950 could be you know an animated gif or it could be a looping video that shows the user how to do star jumps. 83 84 00:05:47,040 --> 00:05:50,130 And then you keep track of how many sets of workouts they've done, 84 85 00:05:50,310 --> 00:05:52,280 how many repetitions they need to do 85 86 00:05:52,320 --> 00:05:54,980 and then you track how long they've been working out for. 86 87 00:05:54,990 --> 00:05:59,910 And we also designed in our user flow diagram that you should be able to proceed to the next exercise 87 88 00:06:00,000 --> 00:06:05,380 through a button that's simply represented as a right arrow on my screen. 88 89 00:06:05,460 --> 00:06:12,360 So that's pretty much a very very simple wireframe of the main screens in my app. 89 90 00:06:12,390 --> 00:06:18,720 Now this has been very easy to create and it literally takes five or ten minutes just to sketchup. 90 91 00:06:18,780 --> 00:06:23,420 And it allows you to formulate your ideas into something tangible. 91 92 00:06:23,430 --> 00:06:29,280 So the next step I'm going to show you is something really cool. And it's a free app called Pop that 92 93 00:06:29,310 --> 00:06:32,260 allows you to take photos using your phone of 93 94 00:06:32,330 --> 00:06:39,390 all of these wireframes and you can link them up through buttons and finally you end up with a working 94 95 00:06:39,390 --> 00:06:40,950 prototype on your phone. 95 96 00:06:40,950 --> 00:06:44,130 So let me show you what mine looks like. 96 97 00:06:44,160 --> 00:06:52,770 I've designed a total of nine screens for this hypothetical workout app. And all you do is you design-- 97 98 00:06:52,920 --> 00:06:59,400 all you do is you draw them pen on paper and all you do is you draw them out pencil on paper and you 98 99 00:06:59,400 --> 00:07:08,400 use the pop app which is free to download on Android and iOS and then you can insert these links. And 99 100 00:07:08,400 --> 00:07:16,320 you can say when the user clicks on this area, we should link to the home screen for example. And it allows 100 101 00:07:16,320 --> 00:07:19,070 for some pretty neat gestures and interactions. 101 102 00:07:19,110 --> 00:07:26,910 So for example in my list of exercise screen, I've decided to designate an area which allows you to swipe 102 103 00:07:27,000 --> 00:07:33,300 up and it links up to the next page that simulates what would happen in the app if you just swiped up 103 104 00:07:33,660 --> 00:07:36,150 on that table of exercises. 104 105 00:07:36,150 --> 00:07:38,970 Let me show you what this looks like when it's completed. 105 106 00:07:39,030 --> 00:07:44,340 So here's my workout app and I'm going to choose to login with Facebook. 106 107 00:07:44,610 --> 00:07:53,210 I get taken to the home screen and I decide to browse through my workouts and I can see that there's 107 108 00:07:53,220 --> 00:07:55,950 these images of my workouts. 108 109 00:07:55,980 --> 00:07:58,220 I'm going to select the ones that I want to do. 109 110 00:07:58,250 --> 00:08:00,740 So I want to do some squats, some star jumps etc.. 110 111 00:08:01,110 --> 00:08:05,750 And then I'm going to swipe up to see some of the other exercises. 111 112 00:08:05,870 --> 00:08:06,280 Okay. 112 113 00:08:06,300 --> 00:08:08,240 So I'm done with my exercises. 113 114 00:08:08,430 --> 00:08:11,720 Let's go back to the home screen and start the workout. 114 115 00:08:12,210 --> 00:08:17,830 So this takes me to the workout session and it tells me that I should be doing star jumps 30 of them 115 116 00:08:18,270 --> 00:08:20,250 and I've been working out for 15 minutes. 116 117 00:08:20,430 --> 00:08:24,630 I can either end the session or I can progress to the next workout. 117 118 00:08:25,200 --> 00:08:27,120 And this is meant to be sit ups. 118 119 00:08:27,120 --> 00:08:32,300 I'm sorry this doesn't look like sit ups but just bear with me. 119 120 00:08:32,340 --> 00:08:37,260 And then on the screen I'm going to end my session and go back to the homescreen and have a look at 120 121 00:08:37,260 --> 00:08:38,250 my stats. 121 122 00:08:38,280 --> 00:08:42,710 These were the days in the last month that I have been working out. 122 123 00:08:42,930 --> 00:08:46,010 There's some more detail down here which I can swipe through 123 124 00:08:46,050 --> 00:08:51,300 and then if I click on this graph button it shows me the graph of how frequently I'm working out and so 124 125 00:08:51,300 --> 00:08:53,920 I can toggle between these two like so. 125 126 00:08:53,970 --> 00:08:59,880 And then finally we're gonna to have a look at the profile page which just shows an image of the user, their 126 127 00:09:00,300 --> 00:09:02,340 name and some of their body stats 127 128 00:09:02,340 --> 00:09:04,880 and you can edit that as needed. 128 129 00:09:05,130 --> 00:09:11,220 And then we go back to the home screen and that's essentially a working prototype that was created in 129 130 00:09:11,220 --> 00:09:12,570 less than 30 minutes. 130 131 00:09:12,570 --> 00:09:12,950 All right. 131 132 00:09:12,960 --> 00:09:14,330 So you got the hint. 132 133 00:09:14,400 --> 00:09:17,960 This is again your turn to do some hands on design work. 133 134 00:09:18,060 --> 00:09:26,280 And going back to that recipe app, we want you guys to turn that user flow diagram into wireframes. 134 135 00:09:26,280 --> 00:09:33,030 So for every single screen that you've drawn, you should have a screen that sketched out as a wireframe. 135 136 00:09:33,600 --> 00:09:40,470 And then we want you to download the free Pop app onto your phone and link up the different screens 136 137 00:09:40,770 --> 00:09:43,120 through creating these buttons. 137 138 00:09:43,290 --> 00:09:50,790 So all you need to do when you're using Pop is you just need to select an area and click link to and 138 139 00:09:50,790 --> 00:09:53,400 decide which screen you want to link it to. 139 140 00:09:53,490 --> 00:09:57,510 And once you've linked up all the screens you'll have a working. 140 141 00:09:57,720 --> 00:10:02,130 You'll have a simple working prototype that you can show anybody. 141 142 00:10:02,130 --> 00:10:08,620 So very often people have ideas and they can't quite articulate it in a way that anybody understand 142 143 00:10:08,670 --> 00:10:10,110 what it does. 143 144 00:10:10,140 --> 00:10:16,920 This is the perfect way to putting those thoughts down into an actual prototype that you can show people 144 145 00:10:16,920 --> 00:10:22,340 how it works and all of its benefits rather than telling them about it. 145 146 00:10:22,350 --> 00:10:28,170 So these are some of my favorite tools and I'm looking forward to the awesome prototypes that you guys 146 147 00:10:28,170 --> 00:10:29,050 are going to create. 147 148 00:10:29,250 --> 00:10:32,430 So happy designing and I'll see you on the next lesson.