0 1 00:00:01,040 --> 00:00:04,230 All right it's time to do some hands on design work. 1 2 00:00:04,310 --> 00:00:09,390 So we're going to introduce you step by step through how digital designs come to be. 2 3 00:00:09,510 --> 00:00:15,080 And we're going to use the example project of building a workout app to illustrate the whole process 3 4 00:00:15,080 --> 00:00:19,220 how we go from beginning to end to designing a beautiful app. 4 5 00:00:19,220 --> 00:00:23,030 So the first thing we have to figure out is what we want to be able to do, 5 6 00:00:23,030 --> 00:00:24,220 what are the features. 6 7 00:00:24,410 --> 00:00:29,660 Well there's only three main features that we want for our workout app and that's to be able to choose 7 8 00:00:29,750 --> 00:00:35,750 which workouts we want to do, to be able to track our workout and look at some stats of how well we're 8 9 00:00:35,750 --> 00:00:36,370 doing, 9 10 00:00:36,380 --> 00:00:39,830 and thirdly to have a screen that guides you through a workout. 10 11 00:00:40,340 --> 00:00:42,300 So that's all that our app needs to achieve. 11 12 00:00:42,290 --> 00:00:44,110 So let's get started. 12 13 00:00:44,120 --> 00:00:45,160 What's the first step? 13 14 00:00:45,260 --> 00:00:51,740 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 15 00:00:51,770 --> 00:00:52,280 work. 15 16 00:00:52,280 --> 00:00:54,970 So there's two websites that I would highly recommend. 16 17 00:00:54,980 --> 00:01:01,190 One is www.mobile-patterns.com and the other one is www.pttrns.com and the links to both are 17 18 00:01:01,190 --> 00:01:03,000 in the text box below. 18 19 00:01:03,080 --> 00:01:10,670 And essentially what these websites do is they curate whole sections of app designs based on a particular 19 20 00:01:10,670 --> 00:01:16,490 theme and you can see for example how Foursquare has designed this nice little faded out map, where you 20 21 00:01:16,490 --> 00:01:23,300 can see how Instagram has shown a location based version of their photos on a map. And basically the 21 22 00:01:23,300 --> 00:01:29,930 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 23 00:01:29,930 --> 00:01:30,550 than A." 23 24 00:01:30,680 --> 00:01:33,540 But how do you come up with A and B in the first place? 24 25 00:01:33,710 --> 00:01:39,260 Well this is one place to start looking and start getting inspiration for all of your design needs. 25 26 00:01:39,260 --> 00:01:43,880 So in my case, I quite liked the look and feel of the sunrise calendar. 26 27 00:01:43,880 --> 00:01:49,410 I like the idea of having a navigation bar at the top for our workout app, having action buttons over 27 28 00:01:49,410 --> 00:01:56,030 here such as starting work out or going back or whatever or navigation and having my calendar display 28 29 00:01:56,030 --> 00:02:02,200 very simply and maybe having colored circles to represent days which I've worked out, 29 30 00:02:02,390 --> 00:02:07,400 and then at the bottom you can see a detailed view of my workouts on particular days. How many minutes 30 31 00:02:07,400 --> 00:02:08,880 I've been training etc. 31 32 00:02:09,050 --> 00:02:09,830 Something like that. 32 33 00:02:09,830 --> 00:02:16,040 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 34 00:02:16,040 --> 00:02:21,110 different ways. You can come up with your own color palette, you can design colors that fit well with 34 35 00:02:21,110 --> 00:02:23,960 each other especially if you are a graphic designer. 35 36 00:02:23,960 --> 00:02:25,430 This will be very natural to you. 36 37 00:02:25,490 --> 00:02:31,190 But for the rest of us, it can be difficult to come out with colors that fit a certain mood or colors 37 38 00:02:31,190 --> 00:02:35,060 that harmonize with each other or colors that stand out etc. 38 39 00:02:35,180 --> 00:02:38,280 This is why I like to use a free tool called www.colorhunt.com. 39 40 00:02:38,300 --> 00:02:45,050 And what colorhunt lets you do is it lets you browse through a whole bunch of color palettes that professional 40 41 00:02:45,050 --> 00:02:46,720 designers have come up with. 41 42 00:02:46,850 --> 00:02:51,770 And once you found something that you quite like the look of say we're going to pick this one, 42 43 00:02:51,770 --> 00:02:58,430 then you can simply just copy and paste the hex codes of the colors into your design projects. So you 43 44 00:02:58,430 --> 00:03:03,380 can also search this by popular, or by hot. 44 45 00:03:03,380 --> 00:03:08,030 I'm still not sure what is the difference between hot and popular on this website. Let me know if you 45 46 00:03:08,030 --> 00:03:08,780 figure it out. 46 47 00:03:08,780 --> 00:03:11,220 So let's pick a color palette for our work out. 47 48 00:03:11,330 --> 00:03:16,720 So it's something that's got to be fun and kind of vibrant. 48 49 00:03:16,880 --> 00:03:17,870 Let's pick this one. 49 50 00:03:17,870 --> 00:03:19,000 That seems pretty good. 50 51 00:03:19,130 --> 00:03:20,740 So I would typically-- 51 52 00:03:20,750 --> 00:03:27,980 So I would typically note down all of these hex codes in a note taking app and I'll be able to refer 52 53 00:03:27,980 --> 00:03:29,220 to it when I need it.