Speaker spotlight: Jon Hicks on the icon process

On 23 November, renowned graphic designer Jon Hicks, best known for his logo work for Firefox, Mailchimp and Shopify, will make a rare appearance at Pixel Pioneers Belfast to discuss the icon process. We’ve asked him a few questions ahead of the big day

What are digital icons best used for?
They’re at their best when used to support, rather than replace, text. There are some exceptions where an icon alone can work (such as controls on video players). They’re also best when used with purpose other than decoration — there is a temptation to use them like clip art, or on everything, which will reduce their effectiveness.

How do you create a visual identity that’s cohesive and consistent?
Despite what you might think, it doesn’t mean using precisely the same stroke weight across everything. Icons are like type, you have to know where to adjust to cater for optical illusions. There are a lot of factors, but the key part is to design them together in one document to ensure they balance each other. I’ll be covering this in detail in my talk!

What’s the biggest challenge in designing and deploying icons?
Communicating something in the most instantly unambiguous, legible and recognisable way. Reducing something to be as simple as possible, but no simpler.

Jon Hicks at Brighton conference Reasons.to 2017 (Photo by Chloe Flexman)

How do you avoid stereotypes and localisation problems?
Because of how icons work, stereotyping (or at least generalisation) can actually be a benefit. For example, if you’re looking for a function to edit, you would instinctively look for a pencil icon. The more esoteric this becomes, such as a fountain pen or quill, the more ambiguous the icon can be. Icons should always use existing conventions to be effective.

The client is usually an invaluable source of information on potential localisation problems. While I keep a list of ‘knowns’ already, I’m always coming across new localisation issues.

What are your favourite tools for the creation of icons?
I tend to switch between Adobe Illustrator and (mostly) Sketch. Illustrator has the more mature drawing tools, but Sketch has been catching up fast, as well as having the better export options, especially with the SVGO plugin.

My last three icon projects were done entirely in Sketch, occasionally taking artwork into Illustrator to do any thing complex.

What can people expect to take away from your talk in Belfast?
If you’ve discovered the limits of using stock icons, then this talk will take you through the process of creating your own. From working out the right metaphor and style, through to using SVG to deploy resolution independent icons.

But even if you don’t work with icons, there will be other takeaways. It’s essentially graphic design on a small scale!

What are you currently working on?
I’ve just finished creating a new brand identity system for iHasco (not live yet), and I’m about to start work on a large icon set for a bank in Dubai.

I’m also setting up a ‘creative problem solving co-operative’ with Brian Suda called Oxvik, which has just launched. Basically, our thoughts were: put up a simple, single page website and see if it generates any enquiries. Often clients are wary of hiring just a designer, or just a developer. It’s a cooperative, rather than a business venture, so we retain our own identities/businesses, but present ourselves as a combined service. We’ll pass it around and see what happens!

Apart from Jon Hicks’ talk, Pixel Pioneers Belfast also covers ecommerce design, CSS for the next billion users, designing an intuitive navigation, and more. There will also be workshops on Smart Responsive UX Design Patterns (save £45 on a conference and workshop bundle) and an Adobe XD deep dive.

Get your tickets today!


Originally published at pixelpioneers.co on 23 October 2018. All Articles