Hicks

You’re reading all articles on The Hickensian tagged 'work'

DuckDuckGo Stories

Some more of my work for DuckDuckGo went live this week. This is a series of illustrations to tell the story of why you should use this alternative search engine. Working with the design team, we developed some quirky takes on the concepts; a lab creature burning documents (they don’t store personal information), a ghost chasing a runner (they don’t follow you around with ads) and someone’s private bath time being watched (they don’t track in or out of private browsing).

The workflow for these was sketching ideas on the iPad Pro with Pencil, and then taking the sketch into Illustrator for the final render. Sketching on the iPad makes it quick to try different versions of a sketch, but also helps refine the ideas. I just keep drawing, erasing, tracing, refining in a way that would be much harder to do on paper.

I also dabbled with some simple SVG/CSS animation on the periscope illustration. It was great fun working for DuckDuckGo, and I’m particularly pleased with how these ones came out!

Recent Work: DuckDuckGo

Hicksdesign has been working with the alternative search engine DuckDuckGo recently, on a series of illustrations for their site. The first of these, the ‘private balloonist’, is live on their homepage :

I’m particularly pleased with the series we did after this one – the style is even more improved and I feel is some of my best work to date. Can’t wait for that to go live so that I can share it!

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!

New Skype Emoticons

Working with Steve Pearce and Mark McLaughlin from Skype, and genius animator Julian Frost, Hicksdesign has updated the complete set of Emoticons for its desktop and mobile clients. Currently released in the Windows and Android versions, Mac and iOS will follow later.

The brief was simple, update the Emoticon set, providing multiple sizes (20,30,40,60,80px), but retain the style that is already familiar to millions of users worldwide. The original set was designed by Priidu Zilmer and only existed in one size – 19px. An odd numbered grid can allow you to centre elements better, but the decision was taken to start at 20px to allow more straightforward enlargement. This meant some of the basic proportions of the eyes to head had to be changed.

The 20px was the first to be drawn in each icon, followed by the 80px. For the new icons, the Photobooth Reference technique was employed a lot…

My favourite part of the project was seeing Julian give them life, and provide motion that I could never have achieved. That dance icon is a work of modern art. Emo is another personal favourite

In all, there are now 98 emoticons. It’s been a fantastic project to work on, and with superb clients to boot.

Recent Work: Shopify

I recently undertook a refresh of the Shopify shopping bag logo. An interesting one for me, as the concept was already in place, it just needed a rendering clean up, sort out the perspective and make it more dynamic.

Here’s a side by side, old and new:

Shopify old and new logos

Sketches of initial ideas, looking for the right perspective:

sketches

Followed by early ‘vector roughs’, getting the shape and colours mocked up (the idea of making the bag handles form a cutesy smile was shelved early on!):

Shopify Logo early vectors

Final Artwork with green and black/white variations:

Shopify Grid WhiteShopify Green bag

Recent Work: FontExplorer Pro

Just over 2 years ago, I started work on what turned out to be my largest icon project to date, for the new version of Linotype’s FontExplorer app (or ‘FEX’ as it’s also known). It was great to be asked to work on an app that I use everyday, and as the project grew, over 280 new icons were created for it, and at several different sizes.

The first job was to look at the application icons for Pro and Server editions. Amongst the early sketches, I was very keen on an early idea that used a printers wooden draw of metal type:


However, the child’s block idea was chosen, as Linotype liked how it suggested using the app was ‘childs play’, so this idea was progressed into early vector roughs:

As you can see, the Linotype L logo was common theme to all ideas, some more subtle than others. At one point we considered a transparent version:

These were worked through until we arrived at the final icons. Both apps also have updaters that show them packaged in plastic and brown parcel tape:

One of the requirements of the brief was that the client needed original vector artwork, so for the first time, I used Illustrator to create all the icons, not just the larger application icons. There are pros and cons with this – Illustrator has handy features such as global colour and selecting elements by same stroke or fill, but when it comes to pixel perfect rendering it’s a pain. You end up using little workarounds (such as not making a stroke 1 pixel, but 0.8) in order to achieve crispness.

Finally, to be ready for Resolution Independence (and as no one has created vectors that can scaled down effectively as well as up), several versions were required. So for each of those 280 odd icons, the following sizes were required: 16, 32, 48, 128 px, with application icons requiring a further 256 and 512px version. As a lot of these interface icons are 16px at default, the 128px version didn’t need to be as detailed/photorealistic as an application icon would be at that size, but still look good at that size. Here are some examples:

It was not only a great project to work on, but also a great client to work with!

Recent Work: Mahalo

Mahalo

Logo design for Mahalo, the human powered search engine. Hicksdesign also consulted on the site design as well as creating its icons. ‘Mahalo’ is Hawaiian for ‘Thank you’, and various related imagery was explored before settling on the Plumeria flower from a Leis.