Hacking of the visual system: 11 optical illusions in graphic design

Is the rabbit hole deep?


How many minutes do you need to understand what the chip is?

Francis Bacon in 1620 divided the sources of human error in the way of cognition into four groups, which he called "ghosts" or "idols" (Latin idola).

"Ghosts of the genus" stem from human nature itself, they do not depend on either culture or individuality of a person. "The human mind is like an uneven mirror, which, mixing the nature of things, reflects things in a distorted and disfigured form."
  "Ghosts of a cave" are individual errors of perception, both congenital and acquired. "After all, in addition to the mistakes inherent in the human race, there is a special cave that weakens and distorts the light of nature."
  "The ghosts of the square (market)" - a consequence of the social nature of man, - communication and use of language in communication. "People unite with speech. Words are established according to the understanding of the crowd. Therefore, the bad and ridiculous establishment of words surprisingly precipitates the mind. "
  "Ghosts of the theater" - this is a person's assimilated from other people false ideas about the structure of reality. "At the same time, we understand here not only the general philosophical teachings, but also the numerous principles and axioms of sciences that have gained strength due to tradition, faith and carelessness." [ Wikipedia ]

Under the cut - a visual demonstration of the vulnerability of our brains to attacks through visual input. I present to you the translation of the article of the product designer and front-end developer Balraj Chana, about how you can use / neutralize the effect of optical illusions.
<mumblecut />
1. Illusion of Triangle Section

Aligning a triangle based on a centroid (barycenter).

Icons can be deceptive, especially with complex geometry and odd proportions. Not all icons in the set are symmetrical, pixel-perfect or contain compatible proportions. Some icons require direct intervention, and in the first place, this awesome play button.

Putting a triangle inside a curved or straight tank can make the element optically inappropriate. The reason for this is the effect known as the illusion of the cross section of the triangle . The center of mass of the triangle is calculated based on its minimum bounding rectangle . Therefore, if you need to place a point exactly in the middle along the height of an equilateral triangle, then it will appear optically much higher.


Which option is mathematically centered?

There are two theories for this fascinating illusion:

Wrong scaling of constants. The illusion contains perspective signals that increase the perceived size of more distant objects, for example, an equilateral triangle can be perceived as a flat road picture, seen in perspective, with an upper vertex lying at infinity and a lower base perceived as the nearest part of the road.
Center of gravity . If the observer is asked to find a point in the middle, everything will end up by finding a centroid that has equal areas above and below it. The centroid of an equilateral triangle is well below the midpoint, and there is evidence that observers make choices that are compromise.

In order for the triangle inside the container to be optically centered, you must find the centroid (barycenter) of the triangle by calculating the intersection of the lines connecting each vertex to the midpoint the opposite side. Here's a formula you can use:


The formula for finding the centroid of a triangle.

The centroid may be 1/3 of the distance from each side to the opposite vertex. This method can also be applied to many other forms.
2. Vertical-Horizontal Illusion

Vertical-horizontal illusion.

Squares are the fundamental building blocks of any design system. They can be seen in maps of material design, posts on Facebook, pictures in Pinterest and the community of Dribble.

After moving a square into a sketch, it is sometimes worth looking twice to see if each side has equal proportions. If you look carefully enough, you will see that the vertical sides seem longer than the horizontal sides. As if the square is actually a rectangle! But, in fact, this is the ideal square 1: 1. This is called the vertical-horizontal illusion .


The post image on Facebook is a 1: 1 square.

Indeed, it is fascinating that the perception of this illusion depends on culture and gender. People living in developed cities tend to be more receptive than people living in rural areas. This is due to the fact that people in rural areas tend to live in round houses.
3. The Mach bands

Mach Bands.

Placement of shades of the same color next to each other was a common trend in the era of flat design. Looking closely, you may have noticed a false shadow appearing between the edges of each contrasting shadow. This illusion is known as " Mach Bands ". No shadow has been added to the image, our eyes simply perceive.


Shadows appear between the faces of each row.

The technical explanation for the occurrence of this effect is associated with a side inhibition, meaning that the darker area falsely seems even darker, and the lighter one - even lighter.

Although this effect is quite imperceptible in the world of graphic design, it is possible to prove its influence - it can become a real hindrance to dentists. X-rays create images in shades of gray, used to analyze abnormal intensity deviations. The Mach strips can provide a mistakenly positive diagnosis if it is not correctly identified.
4. Hering's illusion

  Hering's Illusion.

Have you ever come across a logo containing very thin lines or a background image with tiny dots that move or pulsate while you scroll? If so, this is because of the mirror-frequency effect, called the moiré pattern , where the two grid models are superimposed on each other friend, generating false of the motion.


Scroll up and down to feel the vibration effect.

This is a very cool effect, although Moire is not an optical illusion per se, it is an interference figure. An example of the Sonos logo uses a combination of Moire patterns , Hering's illusion and illusory movements . This sensor technology is quite popular in the art of " Op-art ".
5. The Herman grid

Herman's grid.

The illusion of the Herman grid is quite popular, and it can be seen in mockups that contain a grid of squares placed on a high contrast background. If you look directly at any square, you will see a ghostly ball at the intersection of neighboring squares. But if you look at the very intersection - the ball will disappear.


The cause of this effect is secondary braking. Simply put, the possibility of an excited neuron to lower neighboring neurons in the latter direction.
6. Contrast Illusion

Contrast illusion.

Placement of two objects of the same color on different contrasting backgrounds can lead to the fact that they will appear in different colors. This phenomenon is known as contrast illusion . It is believed that Contrast is the king of , but not everyone perceives it identically.


The text color is exactly the same on both sides, but it does not seem that way.

Unfortunately, there is no established theory about why this illusion occurs, but many studies speculate, why. One of the reasons is side braking , which is responsible for the Herman Grid and the Mach Line.
7. Illusion of Munker-White

The illusion of Munker-White.

This illusion is rather insignificant, but nevertheless fascinating. Looking at the hypha above, the purple blocks on the left seem lighter than on the right. But it was revealed that both blocks actually reflect the same amount of light.


The reason Munker-White illusions is ... as you guessed it ... the side braking.
8. The Illusion of Watercolors

The Watercolor Illusion.

There were times when I added a border to an object, and then I asked myself: "When did I change the background color?" If you look closely, you can see that the pale area gets a much lighter shade due to the color of the border. Strongly surprised if I say that this bright area is actually white?

This visual phenomenon, known as the illusion of the watercolor , depends on the combination of brightness and color contrast of the contour lines.


The white area inside the button seems to take on a small tint depending on the border color .
9. Illusion by Jastrow

Illusion by Jastrow.

This illusion occurs when working with curvilinear objects. It seems that these two elements differ in size, but on closer inspection, they are, in fact, the same size.


This illusion manifests itself in the creation process, because some identically curved faces may look smaller than others .

How is this possible? Well, this is known as Jastrow's illusion, and there is no final explanation why we perceive the segments in different ways. One explanation is that our brain does not see a difference in the dimensions of the large and small radius. In other words, because of the short side, the long one seems long, and vice versa.
10. The Illusion of Cornswith


Cornswith's illusion.

In addition to the illusion of the contrast and illusion of the Mach Strips, Cornswith's illusion uses a gradient with a center line to create the impression that on one side the image itself business is darker than on the other. But in fact, they are the same! You may find that when the sections are placed in parallel, both sides are actually identical.


Each rhombus has the same gradient, but it seems that they become darker (from top to bottom).

This illusion produces a similar effect on the two above-mentioned illusions, but actually differs in two important aspects:

In the example of the Mach stripes shown earlier, the effect is only visible on sections close to the boundary of each shadow. However, Cornswith's illusion affects the perceptions of the whole area.
With Cornswith's illusion, the light part of the face looks lighter, and the darker part of the face seems darker. This is the opposite of the usual contrast effect.

11. The illusion of Mueller-Layer

Missing for optimal visual perception.

Typographers will understand that to create a font you need to rely more on design intuition, rather than on logical thinking. Mathematical positioning of each symbol based on its metric height will make the whole word disproportionate from the point of view of visual perception. The usual practice of includes a process called exceeding (overshooting). Simply put, excess is the process of changing the size of individual symbols to achieve an optical balance.


Without exceeding the letter "e" in LinkedIn and the letter "z" in Amazon are not optically balanced.

Looking at the famous logos above, you will notice that some of the signs are not within the baseline and the height-X. The typographers must manually adjust each symbol for the best result.

But why do we need elevations in the printing house?

The reason for exceeding is related to one of the most popular optical illusions in the world - with the illusion of Mueller-Layer . This visual phenomenon says that placing a chevron at each end of a line segment can cause one segment to be shorter or longer depending on the direction of the chevron. This classic illusion proves the shyness of human perception .

Have you encountered any other optical illusions that have puzzled you?
If you want to learn more about visual perception or improve your skills as a designer, I would recommend gestalt psychology .

Worthy of attention:

Cane Triangle
Illusion of Ebbingaus
Ehrenstein's illusion
Neon propagation
Shadow Illusion
Illusory Movement 1
Illusory Movement 2

Translation: Alia Blankmer
Papay 18 november 2017, 12:52
Vote for this post
Bring it to the Main Page


Leave a Reply

Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute