Icon Design System

To follow up on Erik's last post about draw and pick gallery icons, I thought I would introduce some of the thinking behind the new icons in the 2010 Revit products. The design system developed by our colleagues on the Platform team was flexible enough for us to redesign over 1000 icons to fit our products while staying within the visual "family" established for all Autodesk products. The goals of the system are:

1. Be easy on the eyes
2. Do not overpower the canvas
3. Be as simple as possible
4. Have a distinctive style

 The following are the basic elements of the system:

Main Body
The foundation of our icons is the main body. Accents and badges enhance their meaning in a systematic way.

Accents
Accents are spot colors or overlay applied to the main body to enhance the meaning and communicate change.

Blue is used to show modification. For Cut Geometry, the blue object is the one being cut. The red is used to indicate stop or removal. For Join Geometry, we used the same base shapes, but use the blue color to show that both shapes will change.

Green is used to indicate selection. For Place Beam on Grids, we re-used the base Grid icon and added blue to indicate a beam will be created and the grid is what should be selected.

Badges
Badges are separate elements laid on top of the main body to indicate a common action such as edit, new, or delete. For Edit Profile, you see the combination of blue accent to indicate the profile will change and the common "pencil" badge to indicate editing. Another common badge is the "star" to indicate something new will be created. There were certain times where we had to deviate from the system. For instance, the Home tab would have been full of "star" badges, so we opted to leave them off since it would have been overly redundant.

This is just a taste of what went into creating these icons. There are many more guidelines dictating the exact color values and gradient levels to ensure consistency. Also, each icon required collaboration between subject matter experts and icon designers to ensure the symbolism was accurate and expressive enough. We had many lively discussions and sketch pinups discussing the ins and outs of whether "toy blocks" was too child-like for the Component tool or whether the "puzzle piece" made sense for Worksets.

 

_tom

Comments

[Anthony]

It's a tooth!
.-)

Looks good!

[Anthony Hauck]

Don't ask where that tooth came from! This was an open brainstorming activity where we allowed people to freely draw what came to mind. Apparently, a command in Revit reminded someone of a tooth. The other image I have has three ducks (I think that was supposed to represent "families" get it? ;-)

[Tim Waldock]

Tom,
This is interesting as far as it goes, but I would love to hear more on this subject - for example, when you have a light bulb indicating that you can turn something on or off, the icon designers had a choice as to whether the bulb colour indicates the present state or what will happen if you click on it? There appears to be a fair bit of inconsistency with that (see various posts on forum) - some on-off icons do not change when clicked on, some have red crosses instead of light bulbs etc. It helps us to know the reasons for each case - we will complain less and give better feedback.