1 00:00:01,020 --> 00:00:07,410 So now that we've talked about some of the fundamentals of design like Color Theory and Typography, the 2 00:00:07,410 --> 00:00:11,790 next thing I want to talk about is User Interface Design. 3 00:00:11,820 --> 00:00:14,340 Now take a look at this picture. 4 00:00:14,400 --> 00:00:21,200 In most cases, 99% of you would have read "YOUR EYE HERE" first, "then here" then 5 00:00:21,240 --> 00:00:22,360 "Isn't that fascinating?" 6 00:00:23,010 --> 00:00:25,620 So this is just a way that our brains work. 7 00:00:25,650 --> 00:00:30,560 We're always drawn to the bigger bolder square of things. 8 00:00:30,630 --> 00:00:39,450 And As designers, we can use this knowledge to define hierarchy. So let's say that you were to write a 9 00:00:39,480 --> 00:00:42,770 birthday invites to Jane. 10 00:00:42,780 --> 00:00:48,340 You could write it like this. But all of the information has equal weighting. 11 00:00:48,420 --> 00: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 12 00:00:54,060 --> 00:00:55,470 important bits. 13 00:00:55,500 --> 00:00:57,300 So it's gonna take me a lot longer 14 00:00:57,330 --> 00:01:04,980 right? Now on the other hand if I apply the rules of hierarchy then the most important information gets 15 00:01:04,980 --> 00:01:12,420 conveyed over first and I make sure that Jane actually knows whose birthday party it is, where it is 16 00:01:12,690 --> 00:01:15,570 and when they should go. 17 00:01:15,570 --> 00:01:19,000 So we can establish hierarchy in a number of ways. 18 00:01:19,110 --> 00:01:21,930 The most obvious is through the use of color. 19 00:01:22,110 --> 00:01:29,400 So colors that really pop and stand out and have contrast with that background tend to be used for high 20 00:01:29,400 --> 00:01:30,640 hierarchy. 21 00:01:30,660 --> 00: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. 22 00:01:37,500 --> 00:01:43,110 But on the other hand, if we have something that's very bright very standoutish versus something that's 23 00:01:43,110 --> 00:01:50,370 a bit more grade, a bit more muted, then we know exactly where our eyes will go to first. 24 00:01:50,460 --> 00:01:56,880 Now if you take a look at this example this is the ASOS website. And their predominant color palette 25 00:01:56,940 --> 00:02:03,570 is the sort of gray and white color. But they've really cleverly used their accent tone, this green and 26 00:02:03,570 --> 00:02:07,560 red, to really tell the user what they think you should really look at. 27 00:02:08,030 --> 00:02:13,860 And it seems like ASOS really cares that you know that they have an outlet and also that you add your 28 00:02:13,860 --> 00:02:17,250 product to the bag so that they can actually make money off you. 29 00:02:18,000 --> 00: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 30 00:02:23,850 --> 00:02:30,430 that the user actually completes their transaction. Now in addition to color, you should also think about 31 00:02:30,430 --> 00:02:36,460 size because as I said, the bigger items often draw your eyes to it. 32 00:02:36,590 --> 00:02:42,740 So, for example, if you look at the Coinbase website which you can use to buy cryptocurrency, we can see 33 00:02:42,770 --> 00:02:48,740 the first thing they want to tell you is you can use this website to buy and sell cryptocurrency. 34 00:02:48,740 --> 00:02:55,960 Now the next biggest thing on the page is this huge email input and a button that says "Get started". 35 00:02:56,030 --> 00: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 36 00:03:02,570 --> 00:03:05,630 important for them to capture the emails. 37 00:03:05,630 --> 00:03:08,930 This is kind of what this design is representing 38 00:03:08,930 --> 00:03:09,760 right? 39 00:03:09,830 --> 00: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 40 00:03:15,560 --> 00:03:22,380 your email address and get started so that the company can capture your information. 41 00:03:22,400 --> 00:03:28,970 Now in addition to establishing hierarchy in terms of user interface, you should think about the layout 42 00:03:29,090 --> 00:03:30,460 of your website. 43 00:03:30,530 --> 00:03:36,710 You can of course, on one hand, have this big block of text which is just your website where everything 44 00:03:36,710 --> 00:03:40,040 is all laid out in the same kind of way 45 00:03:40,100 --> 00:03:46,970 or you can create more interest by creating a block of text and then interspersed with pictures and 46 00:03:46,970 --> 00:03:52,160 then create some different sizes and different shapes and different hierarchies to make your design 47 00:03:52,160 --> 00:04:02,820 look more interesting. Now the Wikipedia pages are a example in bad design because just look at how bland 48 00:04:02,820 --> 00:04:03,300 it looks. 49 00:04:03,300 --> 00:04:08,760 It really is trying to be an encyclopedia but it doesn't have to be like this. Now 50 00:04:08,760 --> 00:04:15,600 one of the most noticeable things about Wikipedia is just the length of each block of text. 51 00:04:15,630 --> 00:04:18,870 Just look at how long each line of text is. 52 00:04:18,870 --> 00:04:24,830 It's very hard for a user to keep their eyes tracking along the same line. 53 00:04:25,110 --> 00:04:32,250 And in fact, in terms of user interface design, there's an optimal line length. Too long and it gets a 54 00:04:32,250 --> 00: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. 55 00:04:39,090 --> 00:04:44,940 So you want to aim for something around 40 to 60 characters per line so that it feels comfortable to 56 00:04:44,940 --> 00:04:51,910 the user and they'll be able to get through the information and still be interested in your website. 57 00:04:51,950 --> 00:04:58,850 Now when you have good layout like Grammarly's website, it's not only interesting but it also chops 58 00:04:58,850 --> 00:05:04,880 up the content into smaller pieces so that you actually get through more of the website and you take 59 00:05:04,880 --> 00:05:06,050 more of it in. 60 00:05:07,100 --> 00:05:10,610 Now another thing I want to talk about is alignment. 61 00:05:10,610 --> 00:05:17,360 This has to do with how you position each of the elements on the screen relative to each other. 62 00:05:17,360 --> 00:05:24,200 So take a look at the example on the left. The top title is center-aligned whereas the body text is 63 00:05:24,200 --> 00:05:30,370 left-aligned. And it makes it look a little bit awkward like they're not really meant to be together. 64 00:05:30,500 --> 00:05:38,000 Now on the right however just by shifting the alignment so that both starting points are the same for 65 00:05:38,000 --> 00:05:43,410 the title and the body, it suddenly looks a lot more consistent and a lot more designed. 66 00:05:43,520 --> 00:05:50,960 Now one of the easiest ways of making any sort of design you create look professional is just to reduce 67 00:05:51,050 --> 00:05:53,780 the number of alignment points. 68 00:05:53,850 --> 00:05:59,840 So let's say that you're creating a slide deck for your next presentation or you're creating a poster 69 00:05:59,870 --> 00:06:01,680 for your birthday party, 70 00:06:01,700 --> 00:06:09,290 take a look at all the things that are on the design and identify a line which goes through the beginning 71 00:06:09,380 --> 00:06:10,870 of each item. 72 00:06:10,880 --> 00:06:17,240 Now if you can reduce the number of lines like we have done here on the right then suddenly the design 73 00:06:17,240 --> 00:06:21,490 looks a lot more coherent like all the pieces are meant to be together. 74 00:06:21,680 --> 00:06:25,100 And it just looks a lot more professional. 75 00:06:25,100 --> 00:06:31,400 So use these grid lines in your designed to help you visualize where the starting points of each element 76 00:06:31,400 --> 00:06:33,490 is and try to line them all up. 77 00:06:33,740 --> 00:06:40,490 Because even if you do nothing else but just alignment, you can see in this case the left looks a lot 78 00:06:40,490 --> 00:06:47,780 more sloppy and the right looks a lot more designed and more professional. And all that's changed, there's 79 00:06:47,780 --> 00:06:54,950 no change in the color, there's no change in typography, it's just the alignment. Now a really important 80 00:06:54,950 --> 00:07:03,630 concept in all design is White Space. And white space refers to the empty space that's around text or round 81 00:07:03,630 --> 00:07:05,210 your elements. 82 00:07:05,210 --> 00:07:12,230 Now sometimes when I'm on the high street I come across one of these luxury handbag or shoe shops and 83 00:07:12,290 --> 00:07:13,580 I look through the window. 84 00:07:22,860 --> 00:07:24,540 Now here's an experiment. 85 00:07:24,540 --> 00:07:30,780 Take a look at this shop that sells handbags and take a look at this one. 86 00:07:30,840 --> 00:07:36,790 Now how much are you willing to pay for a handbag from this shop versus this one. 87 00:07:37,080 --> 00:07:41,330 Now this is really a use case for white space. 88 00:07:41,340 --> 00:07:45,030 A lot of luxury shops, luxury designer stores, 89 00:07:45,030 --> 00:07:53,850 one of their simplest tools is just injecting white space around their products, space things out and it 90 00:07:53,850 --> 00:08:00,690 makes everything suddenly look a lot more expensive. Whereas when you have everything all tightly crammed 91 00:08:00,690 --> 00: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. 92 00:08:07,050 --> 00:08:12,030 And the same principle applies when it comes to digital design as well. 93 00:08:12,030 --> 00:08:15,290 Let's say you have an ad for noise cancelling headphones. 94 00:08:15,570 --> 00:08:21,490 If you have loads of things on screen, there's "New", "Only $20", "100% noise cancellation". 95 00:08:21,540 --> 00:08:28,590 It makes the product look really cheap. Whereas if you injected some white space, all of a sudden it looks 96 00:08:28,590 --> 00:08:35,370 like Apple made it right? Just by adding that space around each element on the screen 97 00:08:35,370 --> 00:08:41,090 you can make your design a lot more minimalist and at the same time elevate it. 98 00:08:41,100 --> 00:08:46,650 Now the last thing on User Interface design I want to talk about and probably the most important is 99 00:08:46,650 --> 00:08:49,170 design for your audience. 100 00:08:49,170 --> 00:08:53,110 A lot of things I've said, including not using comic-sans, 101 00:08:53,130 --> 00:08:54,830 it really depends on your audience. 102 00:08:54,840 --> 00:09:00,810 Let's say you're designing a children's concert poster, the one on the right looks like something that 103 00:09:00,810 --> 00:09:06,530 children might actually want to go to. The one on the left looks a bit like a funeral advertisement. 104 00:09:06,540 --> 00: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 105 00:09:15,030 --> 00:09:16,290 go to that concert. 106 00:09:17,250 --> 00:09:19,360 So think about your audience. 107 00:09:19,500 --> 00: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 108 00:09:25,380 --> 00:09:32,530 fun concert or that it's going to be boring adults who are going to be reading newspapers and some sort 109 00:09:32,580 --> 00:09:39,480 of classical band in the background. When you're designing websites design it for your audience even 110 00:09:39,480 --> 00: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 111 00:09:44,940 --> 00:09:47,360 audience and that's perfectly fine. 112 00:09:47,430 --> 00:09:54,300 So have the flexibility in your design so that you're not just creating one style all the time. You're 113 00:09:54,300 --> 00:10:00,870 creating one style for a particular audience like teenagers who want to buy clothes and you're creating 114 00:10:00,960 --> 00:10:06,990 a different style for people who want to buy and sell cryptocurrency or have a medical website. 115 00:10:07,530 --> 00:10:14,100 So the flexibility in your design skills is really important when it comes to User Interface design. 116 00:10:14,100 --> 00:10:22,350 But keep in mind those five things: hierarchy, layout, alignment, white space and your audience and you'll 117 00:10:22,350 --> 00:10:27,420 be well on the way to creating more beautiful user interfaces for your websites.