Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
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
1
2
00:00:07,410 --> 00:00:11,790
next thing I want to talk about is User Interface Design.
2
3
00:00:11,820 --> 00:00:14,340
Now take a look at this picture.
3
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
4
5
00:00:21,240 --> 00:00:22,360
"Isn't that fascinating?"
5
6
00:00:23,010 --> 00:00:25,620
So this is just a way that our brains work.
6
7
00:00:25,650 --> 00:00:30,560
We're always drawn to the bigger bolder square of things.
7
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
8
9
00:00:39,480 --> 00:00:42,770
birthday invites to Jane.
9
10
00:00:42,780 --> 00:00:48,340
You could write it like this. But all of the information has equal weighting.
10
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
11
12
00:00:54,060 --> 00:00:55,470
important bits.
12
13
00:00:55,500 --> 00:00:57,300
So it's gonna take me a lot longer
13
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
14
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
15
16
00:01:12,690 --> 00:01:15,570
and when they should go.
16
17
00:01:15,570 --> 00:01:19,000
So we can establish hierarchy in a number of ways.
17
18
00:01:19,110 --> 00:01:21,930
The most obvious is through the use of color.
18
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
19
20
00:01:29,400 --> 00:01:30,640
hierarchy.
20
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.
21
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
22
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.
23
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
24
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
25
26
00:02:03,570 --> 00:02:07,560
red, to really tell the user what they think you should really look at.
26
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
27
28
00:02:13,860 --> 00:02:17,250
product to the bag so that they can actually make money off you.
28
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
29
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
30
31
00:02:30,430 --> 00:02:36,460
size because as I said, the bigger items often draw your eyes to it.
31
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
32
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.
33
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".
34
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
35
36
00:03:02,570 --> 00:03:05,630
important for them to capture the emails.
36
37
00:03:05,630 --> 00:03:08,930
This is kind of what this design is representing
37
38
00:03:08,930 --> 00:03:09,760
right?
38
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
39
40
00:03:15,560 --> 00:03:22,380
your email address and get started so that the company can capture your information.
40
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
41
42
00:03:29,090 --> 00:03:30,460
of your website.
42
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
43
44
00:03:36,710 --> 00:03:40,040
is all laid out in the same kind of way
44
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
45
46
00:03:46,970 --> 00:03:52,160
then create some different sizes and different shapes and different hierarchies to make your design
46
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
47
48
00:04:02,820 --> 00:04:03,300
it looks.
48
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
49
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.
50
51
00:04:15,630 --> 00:04:18,870
Just look at how long each line of text is.
51
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.
52
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
53
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.
54
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
55
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.
56
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
57
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
58
59
00:05:04,880 --> 00:05:06,050
more of it in.
59
60
00:05:07,100 --> 00:05:10,610
Now another thing I want to talk about is alignment.
60
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.
61
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
62
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.
63
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
64
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.
65
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
66
67
00:05:51,050 --> 00:05:53,780
the number of alignment points.
67
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
68
69
00:05:59,870 --> 00:06:01,680
for your birthday party,
69
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
70
71
00:06:09,380 --> 00:06:10,870
of each item.
71
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
72
73
00:06:17,240 --> 00:06:21,490
looks a lot more coherent like all the pieces are meant to be together.
73
74
00:06:21,680 --> 00:06:25,100
And it just looks a lot more professional.
74
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
75
76
00:06:31,400 --> 00:06:33,490
is and try to line them all up.
76
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
77
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
78
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
79
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
80
81
00:07:03,630 --> 00:07:05,210
your elements.
81
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
82
83
00:07:12,290 --> 00:07:13,580
I look through the window.
83
84
00:07:22,860 --> 00:07:24,540
Now here's an experiment.
84
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.
85
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.
86
87
00:07:37,080 --> 00:07:41,330
Now this is really a use case for white space.
87
88
00:07:41,340 --> 00:07:45,030
A lot of luxury shops, luxury designer stores,
88
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
89
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
90
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.
91
92
00:08:07,050 --> 00:08:12,030
And the same principle applies when it comes to digital design as well.
92
93
00:08:12,030 --> 00:08:15,290
Let's say you have an ad for noise cancelling headphones.
93
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".
94
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
95
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
96
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.
97
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
98
99
00:08:46,650 --> 00:08:49,170
design for your audience.
99
100
00:08:49,170 --> 00:08:53,110
A lot of things I've said, including not using comic-sans,
100
101
00:08:53,130 --> 00:08:54,830
it really depends on your audience.
101
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
102
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.
103
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
104
105
00:09:15,030 --> 00:09:16,290
go to that concert.
105
106
00:09:17,250 --> 00:09:19,360
So think about your audience.
106
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
107
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
108
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
109
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
110
111
00:09:44,940 --> 00:09:47,360
audience and that's perfectly fine.
111
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
112
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
113
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.
114
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.
115
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
116
117
00:10:22,350 --> 00:10:27,420
be well on the way to creating more beautiful user interfaces for your websites.
13910
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.