How I designed the icons in the famous music software Spotify

@ Chen Zimu Editor's note: The author of this article is the designer Jon Hicks, who is the founder and design leader of the original website Hicksdesign, and the Hickensian section of the website records Jon's design history and experience summary, which is well worth reading. This article is a process in which Jon is involved in the design of the famous music software Spotify icon set, in which the idea of grinding the icons, and the way in which details are handled is well worth learning. Read happily.

Last fall, Andreas Holmstrom, who was contacted by the leading designer of the music software Spotify, contacted me and asked me if I would be interested in participating in the design of their new version of the icon set and working in collaboration with the design team that they were redesigning the entire Spotify software. As an avid fan, I have been using Spotify's heavy user for 6 years, and I have to take this opportunity! Frankly speaking, I found more music through Spotify than I did in other media.

One months ago, the whole redesign project was basically completed, and I finally had the opportunity to write down this rare design experience and share it with you.

Discovery phase (Dsicovery Phase)

In general, I like to call this large icon design project the "Discovery phase," because at this point I will look at many different icons to explore the design methods, metaphors, and styles. At the same time, these out-of-the-box cases will ensure that we are able to maintain the correct size, format, and naming patterns when we design the icon set. During the design process, I worked with Andreas, Stanley, Daniel and Sebastian from the Spotify design team to complete the new icon set. Our duty is to design a set of simple, mellow, friendly, intuitive, and does not appear cute and naïve icon. At the same time, the design of the icon will also take into account Spotify's existing brand elements, icon style, and Spotify redesign of the Proxima Nove font.

At the beginning of the design, we started with the album, Artist, Collection (user's own music collection), Discovery, playlist, personal data and music platform, the main columns of the icon design.

In the design process, a big challenge is to show a lot of reality does not exist in the elements. Of course, such operations as music playback control have a ready-made metaphor and a common icon style, but how does the actual music present? Spotify has a huge library of music, but does not have an icon or look to represent it.

One of our early ideas was to use an iconic album cover as a music browsing icon--such as the cover of Ping Floyd's album Dark Side of the Moon.

But we have not adopted this design plan. In the next design, we refer to the appearance of the black Glue and the CD, and their similar appearance can be abstracted into the icon design-all two circles in a square. We think this design is simpler and more useful than the previous design. In particular, the browsing icon (which I like best) has an intrinsic connection to the icon, reminiscent of the long, whirling past of the record in the phonograph. Nostalgia? Indeed, the good news is that metaphors are not as widespread as the envelope icon that represents email.

We have also tried other metaphors for music, such as using band songs, cassette mixer to make playlist icons, or designing profiles based on the appearance of passes. Although the use of mixer as an icon is very old-fashioned and unique design, but more simple and popular notes of the image is closer to public awareness and generally accepted common sense.

In general, considering all the factors, we have developed a set of design specifications for the remaining icons.

The first is the specification of the dimensions, each of which will have 16px, 24px, 32px and 64px sizes of four. With the size of the increase, the line in the icon and the overall ratio of the thickness will be smaller, visually more thin, to prevent the entire icon looks "squat." For example, when the icon size is 16px, line thickness is 1px, but when the icon grew to 64px, the line thickness is not equal to 4px (right), the actual size is close to the 2px (left).

When you choose the icon type, you will try to choose the most simple and intuitive, so that users do not need to pass the bottom of the menu text description will be able to operate correctly.

All corners will be rounded, such as the artist Avatar icon, how many will have a little detail beyond the boundary, which can be adjusted according to the actual situation.

Type icon (genre icons)

The next step is to resolve the category type icon. Unlike icons appearing on the main screen, these category icons have more room to show more detail in the "Browse" interface.

Below these chest icons are just beginning to do the type icon, do a little interesting to explore. In the final edition, these have been dismissed.

From left to right are: Gene Simmons (KISS), Redfoo (LMFAO), Michael Jackson and "Workout lady".

Originally wanted to use Redfoo's chest icon to mean "party" (Rock and Roll reunion?) , but we all think it's too obscure. So, it is really a very troublesome thing to convey the artistic conception through the icon.

Later, we decided to deal with the type icon: for a particular type of music, we would use the musical form of a unique or representative instrument to express it. In particular, the subtypes of rock and roll, we use different guitars to show them. We use Gibson Les Paul to represent classic Rock, with flying V to represent hard rock, Fender Jaguar represents alternative rock, and so on.

I hope that these designs are uniform enough to be holistic, but the results are not necessarily the ideal:

There are also some of the icons used to express the mood and atmosphere, and did not use music-related objects to perform, such as the following egg-shaped chair, is used to show the mood of relaxation.

Currently, the project is still being perfected, and new icons are being added to the collection.