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.

1. Icon Grey - Color used for icons in a normal state and non destructive actions e.g.: back, forward, ok, home.
2. 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.
3. 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.
4. Icon Blue - Color used in addition to color #1. Used to distinguish icons that involve the action "select" or "insert".
5. 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.
6. 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.

Breeze Icon Design - Sizes

Breeze icons come in a variety of sizes depending on their context. The following lists the current sizes in use:

• Breeze/
  • actions/
    • toolbar/ - 22x22
    • toolbar-small/ - 16x16
  • apps/
    • preferences/ - 32x32
    • software/ - 48x48
    • software-medium/ - 22x22
    • software-small/ - 16x16
    • system-power-actions/ - 48x48
    • system-session-actions / - 48x48
  • categories/
    • start-menu/ - 32x32
    • start-menu-small/ - not used in Plasma
  • devices/
    • hardware/ - 48x48
    • sidebars/ - 16x16
  • mimetypes/
    • file-types/ - 64x64
    • file-types-small/ - 16x16
  • status/
    • dialogs/ - 64x64
    • im-status/ - 16x16
    • panel/ - 22x22
  • places/
    • user-folders/ - 64x64
    • user-folders-small/ - 16x16

Breeze Icon Design - Basics

As mentioned above there's mainly two styles for Breeze icons. When creating a new icon for Breeze make sure to follow these rules as it's important to keep consistency within all the elements in the theme. With Breeze we'd like to keep things simple, most monochromatic icons must fit within a squared area set by guides though the graphics don't need to be squares themselves. Icons too, should be 99.9% of the time pixel perfect, this simply means that all objects must be aligned to the grid (as in the Inkscape grid), this results in crisp icons once in use.

A pixel perfect icon. On the canvas and in the app.

In the above list we have the sizes for the icons set up, however, the icons or rather the graphics themselves do not fill the entirety of the canvas (the document/workspace) this is because while some icons can be created to fit within a square area others whose inspiration comes from real-life objects which are not squares per se would not fit, for short, we too want to keep things recognizable, not stretching things over the canvas to fit the area set by the guides but keep a correct aspect ratio of the final graphic and what it should represent.

A newspaper icon can perfectly fit within the set area of the guides. But not an envelope.

As you see in the images above we have guides in place, this is so that the graphics you see in the apps are all at the same height though some may have different width. The guides are in place for all the icons, the image below illustrates this:

Visual representation of the area defined by the guides. Icons don't necessarily have to be squares, they simply need to have a proper aspect ratio. Vertically aligned icons are narrower but have the same height as wider icons.

Whether the graphics are narrower they have the same height. Placed in a taskbar or a dock this results in a seamless app list presentation.

Implementation

• Use icons available from the system icon theme whenever possible. Avoid using custom icons.
• 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/