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 lit? it's dark and all the spotlights are shining on Michael Jackson, 37
making him the obvious focal point of 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 the image. 55
Not to mention how the huge form and the text is covering so much of it. Makes me 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 I've made the font size much bigger than the original, 100
but I've also made it extremely bold. 101
This boldness is what I refer to as a weight of an element. 102
It looks heavy. In font families, 103
you'll even see the style called Heavy. 104
The paragraph underneath the headline is significantly smaller than the headline. 105
It's like David and the 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 often 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 hand 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.