Know Your Icons Part 2 – Modern Icon Design

In the last installment you learned about the history of icon design and how it has evolved from black and white representations of office items into full colored, glassy, hyper-rendered, isometric representations of… office items. In this installment I will be delving further into the world of icons and exploring what icons mean to us today.

What is an Icon?

i·con – noun (Computers) a picture or symbol that appears on a monitor and is used to represent a command, as a file drawer to represent filing — dictionary.com

So we know the meaning of "Icon" in the traditional computing sense of the word, but how does this explain all the illustrative icons we see today? How is a beautifully rendered image of a Teapot, Space Ship or Bucket of Chicken supposed to represent something within the user interface? There’s a few answers to this question.

• Application Icons: Application icons are a great example of un-conventional design. These icons often have a strong trend towards memorable images over representations of the application itself.
• Website Navigation: Website navigation is another place you’ll find some unusual "icon" designs. The interpretation of the icon is dependant on the context in which it is used, it’s OK to use an un-conventional design as long as the audience knows what it’s function is.
• Format: Some designs defy explanation, such as "Form over Function." This means that the icon has been designed purely for aesthetics.

No matter how strict or unusual your design is, all icons should be made to specification – there will be more about that soon.

Below you will see a breakdown of modern icon design. Some people may argue that the icons on the "illustration" side of the chart shouldn’t be considered icons. This is partly true, they’re not traditional icons, but they are Modern Icons in the sense that they could represent applications, games or a specific context.

The icons on the left side of the chart are icons that would be considered to be Traditional Icons with a modern twist. We immediately associate these icons with their function, this is achieved by over 30 years of visual language, which is a powerful factor in the designs success.

The icons down the middle of the chart are icons that are neither illustrative or informative, but a combination of both. The Envelope is traditional because of its form, but it could be perceived differently due to its rendering, a design like this works best within a certain context. The Blue Twitter Bird has immediate recognition from internet users, but is reduced to an illustration of a blue bird for non-users (like my mum) and the stylistic GTalk Bubble is also fairly reliant on brand association.

Links to the Icons above (in no particular order)

Pump It Up, by mgilchuk, My Breafast, by blink, SNOW.E 2 XP, by RADE8, CS3 iKons – Win, by -kol, iChat Bubble, by Delta909, Icecream icon set, by Miniartx, Batman Mask, by Svengraph, In Spirited We Love, by Raindropmemory, Twitter Bird, by freakyframes, StarWars Vehicles Archigraphs, by Cyberella74, Systematrix Full, by royalflushxx, New Moshii World, by anekdamian, Somatic Rebirth Extras, by The Iconfactory and David Lanham

Conventions and Specifications

When designing icons for an interface you can’t go past convention. Check previous designs for an indication of how to approach yours. You will find that most Software packages and User Interfaces have similar icons, this is because of User Experience (UX). If a user is suddenly confronted with a design that they’re not expecting or comfortable with, they’re likely to get confused.

If you’re designing for a specific platform, always check the developers notes before you start, these will give you an idea of the size, perspective, and color palette you should be using. You can find links to both the Apple and Microsoft developers notes in the “Resources and Further Reading” section at the end of this post.

Green = Good — Blue = Help — Yellow = Alert — Red = Error

Modern Specifications

Icon specifications get more complicated with each new technology or operating system. Windows and Mac are in an Arms Race over icon size, with the largest icon to date measuring a massive 512 pixels. The trend for huge icons has much to do with modern screen resolutions, but there’s also a certain drool factor with a giant, perfectly rendered icon. Look at the examples below if you don’t believe me!

AppZapper, Billings, Things and Coda Application Icons for Mac (downscaled to fit this post!)

Now that I’ve shown you the Drool Worthy icons, let’s move onto some icons I’ve designed myself. The example below is a de-constructed .ICO file made in my previous life as an icon and interface designer (those who know me as LoungeKat probably didn’t know this fact). The main 256px icon has been made in Adobe Photoshop with shapes and layer styles, it was then re-scaled for each individual size (64, 48, 32, 16) and imported into Microangelo Toolset to be combined as an .ICO. The 256px icon isn’t part of the icon file itself, but included in the software as a Transparent PNG that windows calls on if the size is required. This keeps the file size down.

As you can see, I’ve used a few variations on the design depending on the color depth and size of the icon. Icons include all of these sizes and color spaces to accommodate all of the different ways that they can be viewed by the operating system.

It’s important to design each size separately, scaling a large image can make the design look blurry. When you’re designing a 16px icon it’s always best to get right down to pixel view. As you can see, a few well placed pixels can convey much more than you think. You can read additional information on Icons, various specifications, and industry recommendations in Axialis Software’s icon guide.

An example of scaling

To get a better understanding of icons I would suggest looking at as many different operating systems, programs, interfaces and portals as possible. Think about the different way color and metaphor is used for each application. Which icons stand out as being easy to understand (perhaps the folder or trash can strike you as the most recognizable?), which icons need further explaining? Trust me, you will be surprised what you find out about the psychology behind the visual language we use every day and often take for granted.

Resources & Further Reading

• Candybar – Software to Organize and Customize Mac OS X icons
• Icon Builder – Adobe Photoshop and Fireworks "Icon Creation" for Mac and Windows

• Microangelo – The "Grand-Daddy" of Icon Software (it really is!)
• Axialis IconWorkshop – Software to make Mac and PC icons
• Ember- Image Site with a Great Showcase of UI Designs
• Microsoft Developer Network – Style guide for Windows Vista/7
• Microsoft Developer Network – Style guide for Windows XP
• Apple Human Interface Guidelines – Style guide for Mac OSX
• GUIPulp – Desktop Customization Resource
• 7 Principles of Effective Icon Design – Psdtuts+
• Computer Icon – Wikipedia