Sunday, July 6, 2014

Inspecting Yosemite’s Icons

Nick Keppol:

The shapes and sizes of the icons have been adjusted to provide a better visual rhythm on screen. I have not seen it published anywhere, but there appears to be a grid system that helps achieve this consistency.


There are three basic shapes utilized for application icons across the system. A circle, a square, and a tilted rectangle. Of course, Apple is consistently inconsistent and deviates from this system in a few places, but they are clearly outliers.


The old tilted rectangle icons, like the one on the left, are fully placed in 3D space, with natural perspective. They have a vanishing point on all axis. Put another way, if you drew a rectangle, and rotated it -11°, you would still have to skew it in perspective to match the shape.

The Yosemite icons appear orthographic at first, but with depth. They are a straight-on view of an object, with no perspective on the axis facing “the camera”. If you take a rectangle and rotate it -9°, you don’t have to skew anything, other than false 3D depth. (e.g., add the pages of the book, a drop shadow, an edge, etc.) They are much simpler in look, and easier for artists to draw.


Grey scale is out — warm and cool tones are in. It’s been a popular look in Hollywood blockbusters: yellow/orange highlights, blue/teal shadows. The new Yosemite icons use similar tonal shifts with their metal materials. If we consider these icons as materials, this tone represents an environment reflection — not merely a color effect.

Comments RSS · Twitter

Leave a Comment