DEV Community

Rails Designer
Rails Designer

Posted on • Originally published at railsdesigner.com

Mathematical and Optically alignment in (visual/UI) design

This articles was originally published on Rails Designer


Here is a quick design tip for you that will push you to the top 10% of developers!

When aligning elements there are two ways you can do it:

  • mathematical: centered based on measurements;
  • optical: adjusted slightly to appear centered to the human eye.

Most of the time mathematical centering will do just fine, but sometimes it will look off. That is when you have to place the element slightly off its true center. This is called optical, or visual, alignment. It is a fundamental principle in design to create more pleasing and balanced compositions.

Here is a typical example of a play-button in a rectangle. The one on the left is optically aligned, meaning I manually shifted it to the right. On the right is the mathematically aligned version.

Showing play icon on left optically aligned, and mathematical aligned on the right

Don't believe it? Let's measure!

Showing play icon on left optically aligned, and mathematical aligned on the right

That's a big shift, right? This happens because the play-icon has more “visual weight” on the left. So it needs to be shifted to the right. You should shift in the opposite direction of the visual weight.

This is one of those things that once you see it, you can see it everywhere. Let's add more balance to those designs of yours! 🧘‍♂️

Top comments (2)

Collapse
 
railsdesigner profile image
Rails Designer

Ever since the app Things 3 came out, their icon has been bugging me. Can you see it too? 😬
Image description

Collapse
 
efpage profile image
Eckehard

The problem is as old as typography and it is even worse if you have more than one letter. See this for more information.