Between these two horizontal lines, just the lines not counting the arrow heads. 1
Which one of these lines is longer? Just like 80% of the people you probably went with the bottom 2
line. 3
But the truth is that they are exact the same length. 4
These sort of optical illusions happen all the time in design. 5
You will take two objects, measure them and see that they are often exact size. But our eyes tell us that 6
the circle is slightly smaller than the square. 7
So what do we do in such cases? 8
Do we go what our ruler says or do we trust our eyes? 9
Most of the time we're going to trust our eyes. 10
That means, if an object appears slightly smaller than its counterpart, we need to compensate for the 11
optical illusion and increase the size slightly until the both appear the equal size. 12
Then we're going to have two objects that appear the same size. 13
This is more important than their actual pixel sizes, because audience isn't going to get out the rulers 14
and start measuring. 15
But if something looks smaller they will find it odd. 16
The illustrations are common graphic elements that you will use in your web designs. 17
A lot of times these illustrations or icons are going to have varied shapes. 18
This can make equal sized illustrations look very different from each other. 19
In this example envelope on the left looks bigger. 20
It's overpowering the icon on the right, when they are supposed to have equal hierarchy. 21
Although, their sizes are identical. They have both the same height and the same width. But the envelope 22
has much fuller body compared to the tent. 23
This is what designers usually refer to as the weight of the object. And heavier objects will look 24
bigger. 25
They will look wider or taller. 26
So we need to manually compensate for the tent's lighter body by increasing its actual pixel dimensions. 27
There is no rule on how much to increase. 28
This has to be done by eye. Increasing until they feel like equal size. 29
Then you'll get balanced composition that feels aligned with matching sizes. 30
These tiny little details is what makes the page look like it was designed by an amateur or a pro. 31
Most web designers and developers, who don't have a background in graphic design or anything design related, 32
they measure things by a ruler. And what happens, is that results come out to be inconsistent and quite 33
clumsy. 34
A client or a user isn't going to notice what is exactly wrong with the page. 35
They will notice it, but they won't know what exactly is off with it. But they will feel that the page 36
isn't quote on quote “designed”. 37
Here's another very common optical illusion. 38
This was one of the very first design lessons that I received from my design mentor. 39
Whenever we need to put something, for example, text inside a box. What does one usually do? 40
Find the exact middle of the container and place their element right in the center. 41
The issue with this is that text feels like it's sinking. 42
It even feels like space above the text is larger, compared to the space below it. 43
Sinking Feeling isn't a good impression for any design. 44
Instead what we want to do is to nudge the text a little towards the top. So it feels like it's floating. 45
To remember easily, 46
think of it as a ship. Sinking ship, 47
not good. Floating ship, 48
great. 49
This doesn't mean you should always nudge it up instead of aligning exactly in the middle. 50
Sometimes it won't be necessary. 51
It will depend on the typography spacing and so on. 52
Just like all optical illusions, either it appears or it doesn't. 53
No need to fix an illusion if it doesn't exist. But if you see this sinking effect, then fix it. 54
As a matter of fact, heavier looking objects will feel like they're sinking more. And lighter objects 55
will tend to feel like they're floating. 56
It's crazy how accurate this is to a real world.