Have you ever seen a design that made your eyes play tricks on you? That’s because the way in which our brain interprets information is a little different from how it is actually understood. A visual stimulus that is perceived by the eyes and then processed by the brain in a way that seems to differ from reality, this characteristic in design is an optical illusion. Despite how well an image, a heading, or anything visually appealing aligns on a page, our eyes are not always in agreement. It may seem as if the image is lowered than it should be. While the results will be perfect, they won't look ideal if you let your computer do it. Although optical illusions can be intentional and add an element of surprise and intrigue to a design, they can also be problematic if used unintentionally. So what makes our eyes pleased? It is called optical alignment, and it is just negligibly different from the actual alignment. There's a tiny difference you won't even notice. It is not mathematically correct, but it makes a big difference. It appears that the brain processes data more positively when the optical field is aligned. For the eyes, this arrangement is more comfortable. In order to understand what optical illusions imply in design and what role they play, let's take a look at real-world examples. You're probably familiar with the Play Button or YouTube Logo. It is quite primitive and is usually a typical example of optical illusion.
In the first instance, it may appear that this triangle is positioned in the centre of the shape. However, this isn't exactly the case. According to the precise measurements, we have 111 pixels on the left and 94 pixels on the right:
An optical illusion has been created here. In order to reach the most convincing results, mathematical laws must be broken just a bit. Let me show you what this icon would look like if everything was done according to math, where the left and right indents were the same lengths.
The triangle appears to have shifted away from its centre, creating an unbalanced appearance. It has more optical weight on its left side than it does on its right, and that is the essence of optical alignment. For the same reason, the circular play button appears more aesthetically pleasing than the square one. To predict the problem beforehand, it is necessary to pay attention to the layout when accepting a design and to evaluate how visually aligned the icons are. If inside the icons, they do not look balanced (as in our example), they will need optical Adjustment. Optical Adjustments for Various Type of Illusions The purpose of an optical adjustment is to create an appealing piece and to reinforce the message. Without this adjustment, the reader can become impaired from comprehension. In practice, it can seem like a significant amount of work to witness the benefits of optical alignment. However, there are a number of contraindications to optic alignment. It is challenging to optically align text, icons, and items when designing, especially when using responsive layouts. Finally, the aim is to minimize distracting elements and draw attention to the most important items. There is a myriad of reasons why the human eye prefers optical alignment over the mathematical alignment. the focal point, the occupied area within a bounding box, object visual weight, colour, fill, etc. Optical Imbalance in Shapes Shapes are one of the most commonly used design elements in graphic design, and they can be used to create a variety of optical illusions. When it comes to aligning content, there is usually some discrepancy between objects aligned with measurements.
Visually, the circle appears to be smaller than a square. In fact, if you measure the real size of those shapes, we'll discover that they have the same diameter and size. If we slightly increase our circle, the shapes will look visually closer to each other (have the same size/weight), although in this case, the diameter of the circle will be more extensive than the diameter of the square. All of this can be called a visual compensation of space. The closer a shape resembles the square, the larger the shape will appear.
The same technique works with other shapes, such as a rhombus and a triangle. This exact same principle works when you design icons: Optical Imbalance in Typography
The slant character like A, V or W have no room between them but equally distributed breathing space and The curvature of font like C or O are a little out than the straight one, this is called offshoot. These are the basic examples of Optical imbalance in typography.
Overshoot Using curved and pointed shapes/letters to create the optical illusion that they are the same size by drawing them over the capline and baseline
As can be seen, the two objects are cantered relative to each other. But due to the fact that they have distinct weights (in our case, you still need to take into account the baseline of the text), this gives a visually not-pleasant sensation that the object is raised. We need to apply optical alignment and lower the object inside the bounding box as shown in the example on the right.
In this case, the three dots are aligned with the text's x-height. There are different optical adjustments for uppercase and lowercase words. Optical Imbalance due to Colours
The use of colour is an essential element in graphic design, Considering colour has the ability to elicit emotions, convey meaning, and affect how people perceive information. Yet, a colour imbalance might produce optical illusions that can reduce the design's overall visual effect. In this article, we'll look at some instances of optical illusions brought on by a colour balance issue in graphic design, as well as some strategies for avoiding them.
The optical illusion of colours is less apparent. However, it is all a matter of optical weight in this case. Use the same colour for the icon and the text, and the text will appear dimmer.
Here the star and the text have same colour but the text might appear a littel greyish sometimes. the best way to correct this is to make the star greyish while keeping the text black, It will give the illusion of balancing the colour and contrast.