Projects/Usability/HIG/IconDesign

Purpose

Icons are pictorial representations of functions and objects, important not only for aesthetic reasons as part of the visual identity of a program, but also for utilitarian reasons as shorthand for conveying meaning that users perceive almost instantaneously. Well-designed icons improve the visual communication and strongly impact users' overall impression of visual design. Last but not least, icons are space-saving and improve usability by making programs, objects, and actions easier to identify, learn. Icon use should be consistent throughout the interface.

Guidelines

Design icons with a small number of metaphors [1].
- Apply metaphors only once (e.g. do not use a brush twice for different options).
- Rethink conventionally used metaphors (e.g. the clipboard icon of paste).
- Antiquated metaphors might work well (e.g. a floppy is not necessarily outdated to represent save).
- Adjust the degree of abstractness according to familiarity of the metaphor.
- Use arrows only if they can easily be related to spatial features such as Previous/Next in a sequence or Up/Down in a hierarchy. Avoid using arrows metaphorically (such as for Reply/Forward or Undo/Redo).
- Attempt to use metaphors that are independent of language and culture.
- Make icons simple.
If an icon has important details at larger sizes, rather than simply scaling it down, create unique versions of the icon at smaller sizes. Critical details may become unrecognizable when scaled down.
Avoid using text in icon designs; it may not scale well to smaller sizes.
Icons of a similar type share a consistent visual language (mimetypes, folders, devices, etc.).
Follow the guidelines for presenting icons with text
Test your icon set on strength of association, discriminatory power, conspicuousness, and, if applicable, on accessibility.

Monochrome Icons

Used for application toolbar and button actions, menus, sidebars and status and notifications. Also may be used for small (16x16) devices and places icons (folders, usb drives, etc.).
Rely on a distinct shapes instead of fine details to distinguish between them.
Breeze icons use primarily color #1 and #2 but also use other colors to indicate a different state.

Icon Grey - Color used for icons in a normal state and non destructive actions e.g.: back, forward, ok, home.
Icon Red - Color used for icons in a normal state and for destructive actions e.g.: close, delete, remove, stop. Also used in addition with color #1.
Icon Orange - Color used in addition to color #1. Used to distinguish icons that involve "user input", also used as the color for the "busy" state in IM software.
Icon Blue - Color used in addition to color #1. Used to distinguish icons that involve the action "select" or "insert".
Icon Yellow - Color used in addition to color #1. Used to distinguish icons that involve a "warning", also used as the color for the "away" state in IM software.
Icon Green - Color used in addition to color #1. Used to distinguish icons that involve "connected", "secure" or "successful" actions.

Colorful icons

Use colorful icons for applications, folders, mimetypes and devices.
For Breeze icons, use colors from the full Breeze color palette as a starting point.
Breeze icons use smooth linear gradients (bottom to top/dark to light); they are not flat.
Application icons should be unique and easily recognizable.
When creating an system icon theme, respect trademarks by avoiding significant alterations to application icons.

Implementation

Follow the Icon theme usage guidelines.
For standard actions (back forward, open, save, refresh, etc.) use an icon from the platform-provided set. The KDE Platform 4.x uses the Oxygen icon set. The KDE Plasma 5.x desktop and applications use the Breeze icon set.
If you would like to request help designing icons unique to your application, you can ask for help on the KDE Visual Design Group Forum.

References

[1] http://user-prompt.com/semiotics-in-usability-guidelines-for-the-development-of-icon-metaphors/