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.
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:
Sketches of initial ideas, looking for the right perspective:
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!):
Final Artwork with green and black/white variations:
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!
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.
Logo design for ReallyWorried.com (site design by Stuff & Nonsense). Created using a hand-drawn version of Expletive Script, coupled with Omnes Black.
Archives by tag:
icon and interface design,
logo and branding design,
website and logo design,