How to create visual balance: correct size + visual alignment + perfect rounded corner decoration.
Our eyes are strange and often mislead us. But if you know the particularity of human vision, you can build a better design.
In the 1920s, Gestalt’s visual perception theory was developed. It explains how our eyes process different images and how our brain interprets them. You may have heard of topics such as the principle of closeness or the rule of common destiny. This article cites some views of Gestalt theory, focusing on practical aspects rather than academic issues. At the bottom there is a list of related recommendations on this topic, you can browse if you are interested.
Which of the 400 px square and the 400 px circle is larger? From a geometric point of view, their width and height are equal. But looking at the picture below, our eyes immediately found that the square is larger than the circle.
The following picture is labeled:
Let us look at a square and circle diagram again. Are they the same in terms of visual weight?
It is at least difficult to immediately indicate which one is heavier, not surprising, because I increased the diameter of the circle.
I overlapped the shapes in the first and second examples. On the left, the area of a 400 px square is larger than the area of a 400 px circle. This is why we see it bigger visually. On the right, circles and squares are balanced, basically their areas are similar, but their width and height are different.
We can see that diamonds and triangles have the same effect. In order to maintain visual balance with squares, they should be wider and taller so that their areas are similar. The area-based method is very suitable for the simplest shape.
How to use it in icon?
When you create a set of icons, it is important to keep them balanced so that the icons do not appear too prominent or too small. If we put the icon directly in the square, then the more square-like icons look bigger.
I recommend compensating for the weight of icons of different shapes, allowing visually smaller icons to hang outside the square, and leaving some distance between the visually heavier icons and the square.
The following is a set of modified icons:
Now I understand why an icon area is always larger than the icon body, just to make non-square icons fit it and look no smaller than square icons.
The simplest test to check visual balance is fuzzy design. If your icons become similar spots, they have the same visual weight.
For example, the icons of Facebook and Instagram are square, while the icon of Twitter is the outline of a bird, and Pinterest is a surrounding “P”. This is why the icons for Twitter and Pinterest are larger so that they are balanced with the Facebook and Instagram icons.
Another example of visual balance is to put a text box and a round button together. If the diameter of the button is equal to the height of the text box, the button will appear smaller. When you zoom it in a little, the entire structure becomes more balanced.
But if you change the style of the button, you don’t need to zoom in. In the image below, the height of the button and text box is 80 px, but the button on the right does not look visually weak because it is black.
Tips:
- Visual weight is the way the human eye perceives the size and importance of an object, and it is not necessarily equal to its pixel size or area.
- Circles, diamonds, triangles, and other non-square shapes require higher and wider sizes to maintain visual balance with square icons.
- There should be some space in the icon area for visual balance. This is crucial for a set of icons, and they should ensure that they look consistent.
Visual alignment is a continuation of the theme of visual balance. Look at the picture below: Do they look the same length?
In px, the answer is yes. However, at first glance, the first one is longer than the second one.
Looking at the picture below, is there any change?
I applied visual compensation to the second rectangle. Allowing the peak to exceed 20 px of the length of the rectangle above is to compensate for the gap between the peaks and make the two shapes visually equal.
There are also some examples of special graphics:
Therefore, if you design a poster with folded stripes and text, or the corner design of the product image, please pay attention to making them achieve visual balance. The sharp edges should extend beyond the rest of the shape.
How to align text and paragraphs with background? This depends on the visual density of the background. If it is light, you can align the highlighted paragraph with the rest of the text.
Because of the light background, normal text flow is not interrupted.
For dark backgrounds, different methods can be used. On the picture, the black background is aligned with the rest of the text, and the white text in it is placed indented.
Unlike the light background, the black background has a large visual weight. If the goal is to seamlessly browse the paragraph, it is best to align it as shown below.
The same principle applies to buttons and input fields. Of course, this is just a design based on human visual perception.
The light background of the input field on the left can exceed the input label and input text. The “Send” button is aligned to the right of the input background because the button is dark and visually heavy.
On the right, the input has a solid border, and when the user enters a dent in the box, I align it with the label. The side of the “Send” button is triangular. The button moves a bit to the right and looks balanced with the rectangular input field above.
Here, we discuss another alignment problem: the alignment of text and icon buttons. In the picture below, does the text look centered?
The secret is that the right is a triangle, so I moved the text a bit to the left on the button on the right. In addition, the width of the arrow button is 40 pixels, and it looks visually equal to the rectangular button.
The text button has not only horizontal alignment, but also vertical alignment of text and background. The first method I want to talk about is used in various operating systems, sites and apps. It is based on the height (ie upper limit) alignment of the capital letters of the font, which is equal to the height of “H” or “I”.
Basically, the space above and below the capital letters is equal to the edge of the button. This makes sense, because the operation buttons are usually written in capital letters, and the English letters are more in ascending order, with the upper extension (l, t, d, b, k, h) than the lower extension (y, j, g, p) more.
Another method is to use the height of the lowercase letters of the font (so-called x-height) to align the text and the background. In the sans and sans serif fonts, it is equal to the height of the letter “x”.
Since the main visual weight of the text is concentrated in the area of lowercase letters, this method is also feasible.
Is there any difference between these methods? There is a difference, but the difference is not big.
For “Cancel” and “OK” (common buttons), the upper limit height method represented by the left column is definitely better, because “Cancel” has no droop (y, j, g, p), and “OK” are all capital letters .
The x-height method shown in the right column is only better for the “Sync” button, and the name of the button has elements that highlight up and down; the words “Cancel” and “OK” seem to be too high.
The icon button is slightly different from the text button. Let’s put a “send” icon on the circular background. Which one looks more balanced?
Hope you have noticed the problem on the left. The reason for this is that the alignment method is different. The first option treats the icon as a rectangle, which is correct to some extent, because when you give the SVG or PNG file to the developer, it is a rectangle. The position of the icon is displayed on the right so that all sharp edges are equidistant from the background of the round button.
If you are outputting files for development, you need to reserve some areas so that they can properly center the icons on the background.
The same is true for the “Play” button. If you directly align these shapes (rounded rectangle and triangle), they will look strange.
If you want to make the triangle’s visual position better, it is better to surround it and align it with the button background.
Tips:
- Shapes with sharp edges should be larger or longer to maintain balance with adjacent rectangular objects.
- Cap height alignment is an effective way to position button text on the button background.
- An effective way to correctly place the triangle icon on the button is to surround it and align it with the background.
Is there anything more round than round?
I used to think no, but as I said at the beginning of this article, our eyes are strange and sometimes deceive us. So, which circle looks smoothest in the picture below?
The person I asked before struggled between No. 3 and No. 4. No. 1 and No. 2 are absolutely too thin, No. 5 is too full. If we overlap the third and fourth variants (a geometric circle and a modified circle), we will find that the latter is heavier than the first.
To illustrate what I mean, I selected the letter “o” from three famous geometric fonts, Futura, Circe and Geometria. Given that high-quality fonts are built based on human visual perception and use a complex visual construction system, I think their circles look rounder than geometric shapes.
Let’s overlap them with geometric circles. Even the most geometric Futura “o” has four prominent parts. In addition, the letters of Circe and Geometria are wider than the circle, but even if their height and width are equal, we can see that these four “belly” seem to be smaller.
Therefore, from a visual point of view, the modified circle (on the right) looks more “round” than the geometric circle (on the left).
How do we use this phenomenon? Of course, fillet processing is required. If you directly modify the rounded corners in the graphics editor, the effect is not good.
The human eye immediately finds the point where the straight line suddenly becomes a curve, and this process does not look natural.
Considering our visual perception, I modified this rounded corner.
This embedding has an extra area beyond the geometric circle, making the point where the line and curve intersect less obvious.
Just try to feel the difference between these embedding methods.
Now, we can apply this method to round buttons.
You may have noticed that the buttons on the right have smoother rounded corners and your eyes are more comfortable.
Like the APP icon, people do n’t just use standard rounded integers to achieve the desired effect. Before delving into this issue, let’s take a look at the differences in the following graphics:
The first one is the rounded rectangle I created in Sketch. The second shape is a super ellipse, also known as Lamé curve. It was discovered by Gabriel Lamé, a French mathematician. Depending on the formula, it may range from a four-point star to actually look like a rounded square.
Marc Edwards proposed the formula for the Lamé curve, which produced a smooth and visually perfect shape. The icons from iOS 7 are based on this design.
Later, this shape was modified by adding a golden ratio and a grid to guide the designer of the new icon.
The main benefit of using shapes such as super ellipse is its smooth appearance. On the other hand, these non-standard shapes are difficult to get into real projects. You should combine multiple SVGs, include special formulas or scripts in your code, or use PNG masks as Apple does for its application icons.
As for the design process itself, there is a simple rounded corner repair method. You need to adjust the appropriate number of round angles.
The difference in sharp corner rounding is more obvious, which is very important for drawing road or traffic design.
Tips:
- The geometric rounded corners look fake, because you can easily see the point where the straight line suddenly turns into a curve.
- Visually correct fillets require special formulas or manual shape adjustments.
Sometimes, non-geometric squares look more like squares. You might be thinking, “What nonsense is this?” So, look at the square below? Which shape looks more square?
If you choose the shape on the left, you can feel the point of visual difference.
