Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
1
00:00:00,520 --> 00:00:01,800
Meet
1
2
00:00:01,830 --> 00:00:02,340
Lingscars
2
3
00:00:02,340 --> 00:00:03,330
.com
3
4
00:00:03,360 --> 00:00:05,790
One of the most terrifying websites I've ever seen.
4
5
00:00:06,090 --> 00:00:06,620
What is that
5
6
00:00:06,620 --> 00:00:09,300
make some websites so hilariously terrible?
6
7
00:00:09,480 --> 00:00:12,410
And what makes others look well designed?
7
8
00:00:12,740 --> 00:00:16,290
We've already covered the first big reason, the alignment.
8
9
00:00:16,290 --> 00:00:18,220
This page hates alignment.
9
10
00:00:18,300 --> 00:00:19,610
Its anti-aligned.
10
11
00:00:19,650 --> 00:00:22,160
The second big reason is a visual hierarchy.
11
12
00:00:22,260 --> 00:00:28,310
Every object on this godforsaken page demands our attention. All at the same time.
12
13
00:00:28,350 --> 00:00:34,260
We don't know where to look at, where to start our journey. And that can be so overwhelming, that we would
13
14
00:00:34,260 --> 00:00:39,420
rather close the page. Now on this page, there is a very strong visual hierarchy.
14
15
00:00:39,420 --> 00:00:41,980
What's the first thing that you looked at.
15
16
00:00:42,000 --> 00:00:47,060
Probably either that funky colorful art on the right or the headline.
16
17
00:00:47,130 --> 00:00:49,720
Then comes the rest of the elements one by one.
17
18
00:00:49,730 --> 00:00:55,200
This composition took us by the hand and guided us step by step, on what was the most important information
18
19
00:00:55,200 --> 00:00:57,660
first, then second and so on.
19
20
00:00:57,810 --> 00:00:59,250
Check out the two buttons.
20
21
00:00:59,250 --> 00:01:01,710
There is a clear hierarchy even between them.
21
22
00:01:01,710 --> 00:01:04,500
Obviously the full button is the alpha dog.
22
23
00:01:04,500 --> 00:01:11,070
This is called a visual hierarchy and it's a fundamental principle of good design. Visual hierarchy has
23
24
00:01:11,070 --> 00:01:13,350
a lot to do with the way our attention works.
24
25
00:01:13,350 --> 00:01:16,470
We simply cannot focus on more than one thing at a time.
25
26
00:01:16,470 --> 00:01:19,420
This is especially true of our vision.
26
27
00:01:19,560 --> 00:01:25,770
The only very small fraction of what we see, what we look at, is a high definition.
27
28
00:01:25,770 --> 00:01:31,800
The rest is low-resolution peripheral blurriness.
28
29
00:01:31,890 --> 00:01:32,640
Do this.
29
30
00:01:32,790 --> 00:01:40,230
Make a thumbs-up sign put your hand in front of you and look directly at your thumbnail.
30
31
00:01:40,360 --> 00:01:48,420
That small thumbnail is the high definition, is the only high definition, that you see. The rest of it
31
32
00:01:48,420 --> 00:01:51,010
is low-res and quite blurry.
32
33
00:01:51,060 --> 00:01:53,990
The hierarchy in design begins with a focal point.
33
34
00:01:54,030 --> 00:01:59,190
Tom Hanks sitting on the bench, is the undeniable visual target of this poster.
34
35
00:01:59,190 --> 00:02:01,440
It's the most interesting thing.
35
36
00:02:01,500 --> 00:02:04,920
Think of a focal point as a spotlight on a stage.
36
37
00:02:05,010 --> 00:02:10,800
You see how the stage is not actually in lit? it's dark and all the spotlights are shining on Michael Jackson,
37
38
00:02:10,800 --> 00:02:15,360
making him the obvious focal point on this stage.
38
39
00:02:15,360 --> 00:02:20,050
If they had the stage completely lit, then everything else would be visible.
39
40
00:02:20,190 --> 00:02:24,960
But that is not their aim. Our visual interest is obviously on Michael and the stage
40
41
00:02:24,960 --> 00:02:32,430
designers have made sure to give audience exactly that. Look at this design, this graphic guy is the focal
41
42
00:02:32,430 --> 00:02:34,180
point of this composition.
42
43
00:02:34,200 --> 00:02:36,180
He's the main hero in it.
43
44
00:02:36,180 --> 00:02:40,770
That's exactly why, we refer to the main graphic on the page, as the hero shot.
44
45
00:02:41,460 --> 00:02:44,660
Let's do a little self-critique of one of my early works.
45
46
00:02:44,670 --> 00:02:48,390
This is the landing page that I've built for a real estate agency,
46
47
00:02:48,420 --> 00:02:54,070
I cringe a little when I see a design mistakes in some of my early work. But what you gona do,
47
48
00:02:54,180 --> 00:02:55,710
it's the learning process.
48
49
00:02:55,710 --> 00:03:00,190
The clear villain of this work is definitely a lack of proper visual hierarchy.
49
50
00:03:00,330 --> 00:03:04,710
The form sort of is, unsuccessfully, trying to be the focal point.
50
51
00:03:04,710 --> 00:03:10,140
However, it's not supposed to be on top of the hierarchy, it's not the main message of this page.
51
52
00:03:10,140 --> 00:03:17,230
So how come it's trying to steal so much attention. When there is a big background image like this,
52
53
00:03:17,250 --> 00:03:23,280
usually, it's because we want it to be the hero, for the audience to start there, but that's not happening
53
54
00:03:23,280 --> 00:03:23,540
here.
54
55
00:03:23,550 --> 00:03:27,820
It's dark, low quality and it's not clear what the hell is happening in that image.
55
56
00:03:27,840 --> 00:03:33,930
Not to mention how the huge form and the text is covering so much of it. Makes you wonder what is this
56
57
00:03:33,930 --> 00:03:34,680
image doing here
57
58
00:03:34,680 --> 00:03:39,070
altogether? It has no value, it's just adding more noise to the composition.
58
59
00:03:39,080 --> 00:03:41,890
A plain background would be a huge improvement to this.
59
60
00:03:41,970 --> 00:03:42,810
Same with the copy.
60
61
00:03:42,830 --> 00:03:48,300
There is no clear hierarchy, it's hard to tell where a headline ends and where paragraph begins, because
61
62
00:03:48,300 --> 00:03:50,160
they're so similar in style.
62
63
00:03:50,160 --> 00:03:55,380
When we see good design, a lot of times, it's the visual hierarchy that contributes to its beauty.
63
64
00:03:55,380 --> 00:03:59,570
Let's say, we're designing a website for a made-up lawyer called Vincent Schwartz.
64
65
00:03:59,670 --> 00:04:01,970
What is the most important thing on this page?
65
66
00:04:01,980 --> 00:04:08,070
Is it the fact that he is a Boston lawyer? Or is it his long record? Or is it his photo?
66
67
00:04:08,100 --> 00:04:10,020
We don't know, because there's no hierarchy.
67
68
00:04:10,020 --> 00:04:10,990
Everything looks equal.
68
69
00:04:11,010 --> 00:04:13,050
We can't really follow the narrative.
69
70
00:04:13,050 --> 00:04:14,390
This is a whole different story.
70
71
00:04:14,400 --> 00:04:17,360
It's a 100% improvement and I haven't done much.
71
72
00:04:17,370 --> 00:04:23,160
I've used a few design tricks to create a clear hierarchy between the objects, and I'm going to teach
72
73
00:04:23,160 --> 00:04:26,500
you all about these tricks later in this part of the course,
73
74
00:04:26,640 --> 00:04:33,360
so you can take something that looks like an amateur placing elements on the page randomly, and turn
74
75
00:04:33,360 --> 00:04:37,180
it into a well-polished work that you can get paid really well for.
75
76
00:04:37,200 --> 00:04:39,090
Let's break down the hierarchy in here.
76
77
00:04:39,090 --> 00:04:40,770
Do we have a focal point?
77
78
00:04:41,340 --> 00:04:46,460
Obviously, it's the photo of Vincent. And how's the rest of the hierarchy laid out?
78
79
00:04:46,560 --> 00:04:51,150
The second in importance I'd say the name tag, because how close it is to the focal point.
79
80
00:04:51,270 --> 00:04:52,230
It's part of it,
80
81
00:04:52,230 --> 00:04:56,170
so the viewer will glance at the image and the name, in one quick go.
81
82
00:04:56,310 --> 00:05:03,320
Then the bold all caps headline. Fourth actually the button before the text, because it's a larger object
82
83
00:05:03,350 --> 00:05:05,120
with some white space around it.
83
84
00:05:05,120 --> 00:05:07,010
And finally the subhead text.
84
85
00:05:07,070 --> 00:05:11,070
So, what exactly did I do here to create this visual hierarchy?
85
86
00:05:11,090 --> 00:05:13,620
How come this had nearly no hierarchy?
86
87
00:05:13,880 --> 00:05:21,950
But this has a very distinctive focal point and a clearly defined visual hierarchy among the elements.
87
88
00:05:21,980 --> 00:05:25,190
Mainly this has to do with sizes and weights of elements.
88
89
00:05:25,190 --> 00:05:28,530
Size and weight is what usually defines the hierarchy.
89
90
00:05:28,550 --> 00:05:34,040
There are other ways as well, like color contrast, or images that draw a lot of attention and so on,
90
91
00:05:34,100 --> 00:05:37,790
but designers primarily rely on size and weight.
91
92
00:05:37,790 --> 00:05:41,000
First, what I did was to increase the size of the photo.
92
93
00:05:41,000 --> 00:05:42,850
I made it the biggest element.
93
94
00:05:42,890 --> 00:05:43,740
That's it.
94
95
00:05:43,760 --> 00:05:47,120
Whatever is the biggest on the screen, will attract the most attention.
95
96
00:05:47,120 --> 00:05:48,470
It's that simple.
96
97
00:05:48,470 --> 00:05:53,260
The purple rectangle, behind the picture, is also bringing more attention to the photo.
97
98
00:05:53,270 --> 00:05:58,820
Without it, I would have to make the photo much bigger. then I have defined the hierarchy between the
98
99
00:05:58,820 --> 00:06:01,360
headline paragraph and the button.
99
100
00:06:01,390 --> 00:06:07,790
I've made the headline big bold and all caps not only up me the font size much bigger than the original
100
101
00:06:07,820 --> 00:06:09,840
but I've also made extreme liberal.
101
102
00:06:09,860 --> 00:06:14,120
This boldness is what I refer to as a weight off an element.
102
103
00:06:14,120 --> 00:06:16,670
It looks heavy in on families.
103
104
00:06:16,680 --> 00:06:19,000
You'll even see the style called habit.
104
105
00:06:19,160 --> 00:06:22,910
The paragraph underneath the headline is significantly smaller than the headline.
105
106
00:06:22,970 --> 00:06:24,710
It's like David and Goliath.
106
107
00:06:24,800 --> 00:06:26,660
It's a regular font weight.
107
108
00:06:26,660 --> 00:06:32,450
Small caps and small font size and the button I have made transparent with only the borders.
108
109
00:06:32,450 --> 00:06:34,980
This is commonly known as the ghost button.
109
110
00:06:35,030 --> 00:06:40,550
You don't usually want to use this as a primary button but for secondary actions and in cases where
110
111
00:06:40,550 --> 00:06:44,130
you want to decrease its significance it's a great use.
111
112
00:06:44,190 --> 00:06:49,580
And last but not least I have used a better alignment for the content before it was all just centered
112
113
00:06:49,580 --> 00:06:50,480
in the middle.
113
114
00:06:50,480 --> 00:06:56,210
I do often use center alignment but when it doesn't do a good job in making the design look polished
114
115
00:06:56,240 --> 00:07:02,600
and organized the left alignment with a grid definitely does a better job as a fun exercise.
115
116
00:07:02,600 --> 00:07:05,850
I want you to pay attention to the designs around you.
116
117
00:07:05,900 --> 00:07:12,140
Pay attention to the billboards and posters flyers that people hands you and obviously the websites.
117
118
00:07:12,230 --> 00:07:17,060
And look if the designer had used a good visual hierarchy or not.
118
119
00:07:17,060 --> 00:07:19,550
And up next we're going to practice hierarchy.
119
120
00:07:19,550 --> 00:07:20,110
Stick around.
12169
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.