How to make optically balanced icons, correct shapes alignment, and perfect corner rounding. An illustrated guide.

Our eyes are weird organs that often tell lies to us. But if you know the peculiarities of human vision, you can construct more approachable and clean designs. Not only do type designers utilize optical tricks for creating readable and well-balanced fonts, but it’s also helpful for interface designers, who build user-computer interaction.

In the 1920s the Gestalt theory of visual perception was developed. It explains how our eyes process different images and how our brain interprets them. You might have already heard about such things as the principle of proximity or the common fate rule. This article refers to some points of the Gestalt theory and highlights practical aspects rather than scientific research. There is a list of recommended materials on the topic at the bottom.

1. Measured and optical size

What is bigger: a 400-pixel square or a 400-pixel circle? Geometrically speaking, their width and height are equal. But look at the picture below. Our eyes immediately detect that the square outweighs the circle.

1*-i9M1D3PQv8VdZ9BgL90Kg Optical Effects in User Interfaces (for True Nerds)

Here is the version with guides.

1*K9lli2x2d8ppZq9W01qQxQ Optical Effects in User Interfaces (for True Nerds)

Let’s take a look at one more picture with a square and a circle. In terms of visual weight, are they equal to you?

1*QbXi4zY8d9dtImVLkXRE-A Optical Effects in User Interfaces (for True Nerds)

At least it’s hard to tell immediately, which one outweighs the other. Not surprising because I increased the diameter of the circle.

1*jEd-gjk9_QzE45kqanNajw Optical Effects in User Interfaces (for True Nerds)

I overlapped the shapes from the first and the second examples. On the left, the 400-pixel square has bigger area than the 400-pixel circle. That’s why we see it visually larger. On the right, the circle and the square are balanced. Basically, they have similar area while their width and height are different.

1*-uFi1AWhuMJDIBTfYDJ-EQ Optical Effects in User Interfaces (for True Nerds)

We can witness the same effect with diamonds or triangles. To be balanced visually with squares, they should be wider and higher, so that their areas are similar. Area-based approach works perfect with the simplest shapes.

1*RgEaVpVGzB25_4F3wd9L3Q Optical Effects in User Interfaces (for True Nerds)

How can one use this feature in interfaces? For instance, when you are creating a set of icons, it’s important to make them all well-balanced, so that no icon stands out too much or looks too tiny. If we directly inscribe icons into square areas, the more square-like icons will look larger.

1*VOd4eb8KjjedTnTrFP4sNg Optical Effects in User Interfaces (for True Nerds)

I recommend compensating the weight of differently shaped icons by allowing visually smaller icons to hang beyond the icon area and by leaving some space between visually heavier icons and the icon area.

1*22Spx2h--2vgTgIqDNztGg Optical Effects in User Interfaces (for True Nerds)

And now some real icons balanced optically.

1*De2uAURrccii873t67h29Q Optical Effects in User Interfaces (for True Nerds)

Now it’s clear why an icon area is always larger than an icon body — just to allow non-square icons fit it and look not smaller than square icons.

1*VXd29KPA05t2zxscxaPjAA Optical Effects in User Interfaces (for True Nerds)

The easiest test to check visual balance is blurring the items. If your icons turn into more or less similar blobs, they have the same optical weight.

1*GqaKW_wkhypWHpDV6LkZVw Optical Effects in User Interfaces (for True Nerds)

But sometimes we work with already existing graphics, for instance, social network logos used as sharing and liking buttons. Facebook and Instagram icons are square, whereas Twitter is represented by a bird silhouette and Pinterest by an encircled “P”. That’s why Twitter and Pinterest icons are a bit larger, so that they look balanced with Facebook and Instagram icons.

1*Y0BpSw3mE8uMXyr7LmxTaA Optical Effects in User Interfaces (for True Nerds)

Another example of an optical balance issue is a textbox placed together with a round button. If the button diameter equals the textbox height, the button will seem smaller to our eyes. When you enlarge it a little bit, the whole construction will become better balanced.

1*kq4ppaNnq9tW36AlGP6wNg Optical Effects in User Interfaces (for True Nerds)

But if you change the style of the button, enlargement won’t be needed. On the picture below, the button and the textbox are 80 pixels high, but the button on the right doesn’t look “lost” owing to the strong black fill.

1*IHSlWzeXTNtY8FGhJjAxDw Optical Effects in User Interfaces (for True Nerds)

Things to remember

  • Optical weight is how human eyes perceive the size and significance of an object, and it doesn’t necessarily equal its pixel size or area.
  • Circles, diamonds, triangles, and other non-square shapes need to be higher and wider to be optically balanced with squarish shapes.
  • Areas for icons should have some space reserved for optical balancing. It’s crucial for sets of icons, which should look consistently.

2. Alignment of different shapes

Optical alignment is a logical continuation of the optical balance topic. Take a look at the stripes below. Do they look as if they are of the same length?

1*wqEUJRbeJ6R422HANH3oYw Optical Effects in User Interfaces (for True Nerds)

Pixelwise, the answer is a firm “yes”. However, at first sight, the lower stripe looks shorter than the upper one.

1*Jcya0DfkZUzGq3Tp1DnOHg Optical Effects in User Interfaces (for True Nerds)

One more picture of the two stripes. Has anything changed?

1*Yf906TjmOfLCppME_UNXRg Optical Effects in User Interfaces (for True Nerds)

I applied optical compensation for the lower stripe. Allowing the spikes to go 20 pixels beyond the length of the upper stripe is the way to compensate a gap between the spikes and make both shapes optically equal.

1*qWXxP6fBR0-7nkcgg_KVMQ Optical Effects in User Interfaces (for True Nerds)

And now some more sophisticated examples of differently shaped stripes.

1*LxQJgwZcMTp317XK-6cNiA Optical Effects in User Interfaces (for True Nerds)

So, if you are creating a poster with folded stripes and text on them or you are putting a bright “discount” stripe on a product card of an online store, mind making them optically balanced. Sharp edges should go a bit beyond the rest of the shape, especially if it’s a rectangle.

1*vhsSyKFaVV3q_wVlzf-veA Optical Effects in User Interfaces (for True Nerds)

And what about aligning plain text and paragraphs that have a background? It depends on the visual density of the background. If it’s light, you can align the highlighted paragraph with the rest of text.

1*G90UWE4BH0iNZn_fAWta6A Optical Effects in User Interfaces (for True Nerds)

Since the background is light, it doesn’t interrupt the usual text flow.

1*3HXlXRU7QliVo-Gna_1qPA Optical Effects in User Interfaces (for True Nerds)

A different approach can be utilized for a dense background. On the picture, the black background is aligned with the rest of text while the white text inside of it is placed with indents.

1*ELl2XDZuzcbLOtGORFNXLA Optical Effects in User Interfaces (for True Nerds)

Unlike the case with the light background, the black one has substantial optical weight, and if the goal is to insert a paragraph seamlessly, it’s better to align it the way shown below.

1*d8Xj59bFuVZcRqt9xiejAg Optical Effects in User Interfaces (for True Nerds)

The same principle will work with buttons and input fields. Of course, it’s not a dogma, just a recommendation based on human visual perception.

1*8jlCea9bbun_oxChYwfmjw Optical Effects in User Interfaces (for True Nerds)

The light background of input fields on the left can go beyond input labels and user’s input. The right edge of “Send” button is not fully aligned with the right edge of input backgrounds since the button is darker and looks heavier from visual perspective.

On the right, inputs have solid borders, and I aligned them with the labels while user’s input has indents inside of the boxes. “Send” button has a triangular side. The button is moved a bit rightwards to look balanced with the rectangular input fields above.

1*dEThvTbug7H6ZFdkxovawg Optical Effects in User Interfaces (for True Nerds)

And here we are approaching to one more aspect of alignment — the alignment of text and icon buttons. Look at the buttons below. The text looks centered, doesn’t it?

1*xKpPKfKGOw48-tM1a6f3GQ Optical Effects in User Interfaces (for True Nerds)

The trick is that on the right button I moved the word a bit to the left, since the right edge is triangular. Moreover, the arrow-like button is 40 pixels wider to look optically equal to the rectangular one.

1*DShkue4KHkTDD264D4x2gA Optical Effects in User Interfaces (for True Nerds)

Not only do text buttons have horizontal alignment, but also they have vertical alignment of a word and a background. The first approach I’d like to tell about is used in the interfaces of various operating systems, sites, and applications. It’s the alignment based on the height of an uppercase letter of a font (so-called cap height). It equals the height of either “H” or “I”.

1*0cTR79OystMvKYa3LMUCyA Optical Effects in User Interfaces (for True Nerds)

Basically, the space above and below an uppercase letter and the edge of a button is equal. It makes sense because command names usually are written in title case and English letters have more ascenders, upper sticking out parts (l, t, d, b, k, h), than descenders, lower hanging parts (y, j, g, p).

1*WSUQcCzv6CKW9P28KQ4OmQ Optical Effects in User Interfaces (for True Nerds)

Another approach is to align a name and a background using the height of a lowercase letter of a font (so-called x-height). In sans and sans serif interface fonts, it equals the height of — not surprisingly—the letter “x”.

1*s2fXlTCYa38hqzWl4JFMdQ Optical Effects in User Interfaces (for True Nerds)

This approach also makes sense because the main optical weight of a text is concentrated in the area where lowercase letters are placed.

1*piiXDFmZnQAJ1E2xBmvVxg Optical Effects in User Interfaces (for True Nerds)

Is there any difference between these approaches? Yep, there is a difference. And it’s not that big.

1*kD9eFSQhUSkfXzwpOAI6dQ Optical Effects in User Interfaces (for True Nerds)

More examples for comparison below. The cap-height approach represented by the left column is definitely better for “Cancel” and “OK” — so widely used buttons — because “Cancel” has no descenders and “OK” is all capitals. The x-height approach shown in the right column is better only for “Sync” button, the name of which has both an upper and a lower sticking out elements; “Cancel” and “OK” words seem to be placed too high.

1*1RIH5dip9oVZZmXDcVZLnw Optical Effects in User Interfaces (for True Nerds)

The situation with icon buttons is slightly different from text buttons. Let’s put a popular “Send” icon on a round button background. Which variant looks more visually balanced?

1*d16PO8XQmAxiKGMxKr48Rg Optical Effects in User Interfaces (for True Nerds)

Hope you’ve noticed that something is wrong with the left one. It happens because of different alignment methods. The first option treats the icon if it was a rectangle. To a certain extent that’s right because when you send an SVG or PNG file to a developer it’s a rectangular sheet with a paper plane art on it. The right variant shows the icon placed the way all its sharp edges have equal distance to the circular button background.

1*BNUWnnpf028XSrCn0HVUZQ Optical Effects in User Interfaces (for True Nerds)

If you prepare a file for a developer, you need to reserve some area, so that they can center the icon on the background optically right.

1*t2OZ25kbulFWEIDwRAKb8Q Optical Effects in User Interfaces (for True Nerds)

The same story with “Play” buttons. If you directly align these shapes — a rounded rectangle and a triangle — they’ll look odd.

1*3VebDJ3XSt3g3syHYru3FQ Optical Effects in User Interfaces (for True Nerds)

If you want to position the triangle optically better, encircle it and align this circle with the button background.

1*4-BmxRt0863x9Xj9aM9dZg Optical Effects in User Interfaces (for True Nerds)

Things to remember

  • Shapes with sharp edges should be larger or longer to look balanced with the neighboring rectangular objects.
  • Cap-height alignment is an effective method of positioning button names on button backgrounds.
  • One of the effective ways to correctly position a triangular icon on a button is to encircle it and align the circle with the background.

3. Optical corner rounding

What can be more circular than a circle? I used to think that nothing, but as I said at the beginning of this article, our eyes are weird and sometimes perceive things not as we expect. So, which circle on the picture below looks the most smoothly circular?

1*jEaZ4w6cS-qn6zD6kPBpCw Optical Effects in User Interfaces (for True Nerds)

People who I asked before were choosing between numbers 3 and 4. Numbers 1 and 2 are definitely too skinny, 5 is too plump. If we overlap the third and the fourth variants — a geometric circle and a modified circle — we’ll find out that the latter is a trifle heavier than the first one and, consequently, more smooth to our eyes.

1*8NIzsqNDbY27Lam-xYhmRg Optical Effects in User Interfaces (for True Nerds)

To show what I mean I took letters “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 sophisticated system of optical construction, I suppose their circular shapes look more circular than geometric ones. Aren’t these letters pleasant to your eyes?

1*QZUFJZRkyIKJnPwkmZbFnw Optical Effects in User Interfaces (for True Nerds)

Let’s overlap them with geometric circles. Even the most geometric Futura’s “o” has four sticking out parts. Circe’s and Geometria’s letters are, in addition, wider than circles, but even if they had equal height and width, we could see these four “bellies” as if they were hungry and overate.

1*V6bakgkfmDt2UW2Mvd4B7Q Optical Effects in User Interfaces (for True Nerds)

So, optically speaking, a modified circle (on the right) can look even more “circular” than a geometric one (on the left).

1*TkhHuHcImK9SAV-39pVTyg Optical Effects in User Interfaces (for True Nerds)

How can we use this phenomenon? For corner rounding, of course! If you utilize the embedded rounding feature in popular graphics editors, the result will be not optically good.

1*patYGPMBCMqnwy3-bZLtpg Optical Effects in User Interfaces (for True Nerds)

Human eyes immediately detect the point where a straight line suddenly turns into a curve. And this rounding doesn’t look natural.

1*dc64gGre0lrbWKallkxaWw Optical Effects in User Interfaces (for True Nerds)

I fixed this issue taking into account our visual perception.

1*ptIGmOKJeH1V1dp3KPPSAg Optical Effects in User Interfaces (for True Nerds)

This kind of rounding has an extra area beyond the geometric circle making the point where a line meets a curve unnoticeable.

1*v_fZO7qWzMLnKS5f9SL06g Optical Effects in User Interfaces (for True Nerds)

Just try to feel the difference between these rounding methods.

1*bFaaZmavgofz-vZu6sS1iQ Optical Effects in User Interfaces (for True Nerds)

Now we can apply this approach to rounded buttons.

1*3vEVlCdUZt0va-cEj6tFUQ Optical Effects in User Interfaces (for True Nerds)

You might have noticed that the buttons on the right have more smooth corner rounding and it is more pleasant to your eyes.

The same story with app icons. One doesn’t simply use standard corner rounding to reach a perfect result. But before we dive into this topic let’s take a look at two differently rounded shapes.

1*5CUexQZMRt3WKSJpzsHhhw Optical Effects in User Interfaces (for True Nerds)

The first one is a rounded rectangle, which I created in Sketch. The second shape is a superellipse, also known as Lamé curve. It was discovered by a French mathematician Gabriel Lamé and depending on the formula can vary from something like a four-pointed star to the shape looking practically as a rounded square.

1*4QrOqudZH4pBK9s1jRwVTg Optical Effects in User Interfaces (for True Nerds)

Marc Edwards proposed the formula of Lamé curve that resulted a smooth and optically perfect shape. Icons starting from iOS 7 are based on it.

1*NfpeF_BTX2YF9ygaMPU3Eg Optical Effects in User Interfaces (for True Nerds)

Later this shape was modified by adding golden ratio proportions and a grid for guiding the designers of new icons but that’s a different story.

1*dudWpQgt_hZ5pzHvBv2AmQ Optical Effects in User Interfaces (for True Nerds)

The main benefit of using shapes like superellipse is their smooth appearance. On the other hand, these non-standard shapes are difficult to insert into a real interface. One should either combine multiple SVGs, include special formulas or scripts into the code or use PNG masks like Apple does for its app icons.

As for design process itself, there is a simple fix for rounded corners. You need to convert revertible rounding effects into an outline, enter the shape editing mode and manually move curve handles closer to each other.

1*qB0McGHxQtdBcA2nd8oANA Optical Effects in User Interfaces (for True Nerds)

The difference is even more vivid with acute angle rounding, which is important for drawing road or metro schemes.

1*731OHA-BDbceaecLsSyucw Optical Effects in User Interfaces (for True Nerds)

Things to remember

  • Geometrically rounded corners look artificial because you can easily see the points where a straight line suddenly turns into a curve.
  • Optically correct corner rounding needs special formulas or manual adjustment of a shape.

Bonus

Sometimes a not ideally geometrical square looks more squarish. You might think, “What a ridiculous nonsense?” So, what do you think about the squares below? Which shape looks more squarish?

1*cF6RS2zDTjjg2_MX4MAggg Optical Effects in User Interfaces (for True Nerds)

If you’ve chosen the left shape, you’ve managed to hear the voice of your unbiased visual perception.

1*YxaFxdv4GfJy6sEG_c0kQA Optical Effects in User Interfaces (for True Nerds)

I personally was surprised when learned that our eyes are more sensitive to the height of an object than to its width. It explains why even in geometric fonts, letters “o” are always wider than geometric circles, and the vertical stems of letters “H” are always thicker than the horizontal ones.

Recommended reading

This essay provides a limited understanding of the topic, so I encourage you to keep on exploring it. Here is a list of articles and books about the origins of Gestalt psychology and its initial ideas.