WEBVTT 0 00:00.540 --> 00:07.410 Now that we've learned about some of the principles of web design such as Color Theory, Typography, User 1 00:07.410 --> 00:14.730 Interface design and User Experience design, the four pillars, it's time to apply what we've learned and 2 00:14.790 --> 00:17.040 build a design together. 3 00:17.040 --> 00:23.220 Now there's a website called Daily UI which gives you a task to design every day for 100 days. 4 00:23.790 --> 00:29.610 It's free to sign up and it's something that really does improve designing skills by just that repeated 5 00:29.610 --> 00:31.060 practice. 6 00:31.110 --> 00:37.070 Now if you take a look at a website called Collect UI you can see they've collected together all the 7 00:37.170 --> 00:43.290 designers attempts at designing each of these daily challenges and you can see examples what each of 8 00:43.290 --> 00:44.800 these challenges are. 9 00:44.910 --> 00:52.810 For example, anything from creating a sign up screen to a flight website to a hotel booking website. 10 00:52.830 --> 00:59.630 So we're going to take some of these ideas as inspiration and create our own website design 11 00:59.700 --> 01:05.190 applying the four pillars that we've learned in this module. The first thing I want you to do is head 12 01:05.190 --> 01:07.980 over to a website called canva.com. 13 01:07.980 --> 01:14.430 Now this is a online graphics editing program and you don't have to download anything and it's completely 14 01:14.430 --> 01:15.660 free to sign up. 15 01:15.870 --> 01:20.580 So sign up for a new account and then go ahead and create a new design. 16 01:20.610 --> 01:27.720 So we're going to pick custom dimensions and I'm going to choose 1400 pixels by 800 pixels high. 17 01:27.720 --> 01:33.750 Once we're inside our design we're going to take this as the first screen that the user sees in our 18 01:33.750 --> 01:34.740 website. 19 01:34.740 --> 01:39.270 And then when they scroll down they'll see the next page and then they scroll down and see the final 20 01:39.270 --> 01:40.350 part of our website. 21 01:41.010 --> 01:44.060 So let's design the first title screen. 22 01:44.340 --> 01:50.780 Now I'm going to choose this free template which gives me a backdrop already but I'm actually just going 23 01:50.780 --> 01:55.380 to use it for some texture. I quite like the way that this pattern looks. 24 01:55.410 --> 02:00.030 So I'm going to apply the pattern and then I'm going to change the background. 25 02:00.030 --> 02:04.080 Now I think the background looks a little bit bland with just a single color. 26 02:04.500 --> 02:12.600 So I'm going to choose a photo instead and I'm going to search for a beach, like this one. 27 02:12.600 --> 02:18.960 So now that I've got my image I'm going to drag it out so that it's sized as large as it needs to be. 28 02:19.410 --> 02:25.200 So going all the way to each of the edges. And then I'm going to reposition it so that it fills up the 29 02:25.200 --> 02:28.200 entire screen. Like this. 30 02:28.200 --> 02:31.500 So now I have a background image, some sort of texture on it 31 02:31.880 --> 02:35.810 and I can go to the elements to keep adding to this design. 32 02:35.820 --> 02:38.920 Let's take a look at some of the gradients here. 33 02:39.180 --> 02:42.930 And I'm going to pick something that'll fit in with this theme. 34 02:43.020 --> 02:46.590 Now, of course, how you design this is completely up to you. 35 02:46.650 --> 02:52.710 And I'm just providing an example of how I go through this process of designing. 36 02:52.710 --> 02:54.510 So now I've got a circle here. 37 02:54.540 --> 03:02.670 I'm going to add some more shapes maybe a square of some sort. We can click on see all to see all the 38 03:02.670 --> 03:03.870 other ones. 39 03:04.320 --> 03:12.270 And then I'm going to put a square which I'm going to make it so that it goes right to the end of each 40 03:12.360 --> 03:13.340 of the sites. 41 03:13.350 --> 03:19.310 So here and then we're going to make it line up with the center of the circle roughly like this. 42 03:19.350 --> 03:23.460 And let's just change that color to white. 43 03:23.460 --> 03:29.080 Now we have this nice white border, some abstract shapes and patterns and an image. 44 03:29.100 --> 03:34.530 Now I'm going to add a heading text. This heading text is going to be the name of our hotel. 45 03:34.530 --> 03:41.140 After all we're designing a website for this unknown Hotel which I'll call "A Hotel". 46 03:41.580 --> 03:49.410 A really easy way of making something look authoritative and like it's been around forever is by changing 47 03:49.410 --> 03:52.170 the typeface to a Serif typeface. 48 03:52.620 --> 03:58.470 So I'm going to highlight this font and I'm going to click the dropdown and find a serif typeface like 49 03:58.560 --> 03:59.790 this one cardo. 50 04:00.480 --> 04:06.870 And notice how instantly our hotel looks a lot more established like it's been around for longer. 51 04:06.960 --> 04:09.530 Now I'm going to change the color of this also to white. 52 04:09.690 --> 04:16.710 So notice how we're starting to establish a color palette of greens and turquoise and blue and white. 53 04:17.340 --> 04:26.870 And we're going to increase the font size to maybe something really large like 120 or 144. And 54 04:26.900 --> 04:30.070 I'm going to change this so that it's all caps like so. 55 04:30.850 --> 04:33.050 So that's actually a little bit too big 56 04:33.050 --> 04:41.360 so let's drop it down a notch. And I can increase the spacing of the letters to again make it look more 57 04:41.360 --> 04:46.450 fancy, more expensive and more authoritative. 58 04:47.150 --> 04:51.710 Here's the name of our hotel, A Hotel, centered in this box. 59 04:51.710 --> 04:57.400 And now I'm ready to add a subheading and my subheading is going to be some sort of tagline 60 04:57.400 --> 04:58.560 right? 61 04:58.790 --> 05:05.020 And I'm going to go with something really obnoxious like "Lose Yourself to find yourself". 62 05:05.020 --> 05:07.070 I feel like I'm ready to open a hotel tomorrow. 63 05:07.850 --> 05:17.170 Let's Now contrast this serif typeface for the title with a San-Serif sort of body or subtitle. 64 05:17.330 --> 05:20.010 And this is what we learned about in the typography section. 65 05:20.030 --> 05:22.260 It creates contrast in the design. 66 05:22.340 --> 05:28.820 So I'm going to pick this Glacial indifference typeface and I'm again going to choose white and then 67 05:28.820 --> 05:34.590 make both these lines left-aligned so that I can align them to the same position. 68 05:34.820 --> 05:40.700 And that is how when you drag elements around on canvas it automatically gives you these alignment grids 69 05:41.060 --> 05:46.670 so that you can more easily position it so that they are actually all aligned together. 70 05:46.670 --> 05:48.710 And notice how big a difference that looks 71 05:48.710 --> 05:54.190 just having it off alignment and then on alignment. It's suddenly just looks a lot more proper 72 05:54.210 --> 05:58.170 right? Now I'm more or less done with my title page. 73 05:58.190 --> 06:04.830 I'm going to move on to the next one which is going to be a page for selling the features of the hotel. 74 06:04.850 --> 06:11.330 Let's start off by adding some images. And I've got some that I've already found before. 75 06:11.330 --> 06:18.290 I've got a picture of a bedroom which I'm going to make it a little bit smaller like so and then I've 76 06:18.290 --> 06:21.950 got a picture of a breakfast of some sort. 77 06:22.130 --> 06:24.290 So you've got food at this hotel. 78 06:24.290 --> 06:25.460 You're not going to starve. 79 06:25.460 --> 06:27.770 That's pretty important for people to know. 80 06:29.460 --> 06:33.510 And I'm going to size it so that it's actually the same size as the other one. 81 06:33.510 --> 06:34.930 So I'm just going to put it on top. 82 06:35.680 --> 06:38.000 Now the last one is going to be a pool. 83 06:38.050 --> 06:39.610 So you've also got a pool. 84 06:39.640 --> 06:41.830 You don't get bored if it gets too hot. 85 06:41.830 --> 06:43.650 You can always just go into the pool. 86 06:43.660 --> 06:45.780 This is turning out to be a great hotel 87 06:45.790 --> 06:47.690 by the way, I really want to stay here. 88 06:47.690 --> 06:52.600 Now the goal of our features page is to have three images which are probably going to be about the same 89 06:52.600 --> 06:53.470 size. 90 06:53.500 --> 06:59.920 So I'm actually going to need to crop this last photo so that I get rid of maybe a little bit of this 91 06:59.950 --> 07:05.520 right edge but have it just about the same size as my other photos. 92 07:05.800 --> 07:10.780 And now I need to resize each of these photos so that it actually can fit onto this page. 93 07:11.500 --> 07:14.850 So I'm just going to throw them one on top of the other and resize them 94 07:14.860 --> 07:16.670 so they're all the same size. 95 07:16.990 --> 07:21.210 And now I can place them around this web page. 96 07:21.340 --> 07:25.730 So when you move towards the edge of each page you can see this grid show up. 97 07:25.810 --> 07:29.500 So I'm going to line up the left with the left side of the grid the right with the right side of the 98 07:29.500 --> 07:32.410 grid and the middle right in the middle. 99 07:32.410 --> 07:39.160 So now these three are evenly spaced apart and I can now add some more design features to it because 100 07:39.160 --> 07:42.430 it's looking a little bit bland just as photos. 101 07:42.460 --> 07:48.180 Now one of the easiest things to make photos look nice is to just jazz it up with a frame. 102 07:48.180 --> 07:51.440 Now because all hotel is very modern, it's contemporary, 103 07:51.520 --> 07:53.210 it's been featured in Vogue, 104 07:53.230 --> 07:57.820 I want to make sure that the framing also looks equally contemporary. 105 07:57.820 --> 08:04.780 So I'm going to find a circle and I'm going to put this circle around this square image which is going 106 08:04.780 --> 08:11.590 to make it look quite nice and contemporary. And then I'm going to give it a background color like that. 107 08:11.590 --> 08:14.520 And we've now framed our picture. 108 08:14.740 --> 08:22.150 So now, all I have to do is just copy it and put it onto all the other images like so. 109 08:22.150 --> 08:24.490 And now I've got three features. 110 08:24.550 --> 08:26.830 You've got a bed, you've got food, you've got pool. 111 08:26.830 --> 08:31.650 What more do you want? The next part is probably going to be some sort of explainer 112 08:31.660 --> 08:32.210 right? 113 08:32.230 --> 08:39.790 So add a subheading of these sections and the subheading is going to be something like you get beautiful 114 08:39.790 --> 08:45.160 food, you have beautiful rooms and you have a beautiful pool. 115 08:45.580 --> 08:50.070 So three things that we've got. And I'm going to left-align 116 08:50.080 --> 08:59.500 each of these again so that I can make it aligned with the left edge of each of the pictures like this. 117 08:59.590 --> 09:07.240 So all three of these pieces of text are on the same horizontal level and they're also vertically aligned 118 09:07.300 --> 09:10.360 with the start of each image. 119 09:10.360 --> 09:16.240 Now each of these will need to be designed so that they have the same typeface as what we had in the 120 09:16.240 --> 09:18.370 title page so that it's consistent 121 09:18.370 --> 09:18.950 right? 122 09:18.970 --> 09:21.670 We're reflecting the same thing that we saw before. 123 09:22.300 --> 09:29.890 So I'm gonna change that again to Glacial indifference and do the same for all three bits of text. 124 09:30.250 --> 09:36.370 And now we can afford to increase the spacing in the text a little bit to make it look a little bit 125 09:36.370 --> 09:41.270 more roomy. So I think I had 18 126 09:41.270 --> 09:46.940 on the other one so I'm going to put 18 here as well and 18 here as well. 127 09:48.990 --> 09:49.350 There we go. 128 09:49.550 --> 09:55.760 So we've got all three bits of text and now all we need is just a little bit of body text. For the bod 129 09:55.760 --> 09:56.200 text 130 09:56.210 --> 10:04.460 I'm going to use a Lorem Ipsum. So I'm going to use one of these generators and just get some text generated 131 10:04.470 --> 10:12.200 and I'm going to copy a little bit of it and put it into my design. Replace that text with this 132 10:12.200 --> 10:14.420 and that's a little bit too much. 133 10:14.420 --> 10:22.280 So let's make it a bit smaller. And we're going to have some text which is going to go just below this 134 10:22.280 --> 10:23.540 section. 135 10:23.780 --> 10:25.850 So it's still a little bit too much. 136 10:25.850 --> 10:28.730 Let's get rid of the last sentence. That looks pretty good. 137 10:28.730 --> 10:31.340 Now again we want to keep our design consistent. 138 10:31.340 --> 10:37.190 So we're going to make sure it's again left aligned using the same font as before. 139 10:37.400 --> 10:44.360 And we've now got a bit of body text which I'm going to further style by changing the color of each 140 10:44.360 --> 10:45.310 of these. 141 10:45.380 --> 10:53.700 So I want to go for maybe like a dark-grayish like one of these and the same for the body text. 142 10:53.990 --> 10:56.750 That way it doesn't sort of stand out so much. 143 10:56.900 --> 10:58.350 And I'm going to copy this 144 10:58.370 --> 11:03.620 so that I put it on all of the other features. 145 11:03.620 --> 11:05.410 Notice the alignment here. 146 11:05.450 --> 11:08.390 I've got all the pictures aligned with each other, 147 11:08.570 --> 11:11.570 all of these circles center-aligned with each picture, 148 11:11.870 --> 11:17.610 I've got all the text lined along the left and this just makes the design look a lot tighter 149 11:17.780 --> 11:19.910 and a lot more consistent. 150 11:20.090 --> 11:25.330 And notice how with the layout I've tried to keep it interesting by having some pictures that break 151 11:25.330 --> 11:31.130 up the text and making sure that each body of text is not overwhelming. It's not too long 152 11:31.130 --> 11:32.570 like a big long sentence. 153 11:32.850 --> 11:36.440 But instead it's short enough to be easily read quickly. 154 11:36.620 --> 11:40.790 Now, the other thing you'll notice is that there's a degree of hierarchy that's being established here 155 11:40.800 --> 11:41.450 right? 156 11:41.490 --> 11:46.630 Clearly the thing that I really want people to know is that my hotel is called A Hotel. 157 11:46.820 --> 11:51.800 But in addition, I've also got beautiful food being more important than the body text 158 11:51.800 --> 11:53.640 that explains that paragraph. 159 11:53.870 --> 11:59.750 And each of these images also being more important because, let's face it, most people look at the pictures 160 11:59.750 --> 12:01.100 and don't read anything right? 161 12:01.340 --> 12:02.930 So that's our second part of the website 162 12:02.930 --> 12:03.530 done. 163 12:03.680 --> 12:08.270 And we're now onto the last part which is going to be the contact page. 164 12:08.270 --> 12:15.080 So this contact page I'm again going to search for maybe a photo of something that's quite fashionable, 165 12:15.080 --> 12:17.530 contemporary, tropical. 166 12:17.810 --> 12:21.020 Maybe we can just find a picture of a pineapple. 167 12:21.890 --> 12:24.130 And this one looks pretty good. 168 12:24.140 --> 12:30.320 Let's go ahead and position this photo so that it's the same size as the design. 169 12:30.560 --> 12:35.330 And now I can move it up so that only the bottom shows up my pineapples. 170 12:35.330 --> 12:36.080 So there we go. 171 12:36.080 --> 12:43.100 We've got 1, 2 and 3 and the last part is just a contact me page. The contact me page is also 172 12:43.100 --> 12:45.280 going to need some titled text. 173 12:45.350 --> 12:47.360 Let's just call that Stay. 174 12:47.360 --> 12:52.940 So when they want to stay they can take a look at this section. And we're going to again copy this style 175 12:52.940 --> 12:57.510 that we had from before so that we can actually replicate it down here 176 12:57.740 --> 13:00.830 and we keep our design again consistent. 177 13:00.830 --> 13:06.800 It has the same theme, the same color palette, the same typography. 178 13:06.800 --> 13:13.280 This is a little bit too big though. So let's make it a bit smaller so it fits onto this page. 179 13:13.400 --> 13:19.100 And again I'm going to be consistent with our geometric shapes which is lending that sort of modern 180 13:19.100 --> 13:23.830 feel. I've got a sort of rectangle, a circle, more circles. 181 13:23.900 --> 13:31.880 So let's pick another shape from here. Maybe some sort of a hexagon. That looks pretty good. 182 13:31.880 --> 13:33.260 Let's add the hexagon, 183 13:33.260 --> 13:43.490 make it a bit smaller, we can maybe move our pineapples down a bit and change this so that it's white 184 13:44.540 --> 13:47.930 and make it even a bit smaller. 185 13:48.170 --> 13:50.000 I think something like that would do quite well. 186 13:50.540 --> 13:57.380 So now the final thing I want to add is some sort of mailing address, email address, phone number, which 187 13:57.380 --> 14:02.200 is going to go in here and it's going to be nicely aligned with this word stay. 188 14:03.590 --> 14:10.190 So let's go ahead and take this word and make it right aligned so that this line pops up when I try 189 14:10.190 --> 14:16.810 to align it like so and let's just make sure that it actually still fits in. 190 14:17.090 --> 14:23.450 So maybe we have to move this text up a little bit, reduce the spacing a little. 191 14:23.450 --> 14:29.210 I think a lot of times you do have to play around with your design just so that it starts looking good 192 14:29.210 --> 14:30.040 to you. 193 14:30.200 --> 14:35.240 You might have to shift things a little bit and be flexible with those rules that we've talked about. 194 14:36.050 --> 14:43.610 So now all we need to make sure is that the word is right-aligned and our text is also right-aligned 195 14:44.000 --> 14:50.240 so that we can actually line them up together so that they actually look like they're on the same vertical 196 14:50.360 --> 14:51.830 alignment. 197 14:51.860 --> 14:59.720 Now, if we can just mess around with the size of the hexagon and make sure that everything is still within 198 14:59.720 --> 15:05.960 the hexagon and we've pretty much finished our design now. What did that take? Maybe 20 minutes. And 199 15:05.960 --> 15:11.330 we managed to apply a lot of things that we've learned from User Interface design or User Experience 200 15:11.330 --> 15:19.700 design, Color Theory and Typography to create this 3-page very modern looking website for A Hotel. 201 15:19.700 --> 15:26.000 So at this point, there's a really cool feature in Canva which lets you just publish the website. 202 15:26.150 --> 15:33.830 So if you click on this publish button and you scroll all the way down and you click on website then 203 15:33.860 --> 15:40.820 you can actually select the Web style as standard and then open this as an actual web page. 204 15:40.820 --> 15:46.100 Notice how it's placed my three pages together into an actual web page 205 15:46.490 --> 15:51.390 and I can scroll down and also navigate to it through the navigation bar. 206 15:51.410 --> 15:53.920 Now of course we don't have mobile optimization, 207 15:53.930 --> 16:01.130 we don't have any code that has any functionality, we can't add javascript to it. But at least we can quickly 208 16:01.130 --> 16:06.440 throw up a design, visualize it and share it with other people to see what they think. 209 16:06.590 --> 16:11.050 And this is probably one of the best ways of building up your design muscle. 210 16:11.060 --> 16:17.510 Just practicing again and again until you get to a point where pretty much unanimously everybody thinks 211 16:17.510 --> 16:22.520 that your design looks great and people start asking you to actually build websites for them. 212 16:22.520 --> 16:24.940 So study a lot of the websites that you come across, 213 16:24.940 --> 16:30.320 the ones that you think look really good. And think about what makes them good and then try to take some 214 16:30.320 --> 16:37.700 of those aspects along with everything you've learned in these lessons to create designs that humans 215 16:37.790 --> 16:38.840 love. 216 16:38.840 --> 16:47.370 So I hope you'll take a moment now to pause the video and have a go at creating your own hotel website. 217 16:47.780 --> 16:54.020 So use the same tools that you saw me use on Canva and try to design a slightly different type of hotel. 218 16:54.020 --> 17:00.500 What if it had to be a more traditional hotel that was around the time of Henry the 8th or something? It's 219 17:00.650 --> 17:07.200 like some really old hotel and they want to show how decadent they are, how glamorous they are, and trying 220 17:07.200 --> 17:09.090 to design a different type of website. 221 17:09.710 --> 17:16.370 So pause the video, give that a go and then try to apply everything you've learned in this module into 222 17:16.370 --> 17:17.580 that design. 223 17:17.870 --> 17:24.140 And once you've created your design share this link that you can see at the top of Canva so that we 224 17:24.140 --> 17:28.950 can all see your design and we can comment on how beautiful it looks. 225 17:29.000 --> 17:34.670 So have a go at doing that and make sure that you let us know what it looks like in the comments below 226 17:34.670 --> 17:39.990 and have fun doing it. Now I hope you really enjoyed this module on web design. 227 17:40.040 --> 17:42.550 It's a little bit different from what you've been used to so far. 228 17:42.590 --> 17:48.530 There's no coding in this module but instead we tried to get you to think about all of the design principles 229 17:48.590 --> 17:54.380 that actually ends up creating beautiful websites, websites that people will love. And hopefully 230 17:54.380 --> 17:59.150 you'll take these pillars and this knowledge through the next time you build your product or you build 231 17:59.150 --> 18:06.110 your website and you'll apply it alongside with your code so that you have beautiful features and beautiful 232 18:06.110 --> 18:07.450 interface. 233 18:07.460 --> 18:12.440 Now once you've created your own designs and you've shared it with us then it's time to get back to 234 18:12.440 --> 18:13.310 the coding and 235 18:13.430 --> 18:18.570 we're going to continue tackling more web development. So for all of that and more, 236 18:18.680 --> 18:19.280 I'll see you there.