Mathematical and Optically alignment in (visual/UI) design

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 (this is what you know);
  • 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! 🧘‍♂️

Get UI & Product Engineering Insights for Rails Apps (and product updates!)

Published at . Have suggestions or improvements on this content? Do reach out.

UI components for Ruby on Rails apps

$ 129 one-time
payment

Get Access
  • One-time Payment

  • Access to the Entire Library

  • Built for Ruby on Rails (inc. Rails 8)

  • Designed with Tailwind CSS and Enhanced with Hotwire

  • Updates for 12 months