Online Book Reader

Home Category

Rockstar Icon Designer - Kate McInnes [10]

By Root 386 0
Think of designing icons as a game of Pictionary…how would you win the game?

The light bulb is a common symbol to use for ideas, but the fluorescent light is a popular symbol for eco-friendly electricity.

The final consideration is familiarity. Popular icons such as the pen, pencil, folder and writing desk have very little to do with computers, let alone the modern working environment. When icons represent tools, the most basic representation is often the best. Older items make great icon designs as they are the most universally recognized and have a single basic use. You would be hard pressed to find a person who doesn't know what a pencil is, and what it is used for. But if you replace that basic pencil with a mechanical version, there's a chance that its use won't be apparent. Pencils make lines, paint brushes make thicker lines and special finishes, erasers erase and so on.

A drafting compass draws circles, but used as an icon for drawing it can be confusing. A picture of a circle is straight to the point and has a single function. In some cases, simple is best.

There are some instances where the rules change. One such example is items that serve many functions, such as a drafting compass. A drafting compass is traditionally linked to navigation and maps, but if you were to use one for a Circle tool you would be confusing the user. This is because the tool itself performs many different functions.

2. Icons Must be Clear and Concise

Icons need to be recognized at all scales and in all contexts. Many icons appear in locations that you may not think of, such as in error dialogues, installers, and file browsers. This causes icons from varying programs to show alongside each other. If your designs are similar to ones that exist within the operating system you run the risk of leading people to think that the error or file structure is part of the OS and not the software that's in use.

To avoid a lengthy revision process, at the beginning of a project break the icons down into categories such as system, interface and application, then sketch out everything as a set. As you sketch, refine each design so it's unique and clearly communicates the function without complex metaphors. Keep the elements to a minimum and don't use the same (or similar) design for two different functions.

To make great icon sets, sketch out the designs before you begin to render them.

To make an icon clear and concise, avoid adding text, small details and too many elements. Depending on the operating system and device, the scale of an icon can range from 16px to 512px (with rumors at the time of printing of a massive 1024px for Retina Display Apple devices), so there are many things to consider during the development process. A useful tip to remember is that you can slightly alter the rendering style of an icon to suit the scale. By keeping the colors consistent, your icon set will still look unified with style tweaks to each size. In the figure below you will notice that the large icon is detailed and glossy and the smallest scale is simple with no effects.

It's important to craft each icon to be as clear as possible. A large 512px icon will need to gradually lose details as the sizes get smaller, scaling a detailed image will result in a blurry icon with muddy colors.

3. Icon Design Must Adhere to Platform Guidelines

Once an operating system or program establishes a visual language it's unlikely to change. Imagine if the Trash icon was suddenly replaced with a garbage truck? After a brief moment you may realize what it's for, but the change will cause some confusion and possibly lead to frustration. Regular Mac users may be especially confused as there's already a popular truck icon used for Transmit by software developer Panic. It's for this reason that, although the rendering of icons has changed over the years, the core design concepts remain the same.

Changing popular icon designs should be done with caution. A garbage truck could stand for trash but the change would confuse your audience.

Apple, Microsoft, Tango and Android

Return Main Page Previous Page Next Page

®Online Book Reader