Original subtitles

0 So now that we've talked about some of the fundamentals of design like Color Theory and Typography, the 1

next thing I want to talk about is User Interface Design. 2

Now take a look at this picture. 3

In most cases, 99% of you would have read "YOUR EYE HERE" first, "then here" then 4

"Isn't that fascinating?" 5

So this is just a way that our brains work. 6

We're always drawn to the bigger bolder square of things. 7

And As designers, we can use this knowledge to define hierarchy. So let's say that you were to write a 8

birthday invites to Jane. 9

You could write it like this. But all of the information has equal weighting. 10

So as a reader, I have to go through the entire paragraph and I can't just skim through it to get the 11

important bits. 12

So it's gonna take me a lot longer 13

right? Now on the other hand if I apply the rules of hierarchy then the most important information gets 14

conveyed over first and I make sure that Jane actually knows whose birthday party it is, where it is 15

and when they should go. 16

So we can establish hierarchy in a number of ways. 17

The most obvious is through the use of color. 18

So colors that really pop and stand out and have contrast with that background tend to be used for high 19

hierarchy. 20

So for example in this case if all the colors were the same, then it feels like they all have equal importance. 21

But on the other hand, if we have something that's very bright very standoutish versus something that's 22

a bit more grade, a bit more muted, then we know exactly where our eyes will go to first. 23

Now if you take a look at this example this is the ASOS website. And their predominant color palette 24

is the sort of gray and white color. But they've really cleverly used their accent tone, this green and 25

red, to really tell the user what they think you should really look at. 26

And it seems like ASOS really cares that you know that they have an outlet and also that you add your 27

product to the bag so that they can actually make money off you. 28

So, in this case, they're using that green accent tone to really pull the eyes to that button and make sure 29

that the user actually completes their transaction. Now in addition to color, you should also think about 30

size because as I said, the bigger items often draw your eyes to it. 31

So, for example, if you look at the Coinbase website which you can use to buy cryptocurrency, we can see 32

the first thing they want to tell you is you can use this website to buy and sell cryptocurrency. 33

Now the next biggest thing on the page is this huge email input and a button that says "Get started". 34

So because a lot of these companies run ads and they're paying for users to land on their page, it's really 35

important for them to capture the emails. 36

This is kind of what this design is representing 37

right? 38

As long as you land on this page, you're probably going to want to look at this place where you put in 39

your email address and get started so that the company can capture your information. 40

Now in addition to establishing hierarchy in terms of user interface, you should think about the layout 41

of your website. 42

You can of course, on one hand, have this big block of text which is just your website where everything 43

is all laid out in the same kind of way 44

or you can create more interest by creating a block of text and then interspersed with pictures and 45

then create some different sizes and different shapes and different hierarchies to make your design 46

look more interesting. Now the Wikipedia pages are a example in bad design because just look at how bland 47

it looks. 48

It really is trying to be an encyclopedia but it doesn't have to be like this. Now 49

one of the most noticeable things about Wikipedia is just the length of each block of text. 50

Just look at how long each line of text is. 51

It's very hard for a user to keep their eyes tracking along the same line. 52

And in fact, in terms of user interface design, there's an optimal line length. Too long and it gets a 53

little bit tedious to read. But too short it feels a bit too choppy and it's a bit awkward to read. 54

So you want to aim for something around 40 to 60 characters per line so that it feels comfortable to 55

the user and they'll be able to get through the information and still be interested in your website. 56

Now when you have good layout like Grammarly's website, it's not only interesting but it also chops 57

up the content into smaller pieces so that you actually get through more of the website and you take 58

more of it in. 59

Now another thing I want to talk about is alignment. 60

This has to do with how you position each of the elements on the screen relative to each other. 61

So take a look at the example on the left. The top title is center-aligned whereas the body text is 62

left-aligned. And it makes it look a little bit awkward like they're not really meant to be together. 63

Now on the right however just by shifting the alignment so that both starting points are the same for 64

the title and the body, it suddenly looks a lot more consistent and a lot more designed. 65

Now one of the easiest ways of making any sort of design you create look professional is just to reduce 66

the number of alignment points. 67

So let's say that you're creating a slide deck for your next presentation or you're creating a poster 68

for your birthday party, 69

take a look at all the things that are on the design and identify a line which goes through the beginning 70

of each item. 71

Now if you can reduce the number of lines like we have done here on the right then suddenly the design 72

looks a lot more coherent like all the pieces are meant to be together. 73

And it just looks a lot more professional. 74

So use these grid lines in your designed to help you visualize where the starting points of each element 75

is and try to line them all up. 76

Because even if you do nothing else but just alignment, you can see in this case the left looks a lot 77

more sloppy and the right looks a lot more designed and more professional. And all that's changed, there's 78

no change in the color, there's no change in typography, it's just the alignment. Now a really important 79

concept in all design is White Space. And white space refers to the empty space that's around text or round 80

your elements. 81

Now sometimes when I'm on the high street I come across one of these luxury handbag or shoe shops and 82

I look through the window. 83

Now here's an experiment. 84

Take a look at this shop that sells handbags and take a look at this one. 85

Now how much are you willing to pay for a handbag from this shop versus this one. 86

Now this is really a use case for white space. 87

A lot of luxury shops, luxury designer stores, 88

one of their simplest tools is just injecting white space around their products, space things out and it 89

makes everything suddenly look a lot more expensive. Whereas when you have everything all tightly crammed 90

together and you have a lot of product on show, it makes it look like it's some sort of discount store. 91

And the same principle applies when it comes to digital design as well. 92

Let's say you have an ad for noise cancelling headphones. 93

If you have loads of things on screen, there's "New", "Only $20", "100% noise cancellation". 94

It makes the product look really cheap. Whereas if you injected some white space, all of a sudden it looks 95

like Apple made it right? Just by adding that space around each element on the screen 96

you can make your design a lot more minimalist and at the same time elevate it. 97

Now the last thing on User Interface design I want to talk about and probably the most important is 98

design for your audience. 99

A lot of things I've said, including not using comic-sans, 100

it really depends on your audience. 101

Let's say you're designing a children's concert poster, the one on the right looks like something that 102

children might actually want to go to. The one on the left looks a bit like a funeral advertisement. 103

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

go to that concert. 105

So think about your audience. 106

Think about what would appeal to them and what's important to convey to them. That it's going to be a 107

fun concert or that it's going to be boring adults who are going to be reading newspapers and some sort 108

of classical band in the background. When you're designing websites design it for your audience even 109

if it's something a little bit messier, a little bit bolder in terms of color, as long as it fits your 110

audience and that's perfectly fine. 111

So have the flexibility in your design so that you're not just creating one style all the time. You're 112

creating one style for a particular audience like teenagers who want to buy clothes and you're creating 113

a different style for people who want to buy and sell cryptocurrency or have a medical website. 114

So the flexibility in your design skills is really important when it comes to User Interface design. 115

But keep in mind those five things: hierarchy, layout, alignment, white space and your audience and you'll 116

be well on the way to creating more beautiful user interfaces for your websites.