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.
Don't believe it? Let's measure!
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)
Ever since the app Things 3 came out, their icon has been bugging me. Can you see it too? 😬
The problem is as old as typography and it is even worse if you have more than one letter. See this for more information.