The Hickensian is the journal of Jon Hicks.

The 'Icon Design Process' Roadshow

For the rest of 2014, I shall be taking my talk “The Icon Design Process” to America, UK and Germany before I retire it and move on! ;)

Icons are more than just pretty decorative graphics for sites and applications, they are little miracle workers. They summarise and explain actions, provide direction, offer feedback and even break through language barriers. Whether you design icons yourself or just need to be able to work with them, this session will take you through the whole process of designing and deploying resolution independent icons—from the initial brief, to choosing format or method to deploy them. On the way it will cover choosing the right metaphor, achieving visual balance, and using techniques such as icon fonts and SVG for scalable and lightweight distribution

You can hear this talk at the following conferences:

An Event Apart Chicago – 25-26th August
Web Expo Guildford – 26th September
Beyond Tellerrand Berlin – 3rd-5th November

If you’re coming to one of these events, please come and say Hi!

663399

For today, as a mark of remembrance for Eric and Kat Meyers daughter Rebecca who tragically died on the 7th June, this site is showing purple border – #663399. It was an idea put forward by Matt Robin that sites use Rebecca’s favourite colour on the day of her funeral.

As Zeldman said so well in his post The Color Purple

It’s so easy to do, there’s no reason not to. Go to Twitter on 12 June and post the hashtag #663399Becca along with any additional words or pictures you feel moved to share. Or just share the hashtag. It will not be enough. Nothing will ever be enough. But it will be something.

Why Helvetica was a bad font choice for Yosemite

When Apple announced that the next version of OS X, Yosemite was to use Helvetica Neue instead of Lucida Grande, I was disappointed, but not surprised. The inevitable harmonising of OS X and iOS has meant the former taking design cues from the latter more recent system.

Helvetica looks nice in lighter and heavy weights shown large, but for small menus like this I detest it. Lucida Grande may have been missing an italic version, and looked clunky in bold above 14px, but it works well as an interface font. It also had some character, without being in your face. In a small text context, Helvetica is the absence of character, a bland ‘default’. A nothing.

Fast Company interviewed Tobias Frere-Jones, who identifies the problem with Helvetica succinctly:

Despite its grand reputation, Helvetica can’t do everything. It works well in big sizes, but it can be really weak in small sizes. Shapes like ‘C’ and ‘S’ curl back into themselves, leaving tight “apertures”—the channels of white between a letter’s interior and exterior. So each shape halts the eye again and again, rather than ushering it along the line. The lowercase ‘e,’ the most common letter in English and many other languages, takes an especially unobliging form. These and other letters can be a pixel away from being some other letter, and we’re left to deal with flickers of doubt as we read.

Read the full article on Fast Company Design

Phone Box Libraries

On a ride this weekend I finally got to see one of the fabled Phone Box Libraries. Classic, but now obsolete, red phone boxes are being converted into small independent libraries for communities lacking in a such a facility. In this case of this one in Gawcott, Buckinghamshire, it’s a book swap.

From Monday-Saturday, 10am-6pm, you can bring a book and and swap it for another. The cynic in me expected it to be trashed, but it’s obvious the locals respect and use it. I love how it keeps these beautiful pieces of iron architecture in use!

Spotify Iconset

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:

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!

The Hickensian is the journal of Jon Hicks, one half of the creative partnership Hicksdesign. Take a look at the work we do.

Upcoming Talks

I sometimes pop up at conferences and waffle about design, icon creation in particular. Here's where I'll be next:

An Event Apart Chicago- "Icon Design Process" - 25-26th August 2014

Web Expo Guildford- "Icon Design Process" - 26th September 2014

Beyond Tellerrand Berlin – 3rd-5th November 2014

playlist

See more on last.fm

Contact

Hicksdesign

73a High Street

Witney

Oxfordshire, UK

OX28 6JA

+44 (0)7917 391 536

Download vCard

Engine Room:

Hicksdesign is powered by Textpattern and hosted by the lovely boffins at Engine Hosting

Engine Hosting