Last Autumn I was contacted by Andreas Holmström, Lead Communications Designer at Spotify, to see if I’d be interested in working on a new icon set to accompany the major redesign that was underway in-house. As a music fanatic, and a keen user of Spotify for about 6 years, I jumped at the chance! It’s fair to say I’ve discovered more new music with Spotify than any other medium, and I use it as much as a way of previewing albums I’m thinking of buying.
A month ago the full redesign was unveiled, and I’ve finally had a chance to write up some of the process and decisions that were made…
Discovery Phase
I always start a large icon project with what I call a ‘discovery phase’, where we select a few icons to look at first, and consider different approaches, metaphors and styles. It also helps ensure we get the size, format and file naming correct before cracking on with the rest. Working with Andreas, Stanley, Daniel and Sebastian from the Spotify design team, we set about defining the new icon set. The brief was to create an icon style that would be simple, rounded, friendly and intuitive (without being childish or cute), while considering existing brand elements such as the Spotify logo, Spotify Connect icon, and the Proxima Nova typeface that was being used for the redesign.
We started with Album, Artist, Collection (which became Your Music), Discover, Playlist, Profile and Radio:
One of the challenges was representing something that doesn’t have physical form. There are of course existing metaphors for parts such as the audio player controls, but how do represent the actual music? Spotify’s music library is immense, and yet doesn’t have any appearance as such.
An early idea was to use an iconic album cover - in this case, Pink Floyd’s Dark Side of the Moon:
In this case however, both Vinyl and CDs have a similar appearance - two circles within a square. We decided this much simpler design would work best. In particular, (my personal favourite) the Browse icon is intended to extend this, and hark back to the days of nimbly flipping through racks upon racks of albums. Nostalgia? Certainly, but it hasn’t done ‘envelope for email’ any harm.
We also tried out other music metaphors, such as a band’s setlist, or a cassette mixtape for Playlist, and a backstage pass for Profile. While mixtapes are decidedly ‘old school’ they are a unique and memorable symbol in their own right, but the simpler musical note is an established convention.
Iterating on these we developed a set of rules to design the rest of the iconset:
- There are 4 main sizes for each icon - 16,24,32 and 64px. As the size increases, the stroke widths are scaled to a lesser extent to avoid icons looking too ‘chunky’ when shown large. So a 1px stroke at 16px doesn’t actually mean a 4px stroke at 64px (below right), rather a 2px stroke (below left).
- Opt for the simplest metaphor possible in each case. For example, we decided the Your Music icon could work without the suggestion of the shelf at the bottom.
- All corners are rounded off, except where an element exists beyond the boundary - such as the microphone stand in Artist. The radius is on average 1.5px at the 16px size, but it varies depending on the object.
Genre Icons
The next stage was to tackle the much larger ‘Genre’ icons that you can see in Browse. Unlike the main interface icons, there was more room for exploration and a little detail.
One fun idea I explored, but rejected early on were ‘busts’ (busticons if you will)
Left to Right: Gene Simmons (KISS), Redfoo (LMFAO), Michael Jackson and a generic ‘Workout lady’
Redfoo was used for the "Party* icon (Party Rocking?) but we decided it could all be too obscure. It’s also harder to portray categories like Mood this way.
The direction we decided was this: for specific genres of music, convey it with an instrument that is representative of the genre. Particularly for rock and its sub-genres, there were several guitars that were ideal for each. Gibson Les Paul for Classic Rock, Flying V for Hard Rock, Fender Jaguar for Alternative and so on (these sub-genres aren’t visible in the app yet, but hopefully will be in the future):
I looked at showing the instruments in perspective, to allow them to be shown as a whole, but the result wasn’t as effective, or consistent with the rest of the set:
