February 13th, 2012

Insights on Symbol Design, by Jon Hicks

We are proud to have designer Jon Hicks do a guest blog post and give us a quick design tutorial about symbols and icons.  For those of you who don’t know, Jon is a designer from the UK and is well known for designing the Firefox and Mailchimp logos.  You can view more information about his studio and his work here.

Take it away Jon!

sketchbook

You’ve sketched out a great idea for an icon, and have checked that the metaphor you’ve chosen doesn’t have potential problems with its intended audience. How do you take that concept and turn it into finished artwork? While everyone has their own way of drawing, there are a few important aspects to consider to get the best result. We’ll look at the process of designing for icons on screen (websites, apps and so on), but the principles are the same whether we’re dealing with pixels or centimetres.

Size and context

Normally, icons are square, sized in even numbers of pixels and multiples — 16px, 32px, 48px, and so on, being the most common. The context will often determine this; for example, a tab bar icon for the iPhone4 would require a 60×60px icon. The Icon Handbook has a comprehensive reference chart (available online at http://iconhandbook.co.uk/reference/chart/) that will help here, detailing what sizes and formats you’ll need for popular contexts, and even listing naming conventions where necessary. If there are no specifications for the intended context then it’s up to you, and there are occasions when an odd-numbered canvas size suits the artwork best. In this 16×16px example, an arrow is drawn on an even numbered grid, and the point falls exactly on the gridline. However, owing to the way anti-aliasing works, two pixels are rendered for the point, which makes it look blunt or rounded:

arrow with even numbered pixels

Compare it with the same arrow on an odd-numbered grid at 15×15px:

Arrow odd numbered pixels

Here, the point falls in the centre of a pixel, so it only uses one pixel and the point no longer looks blunt. In the future, high density screens will negate the need for this kind of fiddling!

Balance

Once you know your icon size, it’s tempting to fill the entire area with the icon. But to enable the viewer to easily distinguish each icon, they need to have a different outline, which in turn will have a different visual size. This will become obvious when you draw icons in company. In this example, the circle and star in particular look small in comparison with the square:

unbalanced shapes

Of all these shapes, the square needs to be the smallest. If the canvas size is 32px, sticking to a rough guideline of making a square 75–80% (whichever gives a even number) of the original size will make it 24px, and give us an inner margin of 4px (32×0.75=24 and 32−24÷2=4). The circle then overlaps this guide, while irregular shapes like the star are allowed to take the entire space, and the cross is somewhere in between. In the same way, the diagonal bar needs to be shorter than a vertical or horizontal one, such as those in the plus sign:

balanced

Consistency isn’t a strict numerical value however, as optical illusions skew our perceptions. In general, you will have to trust your eye!

Grids

By working out the inner margin area we’ve already created the first guide lines of a grid. Just as layout design uses a grid system to create a structure, we can use the same technique with icon design. It enables us to create consistent, balanced artwork by giving elements like stroke width, gaps and corner radii a guide. It doesn’t mean that lines can only occur along grid lines though. Here’s an example of a pencil symbol with it’s underlying grid:

grid

If the context is a web site or mobile app, you will already have a grid to work to - one of pixels. Even if you’re not designing icons for screen use, you may find it useful to create your artwork in something like Adobe Illustrator’s Pixel Preview mode with small canvas size. For example, this pencil icon is set up on a 40px square canvas. Illustrator automatically shows a pixel grid at 600%, and can snap to its guides. If it works at this size, you can be sure that it will scale up well. Its a good rule of thumb that strokes and gaps shouldn’t be any smaller than 1px when working at this size.

Style

Even with apparently simple icons there are many styles or approaches you can use. You can see this on The Noun Project. Look up ‘Bike’ and you’ll see a seven different ways in which a simplified bicycle shape can be drawn.

There’s no right or wrong here, only what is appropriate to the context. An icon of a figure, intended to be viewed on signage, would be best kept simple in the traditional toilet symbol. However, when used in something like an instruction manual, where there is slightly more time to digest the information, there is scope for more style: 

http://www.iconwerk.de/) When designing icons for use on screen, perspective, or rather the lack of it, is very important. The smaller the icon, the greater the likelihood that anti-aliasing will make the angle edges look blurred. If this is the context you are designing for, keeping to a either a flat-on, or simple 1-point perspective will keep the lines clean and legible.

Fuzzy and flat on

Detail

Finally, we need to decide on the level of detail that we show. It’s obvious that icons need to be simple: the more detail you add, the longer it takes for the brain to decode. For example, the concept of history is normally shown as a clock face, which can be rendered very simply.

history icons

A glanced comparison proves that the minimal version on the left works best. The reverse is also true though, as some icons require a certain level of detail in order to be recognisable. The iPhone icon below (left) has been drawn in its simplest form. At this level, it could be anything from a picture frame to an Amazon Kindle, and needs the details of the speaker and home button to make it clear (below right):

iphone

As Einstein is purported to have said, “Make things as simple as possible, but not simpler”. This conciseness doesn’t exclude showing the form of an object however, as what you leave out of a piece of artwork can be just as important as what you leave in. Negative space can be used to suggest the form of an object, and a great example of this is the 3D glasses icon from The Noun Project. Where the highlight would naturally occur on the top edge of the glasses, a gap has been left that suggests this:

3dglasses

Compare it with the version on the right, where this hasn’t been done - a seemingly simple change, but one that makes all the difference!


I hope this walk-through has been useful! To find out more about icons, their history, usage and the drawing process in more detail, my book The Icon Handbook, with foreword by The Noun Project, is now available! 

Receive Updates!