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