Application icons in OS X Yosemite: a detailed overview

Last month, Apple presented new OS X Yosemite, which has received significant visual innovations behind iOS 7. Kupertinovtsy added in blur effects and translucency, we have made the interface more flat, updated the system font and icons.

New icons in the Dock - my favorite update to Yosemite. The first thing people want to discuss the appearance, but there are many comparisons icons Mavericks and Yosemite. Icons are neater, lost luster, but it became brighter and have retained some elements skeuomorph. I think, the Finder icon and the settings are beautiful, Safari icon looks better than iOS, and calculator icons, Game Center and FaceTime look terrible.

Fine. Let's move on.

In fact, for the new icons lies something more than just a new paint. Instead of criticizing them, I'm going to analyze in depth the icons and focus on small details. It spent a lot of time over the past few weeks. So, what I found?

dock

The shape and size of the icons has been adjusted to provide the best visual experience. It seems that this has been achieved through the use of the grid, but I'll get to that after a talk figures.

The figures and the grid

Apple designers copied the icons system to Yosemite. There are three basic shapes used to create icons: circle, square and rectangle inclined. Obviously, Apple deviates from this system in some places, but this is clearly not striking. To better understand these forms, I joined them with a grid of icons from iOS 7. I have not shifted the pieces, so they are in the right places.

I'm not surprised that the circle and the square clearly fit into the contours. Now let's look at the net together with this icon. For the sake of clarity I reduced the opacity of the icons.

Outlines iBooks icon and system settings almost perfectly aligned with the grid. A handle on the TextEdit icon located between the two communities, it can be argued that only with great reserve.

You may notice that the settings icon a little smaller mesh width. Apple does use two sizes for the square. and Finder settings are the same width, and the terminal and monitoring the system - other.

On the App Store icon letter "A" slightly beyond the established boundaries, with less severe form than in the book. Inclined rectangle deserves special attention, since it is the most common type of icons for third-party programs.

If you start to rotate the rectangle painted in the old version of the system, then you still have to distort it in the long term, to match the shape. In Yosemite false enough to add depth to the pages of a book or shadows. The icons in the new system easier for the user and for the artist. It's hard to describe, but the picture above helps illustrate the difference. For such icons is no need for 3D shelf.

Before WWDC 2014 there were many speculation on the theme of the icons in Yosemite. It was assumed that all of them will appear in the form of an ellipse or circle. Fortunately, it was not so. I think, Apple designers did a great job to create a single icon of style, leaving developers to create their own unique versions.

I adapted iOS 7 grid to create an updated grid to Yosemite:

hierarchy figures

It is easy to get carried away by the experiments, when the new visual style is introduced. Stop for a moment and remember what makes your application and to which category. After all, one figure may represent a category better than the other.

A circle

Perhaps the circle icons to be used for applications that are part of the basic software, or intended for entertainment. They are pleasant to look at, but it is doubtful whether such a program will be aimed at professionals.

Square

It seems that in the main square icons will be used for system utilities. The Finder, terminal, system configuration and system monitoring fit the styling. Some icons can actually be inclined, but they also use a square shape.

Inclined rectangle

These icons have always been the hallmark of OS X. Inclined rectangle will be the most used form of all mentioned. These icons are applications that help to perform any work. They have the greatest flexibility in drawing options, so they will better understand the purpose of the program with its unique appearance.

Lighting effects and materials

New icons Yosemite is not simply painted in specific colors. If we look at them more closely, it becomes clear that we see the reflection of the environment. For example, it can be clearly seen by looking at the metal handle, shown above.

Craig Federighi described the new shelf dock translucent material, when Apple introduced the Yosemite. Many thought it was a simple blur and transparency effects. However, it really looks as if created from real material while maintaining a flatter appearance. We can trace this idea in many icons. For example, the metal edges of the terminal have icons, system settings and monitoring system.

Pictured below 3D spheres arranged on a flat surface and reflecting the environment, will help better illustrate what I mean.

Scope of the left is not made of reflective material. However, you can still see the orange shade, shades of green, yellow and brown, reflected on the sphere. That is how they behave some "flat" objects in Yosemite.

The scope of the right is made of chromium, thus reflecting what is happening around like a mirror. This is similar to the image of metal objects in Yosemite. In the system, they appear to aluminum, having due to this more diffuse and subtle effect of reflection.

These are the subtle details in icons OS X Yosemite traced everywhere.

Your turn

Figure grid, lighting and the details are important, but it is important to remember that it is only guidelines. A good designer knows when to take a little break from the system. If you are a beginner in icon design, I recommend you to strictly follow the principles of these rules. Pay attention to the overall shape of the icon, think about the materials that are trying to portray.

Combining all icons with some figures makes sense. However, not all applications will be or must comply with this principle. Third-party icons are very easy to spot, so do not forget about the tilt angle, lighting and overall size. Now you can start working on their own icon for OS X Yosemite! In can be used as a starting point PSD files with the figures and the grid created by me.

via Martiancraft