Is there a name, term, or practice for off-centering things based on volume rather than by width and height?

As an interface designer, and just as a designer in general, I often notice that I feel the need to place things slightly off-center in order to make them appear centered and balanced, due to the items having uneven volume distribution.

Consider a play button which is placed in a box:

enter image description here

Months after asking this question I was developing video controls and realized this was the perfect example. This image is centered geometrically, but in my interface, I pushed the icon about 15% further to the right than its actual geometric center in order to center it based on volume because geometrically centered (as you can observe in the above image) doesn’t feel quite right.

I usually just guess at centering an icon volumetrically, but I bet the proper center could be determined mathematically, hence my curiosity as to the name, in case I might find a tool or plugin to help me do this with my design tools such as InDesign.

Off the top of my head I’d call it “Volumetric Centering”, but that’s just a guess. Is there an official name / term for this technique?

Answer

It’s called “Optical center”

Basically, the reader’s eye will start in the upper left and move towards the lower right, passing through the optical center (in a country that reads from right to left, reverse things)

That’s not the actual geometric center. Make 2 lines from corner to corner on a rectangle and the point where the lines meet, and that’s the geometric center. The optical center will be a bit above the geometric center.

What you do is what designers should do is balance your elements around the optical center not the geometric center.

Taken from this article

enter image description here

Attribution
Source : Link , Question Author : J.Todd , Answer Author : JohnB

Leave a Comment