 đ§”đ Letâs talk about optical centering and visual balance in UI design. This post has been making the rounds about iOS 18âs flashlight Live Activity, and itâs probably time we have The Talk. About precision vs perception in interface design, that is. 19 comments
Optical centering (or optical alignment) is the practice of adjusting elements to appear centered or balanced to the human eye, even if theyâre not mathematically precise. This technique has been used in art and architecture for millennia, well before iOS 18. (The designer is breaking out Greek architecture diagrams, weâre getting serious.) Consider the Parthenon in Athens. Its columns arenât perfectly straight â they have a slight curve. This subtle adjustment, known as entasis (from Greek, âto stretch tightâ), creates the illusion of perfectly straight lines when viewed from a distance. Even 2,500 years ago, our ancestors had to sigh and metaphorically detach an instance since mathematical precision doesnât always translate to visual harmony. Fast forward to today and we see these principles everywhere: iconography, logos, typesetting. The Google âGâ logo, for instance, isnât geometrically perfect. Its designers adjusted it away from a perfect circle to appear balanced. If you contort the logo to undo these adjustments, it just looks weird. As does the play button when mathematically centered, or a leading-aligned paragraph when you align the glyphs by their actual shape. Apple has a long history of prioritizing visual perception over mathematical precision in their interfaces. Even as far back as the 90s, Appleâs font rendering methodology has been âmake this text look as similar as possible to a printed page at the cost of some blurriness.â Meanwhile, Microsoftâs has been âcram the glyph into the nearest pixel at the cost of staying true to the fontâs design,â which caused type to look thinner than it actually would appear when printed. But letâs bring it back to iOS and the post that set off this discourse. The flashlight icon is just the tip of the iceberg. We would like to call a surprise witness to the stand: a reverse-engineered iMessage group chat avatar layout. Itâs a really beautiful piece of design â it mimics nature with either this planet solar system layout or a snow globeâstyle layout in your conversation list. Our designer @samhenrigold was curious about how this view was created and investigated. You might think, like he did, that this is the result of some clever algorithm. Some design system with tokens for this, maybe something crazy like a circle packing algorithm. Sam went on a wild goose chase, ripping open framework binaries to see where this layout was happening. It turns out, itâs not even remotely that deep. On your Mac, right now, go look at this file: /System/Library/PrivateFrameworks/ContactsUICore.framework/Versions/A/Resources/CNUIIdentityAvatarConfiguration.json Thatâs it. Thatâs the genius algorithm. Itâs a JSON file that precisely defines the size and position of these avatars. This probably isnât generated programmatically â itâs likely a designer somewhere at Apple, meticulously moving circles around on a canvas, nudging them pixel by pixel until they strike the right visual balance. The file is filled with truly hideous numbers that have no place in a design system â 23.5, 7.5, -6 â but it all works. We even wrote a test app that parses this JSON file, just so we could confirm our suspicions. These micro-adjustments are part of what makes great design. And they require an understanding of how our brains perceive visual information. Itâs not something you can automate, write a test for, or cram into a design system. Design systems are conceptually against a token like `PlayButtonIconOffset` or `AvatarTopLeftScaleMultiplier` or `OnboardingCompleteCheckmarkDrawAnimationSpringDamping`. Sometimes you just need to go off-roading. The tools will always change. The medium will always change. But these foundations are constants. Your Figma skills probably wonât be relevant in 20 years, just as your Dreamweaver skills probably arenât paying off in spades right now. But knowing when to break from the grid and nudge things around is a forever skill.  @lickability This doesn't explain the theory of why the flashlight looks good when off center in this almost perfectly symmetrical layout. Is it because of the sun icon on the right? @eb @lickability yeah, Iâm not sure it strikes me as scientific or mathematical that âa designer somewhere at Apple, meticulously moving circles around on a canvas, nudging them pixel by pixel until they strike the right visual balanceâ So, thatâs just like⊠some designerâs opinion, then. I do think there is something to this idea of âthings can look better when not pursuing exact symmetryâ, but itâs not super objective what the ârightâ design is. Or there are multiple answers for diff people  @frstua Yes! This is Berkley Mono: https://berkeleygraphics.com/typefaces/berkeley-mono/ @lickability Call me crazy but I actually like the Google logo better without the optical adjustments. It's always bothered me how little optical weight the yellow has and how it isn't balanced with the rest. |
Gregory's Server
Some users have pointed out that the flashlight icon in the Live Activity isnât mathematically centered. At first glance, this might seem like an oversight. But this is a deliberate choice, rooted in centuries-old design principles.