You’re reading all articles tagged 'spotify'

Spotify Iconset

15 May 2014

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:

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:

The other type were mood/atmosphere based which we represented with non-musical objects, such as the egg chair for Chill (right).

The project is still ongoing, and in particular there will be more Genre icons to add to the set!


Spotify Major Redesign


Instagram Hickstagram

  • 15 Oct 2018

    Inktober Day 15. @hicksmade’s staircase led me to this. There must be a hairdressers somewhere called this? #inktober #inktober2018 #leighandjondoinktober #hairwaytosteven

  • 14 Oct 2018

    Inktober day 14 - from @hicksmade’s theme of escape, and tonight’s Dr Who, with a return to classic theme: running!. #inktober #inktober2018 #leighandjondoinktober #drwho #pictogram #signage

  • 14 Oct 2018

    Inktober day 13 is more of a doodle as time was very short! There was a bird in @hicksmade’s day 13 so I ran with that. . #inktober #inktober2018 #leighandjondoinktober

  • 12 Oct 2018

    Inktober Day 12. Thinking about @hicksmade’s lumos led me to this “please don’t turn me off…”. #inktober #inktober2018 #leighandjondoinktober #sadlightswitch

  • 11 Oct 2018

    Inktober Day 11. The shape of @hicksmade’s spoons made me think of the Mandrake - a root that looks like a tiny human. There are lots of legends around it, but this one is based on the Harry Potter interpretation. . #inktober #inktober2018 #leighandjondoinktober #mandrake #harrypotter

  • 10 Oct 2018

    Inktober day 10. @hicksmade led with a lovely bee, which made me think of the Jesus and Mary Chain song “Just like honey”. Fancied trying something different so went for a 60s typographical thingy . #inktober #inktober2018 #leighandjondoinktober #honey

  • 10 Oct 2018

    Beautiful morning at North Leigh Common!

  • 09 Oct 2018

    Inktober day 9, as the crow flies. An obvious link from @hicksmade’s scarecrow, but I’m much happier with this one compared to yesterday’s. #inktober #inktober2018 #leighandjondoinktober #crow

  • 09 Oct 2018

    Inktober day 8 and boy am I cross with how this one turned out. It’s utter pants. Supposed to be Bill Murray and Scarlet Johannsen in Lost in Translation, not that you could tell from this. Bill looks like a zombie, and goodness knows what that is on the right. It put me in such a bad mood last night, but I need to let it go and move on. (I even cheated a bit and touched up some bits in Photoshop!). The one bit I’m happy with is his neck, and that’s it. Rant over #inktober #inktober2018 #leighandjondoinktober

  • 07 Oct 2018

    Inktober day 7. When @hicksmade drew an apple, I couldn’t get the apple bonkers from Yellow Submarine out of my head. Those faces gave me nightmares as a child. . #inktober #inktober2018 #leighandjondoinktober #yellowsubmarine #applebonkers

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom