WEBVTT 0 00:01.020 --> 00:07.410 So now that we've talked about some of the fundamentals of design like Color Theory and Typography, the 1 00:07.410 --> 00:11.790 next thing I want to talk about is User Interface Design. 2 00:11.820 --> 00:14.340 Now take a look at this picture, 3 00:14.400 --> 00:21.200 in most cases, 99% of you would have read "YOUR EYES HERE" first, "then here" then 4 00:21.240 --> 00:22.360 "Isn't that fascinating?" 5 00:23.010 --> 00:25.620 So this is just a way that our brains work. 6 00:25.650 --> 00:30.560 We're always drawn to the bigger bolder squarer of things. 7 00:30.630 --> 00:39.450 And As designers, we can use this knowledge to define Hierarchy. So let's say that you were to write a 8 00:39.480 --> 00:42.770 birthday invite to Jane. 9 00:42.780 --> 00:48.340 You could write it like this, but all of the information has equal weighting. 10 00:48.420 --> 00:54.060 So as a reader, I have to go through the entire paragraph and I can't just skim through it to get the 11 00:54.060 --> 00:55.470 important bits. 12 00:55.500 --> 00:57.300 So it's going take me a lot longer 13 00:57.330 --> 01:04.980 right? Now on the other hand if I apply the rules of hierarchy then the most important information gets 14 01:04.980 --> 01:12.420 conveyed over first and I make sure that Jane actually knows whose birthday party it is, where it is 15 01:12.690 --> 01:15.570 and when they should go. 16 01:15.570 --> 01:19.000 So we can establish hierarchy in a number of ways. 17 01:19.110 --> 01:21.930 The most obvious is through the use of color. 18 01:22.110 --> 01:29.400 So colors that really pop and stand out and have contrast with that background tend to be used for high 19 01:29.400 --> 01:30.640 hierarchy. 20 01:30.660 --> 01:37.100 So for example in this case if all the colors were the same, then it feels like they all have equal importance. 21 01:37.500 --> 01:43.110 But on the other hand, if we have something that's very bright very standoutish versus something that's 22 01:43.110 --> 01:50.370 a bit more grayed, a bit more muted, then we know exactly where our eyes will go to first. 23 01:50.460 --> 01:56.880 Now if you take a look at this example, this is the ASOS website, and their predominant color palette 24 01:56.940 --> 02:03.570 is the sort of gray and white color. But they've really cleverly used their accent tone, this green and 25 02:03.570 --> 02:07.560 red, to really tell the user what they think you should really look at. 26 02:08.030 --> 02:13.860 And it seems like ASOS really cares that you know that they have an outlet and also that you add your 27 02:13.860 --> 02:17.250 product to the bag so that they can actually make money off you. 28 02:18.000 --> 02:23.850 So, in this case, they're using that green accent tone to really pull the eyes to that button and make sure 29 02:23.850 --> 02:30.430 that the user actually completes their transaction. Now in addition to color, you should also think about 30 02:30.430 --> 02:36.460 size because as I said, the bigger items often draw your eyes to it. 31 02:36.590 --> 02:42.740 So, for example, if you look at the Coinbase website which you can use to buy cryptocurrency, we can see 32 02:42.770 --> 02:48.740 the first thing they want to tell you is you can use this website to "Buy and sell cryptocurrency." 33 02:48.740 --> 02:55.960 Now the next biggest thing on the page is this huge email input and a button that says, "Get started". 34 02:56.030 --> 03:02.570 So because a lot of these companies run ads and they're paying for users to land on their page, it's really 35 03:02.570 --> 03:05.630 important for them to capture the emails. 36 03:05.630 --> 03:08.930 This is kind of what this design is representing, 37 03:08.930 --> 03:09.760 right? 38 03:09.830 --> 03:15.560 As long as you land on this page, you're probably going to want to look at this place where you put in 39 03:15.560 --> 03:22.380 your email address and get started so that the company can capture your information. 40 03:22.400 --> 03:28.970 Now in addition to establishing hierarchy, in terms of User Interface, you should think about the Layout 41 03:29.090 --> 03:30.460 of your website. 42 03:30.530 --> 03:36.710 You can of course, on one hand, have this big block of text which is just your website where everything 43 03:36.710 --> 03:40.040 is all laid out in the same kind of way 44 03:40.100 --> 03:46.970 or you can create more interest by creating a block of text and then interspersed with pictures and 45 03:46.970 --> 03:52.160 then create some different sizes and different shapes and different hierarchies to make your design 46 03:52.160 --> 04:02.820 look more interesting. Now the Wikipedia pages are an example in bad design because just look at how bland 47 04:02.820 --> 04:03.300 it looks. 48 04:03.300 --> 04:08.760 It really is trying to be an encyclopedia but it doesn't have to be like this. Now 49 04:08.760 --> 04:15.600 one of the most noticeable things about Wikipedia is just the length of each block of text. 50 04:15.630 --> 04:18.870 Just look at how long each line of text is. 51 04:18.870 --> 04:24.830 It's very hard for a user to keep their eyes tracking along the same line. 52 04:25.110 --> 04:32.250 And in fact, in terms of User Interface Design, there's an optimal line length. Too long and it gets a 53 04:32.250 --> 04:38.870 little bit tedious to read, but too short it feels a bit too choppy and it's a bit awkward to read. 54 04:39.090 --> 04:44.940 So you want to aim for something around 40 to 60 characters per line so that it feels comfortable to 55 04:44.940 --> 04:51.910 the user and they'll be able to get through the information and still be interested in your website. 56 04:51.950 --> 04:58.850 Now when you have good layout like Grammarly's website, it's not only interesting but it also chops 57 04:58.850 --> 05:04.880 up the content into smaller pieces so that you actually get through more of the website and you take 58 05:04.880 --> 05:06.050 more of it in. 59 05:07.100 --> 05:10.610 Now another thing I want to talk about is Alignment. 60 05:10.610 --> 05:17.360 This has to do with how you position each of the elements on the screen relative to each other. 61 05:17.360 --> 05:24.200 So take a look at the example on the left. The top title is center-aligned whereas the body text is 62 05:24.200 --> 05:30.370 left-aligned. And it makes it look a little bit awkward like they're not really meant to be together. 63 05:30.500 --> 05:38.000 Now on the right however just by shifting the alignment so that both starting points are the same for 64 05:38.000 --> 05:43.410 the title and the body, it suddenly looks a lot more consistent and a lot more designed. 65 05:43.520 --> 05:50.960 Now one of the easiest ways of making any sort of design you create look professional is just to reduce 66 05:51.050 --> 05:53.780 the number of alignment points. 67 05:53.850 --> 05:59.840 So let's say that you're creating a slide deck for your next presentation or you're creating a poster 68 05:59.870 --> 06:01.680 for your birthday party, 69 06:01.700 --> 06:09.290 take a look at all the things that are on the design and identify a line which goes through the beginning 70 06:09.380 --> 06:10.870 of each item. 71 06:10.880 --> 06:17.240 Now if you can reduce the number of lines like we have done here on the right then suddenly the design 72 06:17.240 --> 06:21.490 looks a lot more coherent, like all the pieces are meant to be together. 73 06:21.680 --> 06:25.100 And it just looks a lot more professional. 74 06:25.100 --> 06:31.400 So use these grid lines in your designed to help you visualize where the starting points of each element 75 06:31.400 --> 06:33.490 is and try to line them all up. 76 06:33.740 --> 06:40.490 Because even if you do nothing else but just alignment, you can see in this case the left looks a lot 77 06:40.490 --> 06:47.780 more sloppy and the right looks a lot more designed and more professional. And all that's changed, there's 78 06:47.780 --> 06:54.950 no change in the color, there's no change in typography, it's just the alignment. Now a really important 79 06:54.950 --> 07:03.630 concept in all design is White Space. And white space refers to the empty space that's around text or round 80 07:03.630 --> 07:05.210 your elements. 81 07:05.210 --> 07:12.230 Now sometimes when I'm on the high street I come across one of these luxury handbag or shoe shops and 82 07:12.290 --> 07:13.580 I look through the window. 83 07:22.860 --> 07:24.540 Now here's an experiment, 84 07:24.540 --> 07:30.780 take a look at this shop that sells handbags, and take a look at this one, 85 07:30.840 --> 07:36.790 now how much are you willing to pay for a handbag from this shop versus this one? 86 07:37.080 --> 07:41.330 Now this is really a use case for white space. 87 07:41.340 --> 07:45.030 A lot of luxury shops, luxury designer stores, 88 07:45.030 --> 07:53.850 one of their simplest tools is just injecting white space around their products, space things out and it 89 07:53.850 --> 08:00.690 makes everything suddenly look a lot more expensive. Whereas when you have everything all tightly crammed 90 08:00.690 --> 08:06.120 together and you have a lot of product on show, it makes it look like it's some sort of discount store. 91 08:07.050 --> 08:12.030 And the same principle applies when it comes to digital design as well. 92 08:12.030 --> 08:15.290 Let's say you have an ad for noise cancelling headphones. 93 08:15.570 --> 08:21.490 If you have loads of things on screen, there's "New!", "Only $20", "100% noise cancellation". 94 08:21.540 --> 08:28.590 It makes the product look really cheap. Whereas if you injected some white space, all of a sudden it looks 95 08:28.590 --> 08:35.370 like Apple made it, right? Just by adding that space around each element on the screen 96 08:35.370 --> 08:41.090 you can make your design a lot more minimalist and at the same time elevate it. 97 08:41.100 --> 08:46.650 Now the last thing on User Interface Design I want to talk about and probably the most important is 98 08:46.650 --> 08:49.170 design for your Audience. 99 08:49.170 --> 08:53.110 A lot of things I've said, including not using comic-sans, 100 08:53.130 --> 08:54.830 it really depends on your audience. 101 08:54.840 --> 09:00.810 Let's say you're designing a children's concert poster, the one on the right looks like something that 102 09:00.810 --> 09:06.530 children might actually want to go to. The one on the left looks a bit like a funeral advertisement. 103 09:06.540 --> 09:15.030 It's so serious. It's so black and white and it's so severe looking that no child is kind of want to 104 09:15.030 --> 09:16.290 go to that concert. 105 09:17.250 --> 09:19.360 So think about your audience. 106 09:19.500 --> 09:25.380 Think about what would appeal to them and what's important to convey to them. That it's going to be a 107 09:25.380 --> 09:32.530 fun concert or that it's going to be boring adults who are going to be reading newspapers and some sort 108 09:32.580 --> 09:39.480 of classical band in the background. When you're designing websites design it for your audience even 109 09:39.480 --> 09:44.940 if it's something a little bit messier, a little bit bolder in terms of color, as long as it fits your 110 09:44.940 --> 09:47.360 audience and that's perfectly fine. 111 09:47.430 --> 09:54.300 So have the flexibility in your design so that you're not just creating one style all the time. You're 112 09:54.300 --> 10:00.870 creating one style for a particular audience like teenagers who want to buy clothes and you're creating 113 10:00.960 --> 10:06.990 a different style for people who want to buy and sell cryptocurrency or have a medical website. 114 10:07.530 --> 10:14.100 So the flexibility in your design skills is really important when it comes to User Interface design. 115 10:14.100 --> 10:22.350 But keep in mind those five things: hierarchy, layout, alignment, white space and your audience and you'll 116 10:22.350 --> 10:27.420 be well on the way to creating more beautiful user interfaces for your websites.