How has the icon design of the new Mac OS "Yosemite" changed?

"OS X Yosemite" to be the latest Mac OS on WWDC 14 held on June 3, 2014 was announced. Following iOS 7 where the visual update was done, Yosemite will also enhance visual aspects such as a frosty glassy texture interface, new system fonts and icons. It has been verified how such modified Yosemite icons have changed.

Inspecting Yosemite's Icons
http://martiancraft.com/blog/2014/07/inspecting-yosemite-icons/

The icon design of OS X before Yosemite was a combination of the features of traditional guidelines and Human Interface Guidelines (HIG), but Yosemite's system will consistently change to icon design that follows HIG. The Finder · setting icon becomes more beautiful and the Safari icon seems to be improved more than the iOS version, while the computer · Game Center · FaceTime seems to be failing at first glance. Attempting to understand the visual language of the new Yosemite's system by paying attention to the detailed change of such an icon over timeMartianCraftI am trying.

◆ Dock icon
The image below is on the top rowOS X Mavericks· A comparison of Yosemite's new dock icons arranged side by side. The 3D dock has changed to 2D, and icons are newly refreshed and fine tuned, but all have been changed.


◆ Icon shape and grid
In the Beta version of the icon, there are three types of bases: "circle", "square" and "slanted rectangle".


When matching these icon bases with a size of 1024 x 1024 on the grid (grid) used in the iOS 7 icon, it matched perfectly.


When I put in the icon art, it looks something like this, it is slightly shrunk so that the line of the grid can be seen. The iBooks icon is drawn exactly along the grid, and the gears in the middle of the system configuration are nearly perfectly matched, but if you look closely you can see that the width of the grid is a bit narrow. The pen placed above the text edit is also arranged along the double circle in the middle.


Since the previous icons were arranged specifically for 3D design, distortion was caused by perspective when rotating the axis, Yosemite icon does not need "depth" of 3D design, so it remains as it is Just minus 9 degrees to complete it.


Below is a sample adapting the iOS 7 grid form to the Yosemite icon.


◆ Classification system in the form of icon
"Maru" is Safari · iBooks · Launchpad · App Store · Time Machine · Music.


"Squares" are used for Finder · System Environment Setting · Activity Monitor · Mission Control, and the screen sharing icon is inclined minus 9 degrees though it is along the grid.


"Tilted rectangle" is the most used base among all icons such as memo · text edit · calculator · address book · dictionary.


◆ Light effect and material
Yosemite icon is a material with metal texture,Gray ScaleWas canceled. In the Hollywood work, the part where light hits is warm color like yellow · orange, the part of shadow is blue ·Duck feather colorI often use cold tones such as Yosemite uses similar effects.


Below is a comparison of icon with light effect and simple gray · scale icon. The Yosemite icons are cold lights from the top and warm colors from the bottom.



The Yosemite icon employs a flat design icon, but you can see how to reflect light by looking at the following two spheres. The white sphere on the left is not a material that reflects the surroundings like the right sphere, but still a shadow is formed by receiving the surrounding light, so it is helpful to see how the actual shadow can be made in the flat design You can do it.