Difference between revisions of "KDE Visual Design Group/HIG/IconDesign"

Jump to: navigation, search
(Implementation)
(Colorful icons)
Line 36: Line 36:
 
* Application icons should be unique and easily recognizable.
 
* Application icons should be unique and easily recognizable.
 
* When creating an system icon theme, respect trademarks by avoiding significant alterations to application icons.
 
* When creating an system icon theme, respect trademarks by avoiding significant alterations to application icons.
 +
 +
===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
  
 
==Implementation==
 
==Implementation==

Revision as of 17:40, 11 January 2015

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

HIGMonoIcons.png

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

Colorful icons

Sample color icons.png

  • 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.

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

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/


Content is available under Creative Commons License SA 4.0 unless otherwise noted.