Published on <a href="https://blog.prototypr.io/11-optical-illusions-found-in-visual-design-295e7ae211b9?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> CircularChaos 
Throughout my years of being a Product Designer, I have come across many surprises when working with visuals that have made me go 😲 😕 😳 😡 😱.
I’ve written this article to help you understand the reasons behind why some of these everyday ‘gotchas’ can leave you bewildered. You may not even realise it at first, but a lot of the techniques that you come across when working on an interface, logo or illustration are in fact optical illusions!
So without further ado, here are 11 optical illusions that you may encounter on a regularly basis as a Visual Designer.
<h3>1. Triangle-bisection Illusion</h3>
Pick a point, any point, I double dare ya.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*QuL1tHtjRwZH-SMMWUfDLw.gif">Aligning the triangle based on the centroid
Icons can be deceiving, especially those with complex geometry and odd proportions. Not all icons within a set are symmetrical, pixel perfect or maintain a consistent aspect ratio. Some icons require direct intervention, most notably, the dreaded play button!
Placing a triangle within a curved or straight container can make the element appear optically out of place. The reason for this is due to an effect known as the <a href="http://anstislab.ucsd.edu/files/2012/11/2009-Triangle-bisection-.pdf">triangle-bisection illusion</a>. The triangle’s center of mass is calculated based on its <a href="https://en.wikipedia.org/wiki/Minimum_bounding_box">minimum bounding box</a>. So if you were to place a dot exactly half way up the height of an equilateral triangle, it will optically appear far more than halfway up!
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*iZoUlFsewXQRFrcubuBQng.jpeg">Which version is mathematically centered?
There are 2 theories to this fascinating illusion:
<ul>
<li>Inappropriate constancy scaling The illusion contains perspective cues that increase the perceived size of more distant objects e.g. an equilateral triangle might be perceived as the flat picture of a road seen in perspective, with the top apex lying at infinity and the bottom base as the nearest part of the road.</li>
<li>Centre of gravity/centre of area If an observer was asked to find the halfway point, they will ultimately end up finding the centroid, which has equal areas above and below it. The centroid of an equilateral triangle lies well below its halfway point, and there is evidence that observers make choices that are a compromise between the two.</li>
</ul>
To make the triangle within its container appear optically centred, you’ll need to find the <a href="https://en.wikipedia.org/wiki/Centroid">centroid</a> of a triangle by calculating the point of intersection of the lines joining each vertex with the midpoint of the opposite side. Here is a formula that you can use:
<a href="https://en.wikipedia.org/wiki/Centroid"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oF-eUwbAd3zMzGc13fU7og.png"></a>Formula to find the centroid of a triangle
I’m just kidding, this isn’t an article about physics 💥 (but the formula is still correct).
The centroid can be located 1/3 of the distance from each side to the opposite vertex. This method can also be applied to many other shapes.
<h3>2. Vertical Horizontal Illusion</h3>
Is it a rectangle? Is it a plane? No…it’s a square?!
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*28IT87us-zqpqF6hB8gEfg.gif">Vertical Horizontal Illusion
Squares are the fundamental building blocks of any design system. They can be seen in Material Design cards, Facebook posts, Pinterest pins and Dribbble shots.
After shift-dragging out a square in Sketch, you may sometimes take a double look to see if each of the sides are of equal proportions. If you look close enough, the vertical sides appear longer than the horizontal sides. It’s as if the square is in fact a rectangle! But actually, it is a perfect 1:1 square. This is known as the <a href="https://en.wikipedia.org/wiki/Vertical%E2%80%93horizontal_illusion">vertical-horizontal illusion</a>.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ruUDCxTp5xHFOe3WI23eIA.jpeg">The image in the Facebook post is a 1:1 square
What’s really fascinating is that different cultures as well as genders perceive this illusion differently. People who live in developed urban cities tend to show greater susceptibility than people living in rural areas. This is because those in rural areas tend to be more accustomed to living in round houses.
<h3>3. Mach Bands</h3>
If a false shadow falls on a surface, did it cast an illusion?
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*58RcdUaPSy3S2WzCD8yU5g.gif">Mach Bands
Placing shades of the same colour adjacent to each other was a common trend during the flat design era. Looking closely, you may have noticed a false shadow appearing between the edges of each contrasting shade. This illusion is known as <a href="https://en.wikipedia.org/wiki/Mach_bands">Mach bands</a>. No shadows have been added to the image, it’s just the way our eyes perceive it!
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*barFGDXoITGldkeNnSFBMw.jpeg">Shadows appear between the edges of each row
The technical explanation for the occurrence of this effect is due to <a href="https://en.wikipedia.org/wiki/Lateral_inhibition">lateral inhibition</a>, meaning the darker area falsely appear even darker and the lighter area falsely appearing even lighter.
Although this effect is fairly subtle in the world of visual design, to prove its influence Mach bands can be a real hindrance for dental practitioners. X-rays of teeth generate grayscale images used to analyse abnormal variances of intensity. Mach bands can provide a false-positive diagnosis if not identified correctly.
<h3>4. Hering Illusion</h3>
It’s alive!!!
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*Yogc_ZXPJWDz-tNlVzsSVw.gif">Hering Illusion
Have you ever came across a logo containing very fine lines or a background image with tiny dots appearing to move or pulsate as you’re scrolling? If so, this is due to an aliasing effect called the <a href="https://en.wikipedia.org/wiki/Moir%C3%A9_pattern">Moiré pattern</a> where two grid patterns are overlaid on each other generating false motion once moved. The two grid patterns in this case are the image and monitor refreshing constantly to create the <a href="https://www.quora.com/How-does-the-new-Sonos-logo-achieve-its-pulsating-effect/answer/Brian-Roemmele?srid=p5z1">illusion</a>.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CXeJD3WF7QpRSOEFkMwNhQ.jpeg">Scroll up and down to see the vibration effect
It’s a pretty cool effect, although Moiré isn’t an optical illusion per se, it is an interference pattern. The Sonos logo example uses a combination of the Moiré pattern, <a href="https://en.wikipedia.org/wiki/Hering_illusion">Hering illusion</a> and <a href="https://en.wikipedia.org/wiki/Illusory_motion">illusory motion</a>. This sensory technique is rather popular within the <a href="https://en.wikipedia.org/wiki/Op_art">Op Art</a> community.
<h3>5. Hermann Grid</h3>
To appear, or not to appear, that is the question.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*yXgRwUy_Z3WeOHxf-x1Plg.gif">Hermann Grid
The <a href="https://en.wikipedia.org/wiki/Grid_illusion#Hermann_grid_illusion">Hermann grid illusion</a> is fairly popular and can be seen in layouts which contain a grid of squares placed on a high contrast background. Looking directly at any square produces ghost-like blobs at the intersections of the surrounding squares. But looking directly at an intersection will make the blobs disappear 😱.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*t6yTQ-BnbXlXYVJXTG9fnA.jpeg">
The reason for this effect is due to lateral inhibition. To put it simply, it is the capacity of an excited neuron reducing the neighbouring neurons in the latter direction.
<h3>6. Simultaneous Contrast Illusion</h3>
Are both detached squares reflecting the same amount of light? Hmm…
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*GeP8StH8pOZzUJflP7-8cw.gif">Simultaneous Contrast Illusion
Placing two objects of the same colour on different contrasted backgrounds can make both objects appear as if they are in fact different colours. This phenomena is known as the <a href="https://dmsp.digital.eca.ed.ac.uk/blog/paradoxesandillusions2015/2015/02/10/scientific-approach-of-the-simultaneous-contrast-illusion/">Simultaneous Contrast Illusion</a>. <a href="https://alistapart.com/article/contrast-is-king">Contrast in king</a> in the world of visual design and this effect may differ for some people.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lcFQrI545h8b2m0EsH8RKw.jpeg">The text colour is exactly the same on both sides but doesn’t appear that way
Unfortunately there isn’t a solid theory for why this illusion occurs, but there are plenty of research that speculate why. <a href="http://www.indiana.edu/~p1013447/dictionary/lat_i.htm">Lateral Inhibition</a>, which is responsible for the Hermann Grid and Mach Bands is one reason.
<h3>7. Munker-White Illusion</h3>
Did my eyes just deceive me? 👀
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*64UQY_Ru1NqEPdva0_mziA.gif">Munker-White Illusion
This illusion is fairly subtle, but nonetheless fascinating! Looking at the ‘jiff’(spelt GIF) above, the blocks of purple on the left appear lighter than the purple blocks on the right. Once revealed, both blocks in fact reflect the same amount of light 😲.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_oiIDgq0zrSB0WeDeHRUPQ.jpeg">
The reason for the <a href="https://en.wikipedia.org/wiki/White%27s_illusion">Munker-White</a> illusion is due to…you guessed it, lateral inhibition.
<h3>8. Water Colour Illusion</h3>
Tint-illatingly deceiving!
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*hrcwGuAg6BA-TGGOtmFSRg.gif">Water Colour Illusion
There are times when I’ve added a border to an object and then wondered to myself, “When did I also change the background colour?”. If you look closely, you may notice that the pale area takes on a much lighter shade based on the surrounding border colour. You may be surprised to know that the lighter area is actually white!
This visual phenomena, known as the <a href="https://en.wikipedia.org/wiki/Watercolor_illusion">Water colour illusion</a>, is dependant on the combination of luminance and colour contrast of the contour lines in order to have the colour spreading effect occur.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dusXWI1Htf92X4Wv49z3XQ.jpeg">The white area inside the button appears to take on a slight tint based on the colour of the border
I admit this illusion has left me perplexed a few times so much so that I had to pull out the colour picker just to inspect it!
<h3>9. Jastrow Illusion</h3>
Does size really matter?
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*T5u2wOQSZEOyll30W1gpsw.gif">Jastrow Illusion
Working on an illustration or a logo whether it is a mark or a type requires slicing and dicing different shapes. This illusion occurs when working with curved objects. The two elements appear different in size but upon closer inspection, they are in fact the exact same size! Crazy huh?
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*B3A8WEoADZhxW0FkqSwGFw.jpeg">This illusion is seen during the creation process as some identically curved edges can appear smaller than others
How is this possible? Well this is known as the <a href="https://en.wikipedia.org/wiki/Jastrow_illusion">Jastrow illusion</a> and there is no definitive explanation for why we perceive the different sized segments. One explanation is that our brains are confused by the difference in size between the larger and smaller radius. In other words, the short side makes the long side appear longer, and the long side makes the short side appear even shorter.
<h3>10. Cornsweet Illusion</h3>
It’s a slippery slope.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*kqZodA_-n2K1RGAEHUSj9w.gif">Cornsweet Illusion
In addition to the Simultaneous Contrast and Mach Bands Illusion, the <a href="https://en.wikipedia.org/wiki/Cornsweet_illusion">Cornsweet illusion</a> uses a gradient whilst using a central line to create an impression that one side of the image is in fact darker than the other. But in reality, both sections are the same! You can find that both sides are in fact identical when the sections are placed in parallel.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6Gkho0QVFUN_NTIED2UOVw.jpeg">Each diamond has the same gradient but they appear to be getting darker (from top to bottom)
This illusion produces a similar effect to the two aforementioned illusions but in fact differs in two important ways:
<ul>
<li>In the Mach bands example shown previously, the effect is seen only on areas that are close to the border of each shade. The Cornsweet illusion however affects there perception of the entire area.</li>
<li>With the Cornsweet illusion, the light part of the edge appears lighter and the dark part of the edge appears darker. This is the opposite of the usual contrast effects.</li>
</ul>
<h3>11. Müller-Lyer Illusion</h3>
Typo-loco!
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*BtY5uKgMcHHLp39_iAm1hg.gif">Overshooting for optimal visual perception
Typographers will understand that crafting a font requires you to rely more on your design intuition rather than your logical thinking. Mathematically positioning each character based on its metric height will make the entire word appear disproportionate in terms of visual perception. A common practice in <a href="https://frerejones.com/blog/typeface-mechanics-001/">type mechanics</a> involves a process called <a href="https://en.wikipedia.org/wiki/Overshoot_(typography)">overshooting</a>. To put it simply, overshooting is a process of resizing individual characters to achieve optical balance.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2qcY70bVAj6CAUrjudRygQ.jpeg">Without overshooting, the letter ‘e’ in LinkedIn and the letter ‘z’ in Amazon are not optically balanced
Looking at the famous logos above, some characters do not sit flush within the baseline and x-height. Typographers have to manually optically adjust each character pairs for the best result.
<h4>But why do we need to overshoot in typography?</h4>
The reason why overshooting is required is due to one of the most popular optical illusions in the world, the <a href="https://www.popsci.com/science/article/2013-03/are-these-walls-the-same-size-your-answer-depends-on-where-youre-from#page-2">Müller-Lyer Illusion</a>. This visual phenomena states that placing a chevron on each end of a line segment can cause one segment to appear shorter or longer depending the direction of the chevron. This classic illusion proves the <a href="https://io9.gizmodo.com/the-famous-optical-illusion-hidden-in-every-typeface-in-1714788793">fallibility of human perception</a>. Pretty cool eh?
<h3>Have you come across any other optical illusions that have left you bewildered?</h3>
If you’re interested in learning more about visual perceptions or improving your skills as a Visual Designer, I’d recommend reading up on <a href="https://en.wikipedia.org/wiki/Gestalt_psychology">Gestalt psychology</a>.
Honourable mentions:
<ul>
<li><a href="https://en.wikipedia.org/wiki/Illusory_contours">Kanizsa’s Triangle</a></li>
<li><a href="https://en.wikipedia.org/wiki/Ebbinghaus_illusion">Ebbinghaus illusion</a></li>
<li><a href="https://en.wikipedia.org/wiki/Ehrenstein_illusion">Ehrenstein illusion</a></li>
<li><a href="https://en.wikipedia.org/wiki/Neon_color_spreading">Neon colour spreading</a></li>
<li><a href="https://en.wikipedia.org/wiki/Checker_shadow_illusion">Checker shadow illusion</a></li>
<li><a href="https://en.wikipedia.org/wiki/Illusory_motion">Illusory Motion 1</a></li>
<li><a href="http://www.psy.ritsumei.ac.jp/~akitaoka/ICP2016.html">Illusory Motion 2</a></li>
</ul>
If you’ve noticed any mistakes in this article or feel that improvements can be made, then please do let me know in the comment section, I appreciate it! 👊🏼
<h4>Finally if you’ve enjoyed this article and feel that you’ve learnt something of value, then please give it a 👏🏼 so that others can learn from it too. If you would like to connect, you can find me posting my thoughts on <a href="https://twitter.com/circularchaos?lang=en">Twitter</a> and my work on <a href="https://dribbble.com/circularchaos">Dribbble</a>. Thank you for reading!</h4>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=295e7ae211b9" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/11-optical-illusions-found-in-visual-design-295e7ae211b9">11 Optical Illusions Found in Visual Design</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

11 Optical Illusions Found in Visual Design

Top Stories