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 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 of 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 the 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 me 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 I've made the font size much bigger than the original,
100

101
00:06:07,820 --> 00:06:09,840
but I've also made it extremely bold.
101

102
00:06:09,860 --> 00:06:14,120
This boldness is what I refer to as a weight of an element.
102

103
00:06:14,120 --> 00:06:16,670
It looks heavy. In font families,
103

104
00:06:16,680 --> 00:06:19,000
you'll even see the style called Heavy.
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 the 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 often 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 hand 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.