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

Question

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:

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 1

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

Answer 2

Optical correction / compensation

In your case, you're speaking to optical centering, but your eyes can perform more adjustments than that, if you let them. This is the complex process of weighting shape, texture, color, visual distortion, etc and compensating for it.

Similar to the concept of optical mixing pioneered by the pointillists of the 19th century, your brain looks at an aggregate of shapes and averages things out. As in pointillism, the effect changes based on the scale of the shapes in question. The viewer's visual resolution plays a big part, but it also has to do with perceptual weighting, where the brain simplifies things based on relative importance (sorry ... decades of reading, but no sources).

You'll find another form of compensating for perceived volume in Greco-Roman architecture.

The architects calculated for perspective, for the optical illusions that make edges of objects appear concave and for the fact that columns that are viewed against the sky look different from those adjacent that are viewed against a shadowed wall. Because of these factors, the architects adjusted the plans so that the major lines of any significant building are rarely straight.
via Wikipedia

Use your eyes

You're doing it the same way any other designer does. An algorithm could conceivably figure this out based on relative areas, scale, viewing distance, etc, but nothing gets it quite like the human eye.

Answer 3

It is called Optical Alignment Here is a great article that discusses the very issue: https://medium.com/@erqiudao/the-play-button-is-not-optical-alignment-4cea11bda175 Hope it helps!

Answer 4

The Optical Alignment answer is a great one, and I suspect it's what you are after, but when you mention "balance" in your question, I thought about Occult Balance (AKA, asymmetric balance).

Here's a link I found... http://www.revolutionarygardens.com/principles-of-design-balance-in-the-landscape/

I know the link is about landscape design, but I think the concept applies here.