
Optical Effects in User Interfaces - Ivoah
https://medium.muz.li/optical-effects-9fca82b4cd9a
======
vladdanilov
Good article in general but mixed with many fallacies.

1\. Size is obviously not height. It's the area of the shape. There are
complications though, e.g. negative space often adds weight. Blurring shapes
is a terrible idea here.

2\. Aligning shape edges is also an optimization problem to equalize
overshooting areas.

3\. Finding a visual center has nothing to do with the circumcircle in a
general case. It's a well-known centroid. But, again, there are lots of
complications.

4\. A circle is perfectly circular. There are other reasons for the "O"
adjustments in typography. It's even mentioned later on with no connection to
here.

5\. The round corners is another story. In this case G2 fillets are most
pleasing. It's hard to make this adjustment by hand, that is why the examples
look bad and unnatural. Squircle, Lamé curve, has nothing to do with the iOS
icon shape.

Most of these adjustments can be done with mathematical precision. The rest
can be approximated well enough with mathematical models. Ideally, design
tools should guide these adjustments. There is definitely interest. My most
successful plugin for Sketch happened to be the one for optical adjustments
[http://designplugins.com/optically](http://designplugins.com/optically).

~~~
ncr100
Re 3. the centroid seems wrong in the article (the one on the right is
supposedly 'good') [https://cdn-
images-1.medium.com/max/2000/1*3VebDJ3XSt3g3syHY...](https://cdn-
images-1.medium.com/max/2000/1*3VebDJ3XSt3g3syHYru3FQ.png) . Both look
uncomfortably off-center, too far to the left or right. There must be a better
way than 'draw a circle around it' (imagine with Portlandia voice.)

~~~
muglug
Yeah, having spent a bit of time in Photoshop, for _that particular problem_ I
think the solution is an average of shape centre-of-mass and bounding
rectangle centre.

------
crazygringo
Regarding optical size of icons... for _years_ I've wished that icons were
sized (in the dock, in Finder, etc.) to consistent maximum _area_ on top of
maximum height/width, so that applications with square icons wouldn't look
bigger than the circular or irregular ones. It would make everyone's dock look
_so_ much better.

For example, a 32 x 32 icon has 1,024 pixels. If we declared than any icon can
only use 2/3 of the available area, then square icons would be reduced to 26 x
26, circle icons to 29 x 29, and more irregular shapes like a printer or
magnifying glass would presumably get the full 32 x 32. It's trivial to sum up
and calculate from the amount of transparency, and would leave rows of icons
_so_ much more optically balanced.

(More advanced -- to deal with hollows, you can "shrink wrap"/"gift wrap" the
icon before calculating area.)

~~~
Lxr
Visual weight is not just about number of non-blank pixels. The author has a
few good examples of how strong colours add weight to otherwise identical
icons, and so dark icons look better being a bit smaller.

------
rawnlq
Fun fact, the google logo is not a circle:
[http://i.imgur.com/lBk99be.jpg](http://i.imgur.com/lBk99be.jpg)

~~~
lioeters
Although I'm not a designer, I'm a bit OCD about design/geometry - and I
imagine designers are even more so. Aside from the non-perfect circle, why
wouldn't they align the edges (left and right respectively) of the green and
red arcs! That is going to annoy me every time I see that logo now.. It really
ought to be reported as a bug/issue.

~~~
brianpan
Because the "center" of the G is not the optical center. Same reasons as
everything else in the original article. Take a look at the image at the top
of this page:
[https://en.wikipedia.org/wiki/Typeface_anatomy](https://en.wikipedia.org/wiki/Typeface_anatomy).
The crossbar of the E (and R) are higher than vertical middle. And they differ
from the x-height.

Despite your affinity for geometry, geometric fonts are the exception, not the
rule. And even geometric fonts often have tweaks that make them less "perfect"
geometrically but look more correct. [https://en.wikipedia.org/wiki/Sans-
serif#Geometric](https://en.wikipedia.org/wiki/Sans-serif#Geometric)

~~~
lioeters
I found some hints - straight from the source, Google's design team - to the
reasoning behind the "G" design, and why the alignment of colored arcs turned
out that way.

A short video that demonstrates the intention of the lines:
[https://g-design.storage.googleapis.com/production/v6/assets...](https://g-design.storage.googleapis.com/production/v6/assets/article/evolving-
the-google-identity/g-letter.mp4)

It came from this article, Evolving the Google Identity
([https://design.google/library/evolving-google-
identity/](https://design.google/library/evolving-google-identity/)) under
section "Google G Construction".

------
kaffeemitsahne
I like the optical effect where 1/4 of the article is obscured by two banners.

~~~
logicallee
Thanks for putting this to words. Now that you mention it, it is incredibly
annoying, though the content was really interesting. I looked for an 'x'
button on the banners more than once but then gave up and continued plowing
through.

What is interesting is that I didn't get anywhere near the thought of
commenting on this (or opening the chrome debugger or something to turn it off
manually). So it's interesting that such visual noise can be a low-level
annoyance without becoming a conscious thought. (Until your comment.)

Visual designers must be trained to notice what to people who aren't doing it
is just noise.

------
mjw1007
To me the circle in the diagram which is supposed to be "equal visual weight"
looks larger than the square, while the ones in the first example appear about
the same.

But if I zoom the page out to 50%, or look at it on my phone, then things do
work the way the author expects them to.

So I fear it may be difficult to correct for these effects as long as people
use different screens.

------
twiss
> What is bigger: a 400-pixel square or a 400-pixel circle? Geometrically
> speaking, their width and height are equal.

The area of a circle isn't width * height though, obviously. If you plug pi *
r^2 = 400^2 into WolframAlpha, you get a diameter of 2*r = 451.35 pixels, very
close to the 450 pixels the author came up with.

For the icons too, maybe you could just count the pixels (ask Photoshop the
amount of filled in pixels?) and make sure every icon has a similar amount.

------
Gravityloss
Things like weight, continuous first and second derivatives in other words.

------
dahart
Inscribing something in a circle isn't good enough. Use the image center of
mass to really balance icons. Are there any design tools that provide center
of mass?

Here's a minimal python/scipy script to measure the image centroid (of a b/w
image):

    
    
        from scipy import ndimage
    
        im = ndimage.imread(args.input)
        com = ndimage.measurements.center_of_mass(im)[:2]
        size = im.shape[:2]
    
        print("positive x is right, positive y is up")
        print("image centroid is offset from image center by x:{0:.1f} pixels by y:{1:.1f} pixels".format(com[1] - size[1]/2, -(com[0] - size[0]/2)))

------
corey_moncure
Is it safe to assume that pixels are perfectly square?

~~~
corysama
It's still possible to set non-square video modes on many PCs. But, it's
extremely rare for anyone to make that their default intentionally.

------
xaedes
s/weight/area/

------
cup-of-tea
This makes me think of optical margins which are used in some typesetting
software (like LaTeX with the microtype package). The thing is when it comes
to geometry for human consumption the only thing that matters is how it
_looks_. My Dad actually taught me this a long time before I knew about
typography. He told me that while a spirit level is an important tool, it's a
mistake to put a shelf up level if it doesn't _look_ level next to the
ceiling.

