11

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?

9

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

  • 4
    This is definitely not the effect described in the question. – KRyan Mar 12 '15 at 1:00
  • Almost there ... not quite the right concept. – plainclothes Sep 9 '15 at 16:36
4
+25

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).

Pointillist image with zoomed in dots of color

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.

3

It is called Optical Alignment enter image description here 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!

  • Wow, awesome article. – Viziionary Sep 9 '15 at 15:36
  • @JonathanTodd right? I just read it the other day and saved it, figured someone would need it, and here we are haha – Stanley VM Sep 9 '15 at 15:44
  • 4
    Please quote pertinent parts of the article you link to to add to your answer. Link only answers are frowned upon due to link rot. – DA01 Sep 9 '15 at 15:57
  • 1
    Excellent article! I have been optically centering things with just my own eyeballs for years. I can't believe I was never taught (or figured out on my own) the circle trick. I second DA01's request that you add images/text from the post to your answer, great stuff. – Vicki Sep 10 '15 at 2:06
  • 1
    @joojaa I was too busy drawing all over my binder. ;) – Vicki Sep 10 '15 at 18:59
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.