All right it's time to do some hands on design work. 1
So we're going to introduce you step by step through how digital designs come to be. 2
And we're going to use the example project of building a workout app to illustrate the whole process 3
how we go from beginning to end to designing a beautiful app. 4
So the first thing we have to figure out is what we want to be able to do, 5
what are the features. 6
Well there's only three main features that we want for our workout app and that's to be able to choose 7
which workouts we want to do, to be able to track our workout and look at some stats of how well we're 8
doing, 9
and thirdly to have a screen that guides you through a workout. 10
So that's all that our app needs to achieve. 11
So let's get started. 12
What's the first step? 13
Well the first step is to have a look at some of our patterns and be inspired by some of the best designer's 14
work. 15
So there's two websites that I would highly recommend. 16
One is www.mobile-patterns.com and the other one is www.pttrns.com and the links to both are 17
in the text box below. 18
And essentially what these websites do is they curate whole sections of app designs based on a particular 19
theme and you can see for example how Foursquare has designed this nice little faded out map, where you 20
can see how Instagram has shown a location based version of their photos on a map. And basically the 21
problem is that you know as humans we can all see versions A Version B and C and see that "Oh. B looks better 22
than A." 23
But how do you come up with A and B in the first place? 24
Well this is one place to start looking and start getting inspiration for all of your design needs. 25
So in my case, I quite liked the look and feel of the sunrise calendar. 26
I like the idea of having a navigation bar at the top for our workout app, having action buttons over 27
here such as starting work out or going back or whatever or navigation and having my calendar display 28
very simply and maybe having colored circles to represent days which I've worked out, 29
and then at the bottom you can see a detailed view of my workouts on particular days. How many minutes 30
I've been training etc. 31
Something like that. 32
So now that we've got ideas, the next step is to pick a color palette. So you can go about this in many 33
different ways. You can come up with your own color palette, you can design colors that fit well with 34
each other especially if you are a graphic designer. 35
This will be very natural to you. 36
But for the rest of us, it can be difficult to come out with colors that fit a certain mood or colors 37
that harmonize with each other or colors that stand out etc. 38
This is why I like to use a free tool called www.colorhunt.com. 39
And what colorhunt lets you do is it lets you browse through a whole bunch of color palettes that professional 40
designers have come up with. 41
And once you found something that you quite like the look of say we're going to pick this one, 42
then you can simply just copy and paste the hex codes of the colors into your design projects. So you 43
can also search this by popular, or by hot. 44
I'm still not sure what is the difference between hot and popular on this website. Let me know if you 45
figure it out. 46
So let's pick a color palette for our work out. 47
So it's something that's got to be fun and kind of vibrant. 48
Let's pick this one. 49
That seems pretty good. 50
So I would typically-- 51
So I would typically note down all of these hex codes in a note taking app and I'll be able to refer 52
to it when I need it.