All language subtitles for 5. Importance of Visual Hierarchy

Meet
1

Lingscars
2

.com
3

One of the most terrifying websites I've ever seen.
4

What is that
5

make some websites so hilariously terrible?
6

And what makes others look well designed?
7

We've already covered the first big reason, the alignment.
8

This page hates alignment.
9

Its anti-aligned.
10

The second big reason is a visual hierarchy.
11

Every object on this godforsaken page demands our attention. All at the same time.
12

We don't know where to look at, where to start our journey. And that can be so overwhelming, that we would
13

rather close the page. Now on this page, there is a very strong visual hierarchy.
14

What's the first thing that you looked at.
15

Probably either that funky colorful art on the right or the headline.
16

Then comes the rest of the elements one by one.
17

This composition took us by the hand and guided us step by step, on what was the most important information
18

first, then second and so on.
19

Check out the two buttons.
20

There is a clear hierarchy even between them.
21

Obviously the full button is the alpha dog.
22

This is called a visual hierarchy and it's a fundamental principle of good design. Visual hierarchy has
23

a lot to do with the way our attention works.
24

We simply cannot focus on more than one thing at a time.
25

This is especially true of our vision.
26

The only very small fraction of what we see, what we look at, is a high definition.
27

The rest is low-resolution peripheral blurriness.
28

Do this.
29

Make a thumbs-up sign put your hand in front of you and look directly at your thumbnail.
30

That small thumbnail is the high definition, is the only high definition, that you see. The rest of it
31

is low-res and quite blurry.
32

The hierarchy in design begins with a focal point.
33

Tom Hanks sitting on the bench, is the undeniable visual target of this poster.
34

It's the most interesting thing.
35

Think of a focal point as a spotlight on a stage.
36

You see how the stage is not actually in lit? it's dark and all the spotlights are shining on Michael Jackson,
37

making him the obvious focal point on this stage.
38

If they had the stage completely lit, then everything else would be visible.
39

But that is not their aim. Our visual interest is obviously on Michael and the stage
40

designers have made sure to give audience exactly that. Look at this design, this graphic guy is the focal
41

point of this composition.
42

He's the main hero in it.
43

That's exactly why, we refer to the main graphic on the page, as the hero shot.
44

Let's do a little self-critique of one of my early works.
45

This is the landing page that I've built for a real estate agency,
46

I cringe a little when I see a design mistakes in some of my early work. But what you gona do,
47

it's the learning process.
48

The clear villain of this work is definitely a lack of proper visual hierarchy.
49

The form sort of is, unsuccessfully, trying to be the focal point.
50

However, it's not supposed to be on top of the hierarchy, it's not the main message of this page.
51

So how come it's trying to steal so much attention. When there is a big background image like this,
52

usually, it's because we want it to be the hero, for the audience to start there, but that's not happening
53

here.
54

It's dark, low quality and it's not clear what the hell is happening in that image.
55

Not to mention how the huge form and the text is covering so much of it. Makes you wonder what is this
56

image doing here
57

altogether? It has no value, it's just adding more noise to the composition.
58

A plain background would be a huge improvement to this.
59

Same with the copy.
60

There is no clear hierarchy, it's hard to tell where a headline ends and where paragraph begins, because
61

they're so similar in style.
62

When we see good design, a lot of times, it's the visual hierarchy that contributes to its beauty.
63

Let's say, we're designing a website for a made-up lawyer called Vincent Schwartz.
64

What is the most important thing on this page?
65

Is it the fact that he is a Boston lawyer? Or is it his long record? Or is it his photo?
66

We don't know, because there's no hierarchy.
67

Everything looks equal.
68

We can't really follow the narrative.
69

This is a whole different story.
70

It's a 100% improvement and I haven't done much.
71

I've used a few design tricks to create a clear hierarchy between the objects, and I'm going to teach
72

you all about these tricks later in this part of the course,
73

so you can take something that looks like an amateur placing elements on the page randomly, and turn
74

it into a well-polished work that you can get paid really well for.
75

Let's break down the hierarchy in here.
76

Do we have a focal point?
77

Obviously, it's the photo of Vincent. And how's the rest of the hierarchy laid out?
78

The second in importance I'd say the name tag, because how close it is to the focal point.
79

It's part of it,
80

so the viewer will glance at the image and the name, in one quick go.
81

Then the bold all caps headline. Fourth actually the button before the text, because it's a larger object
82

with some white space around it.
83

And finally the subhead text.
84

So, what exactly did I do here to create this visual hierarchy?
85

How come this had nearly no hierarchy?
86

But this has a very distinctive focal point and a clearly defined visual hierarchy among the elements.
87

Mainly this has to do with sizes and weights of elements.
88

Size and weight is what usually defines the hierarchy.
89

There are other ways as well, like color contrast, or images that draw a lot of attention and so on,
90

but designers primarily rely on size and weight.
91

First, what I did was to increase the size of the photo.
92

I made it the biggest element.
93

That's it.
94

Whatever is the biggest on the screen, will attract the most attention.
95

It's that simple.
96

The purple rectangle, behind the picture, is also bringing more attention to the photo.
97

Without it, I would have to make the photo much bigger. then I have defined the hierarchy between the
98

headline paragraph and the button.
99

I've made the headline big bold and all caps not only up me the font size much bigger than the original
100

but I've also made extreme liberal.
101

This boldness is what I refer to as a weight off an element.
102

It looks heavy in on families.
103

You'll even see the style called habit.
104

The paragraph underneath the headline is significantly smaller than the headline.
105

It's like David and Goliath.
106

It's a regular font weight.
107

Small caps and small font size and the button I have made transparent with only the borders.
108

This is commonly known as the ghost button.
109

You don't usually want to use this as a primary button but for secondary actions and in cases where
110

you want to decrease its significance it's a great use.
111

And last but not least I have used a better alignment for the content before it was all just centered
112

in the middle.
113

I do often use center alignment but when it doesn't do a good job in making the design look polished
114

and organized the left alignment with a grid definitely does a better job as a fun exercise.
115

I want you to pay attention to the designs around you.
116

Pay attention to the billboards and posters flyers that people hands you and obviously the websites.
117

And look if the designer had used a good visual hierarchy or not.
118

And up next we're going to practice hierarchy.
119

Stick around.