Difference between revisions of "Projects/Usability/HIG/IconDesign"

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Guidelines)
(Merged VDG icon guidelines with original icon design guidelines)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
 
==Purpose==
 
==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.
+
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 ==
 
== Guidelines ==
* As a developer use an icon from the predefined set. KDE uses the [http://websvn.kde.org/trunk/kdesupport/oxygen-icons/ Oxygen icon set]. Ask at the [https://mail.kde.org/mailman/listinfo/kde-artists kde-artists mailing list] if the set lacks on a specific item.
 
* As a designer create icons with varying sizes in respect to the level of design. Simply scaling down (or up) does not work.
 
 
* Design icons with a small number of metaphors [1].  
 
* Design icons with a small number of metaphors [1].  
 
** Apply metaphors only once (e.g. do not use a brush twice for different options).
 
** Apply metaphors only once (e.g. do not use a brush twice for different options).
Line 12: Line 10:
 
** Adjust the degree of abstractness according to familiarity of the metaphor.
 
** 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'').
 
** 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'').
** Define metaphors independent from language and culture.
+
** Attempt to use metaphors that are independent of language and culture.
 
** Make icons simple.
 
** Make icons simple.
* Colorize icons according to the meaning but in respect to application’s colors.
+
* 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.
* Don’t use animated icons.
+
* 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.).
 
* Test your icon set on strength of association, discriminatory power, conspicuousness, and, if applicable, on accessibility.
 
* Test your icon set on strength of association, discriminatory power, conspicuousness, and, if applicable, on accessibility.
 +
=== Monochrome Icons ===
 +
[[File:HIGMonoIcons.png]]
 +
* Used for application toolbar actions, menus, and status and notifications. Also 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.
 +
* Color can be used for distinction (change of state, destructive actions, etc.).
 +
=== Application icons ===
 +
[[File:HIGAppIcons.png]]
 +
* Unique and easily recognizable.
 +
* Have the widest variation of color and visual style to represent the visual identity of the application.
 +
* When creating an system icon theme, respect trademarks by avoiding significant alterations to application icons.
  
 
==Implementation==
 
==Implementation==
 +
* For standard actions (back forward, open, save, refresh, etc.) use an icon from the platform-provided set. The KDE Platform 4.x uses the [http://websvn.kde.org/trunk/kdesupport/oxygen-icons/ Oxygen icon set]. Ask at the [https://mail.kde.org/mailman/listinfo/kde-artists kde-artists mailing list] to request addition of a specific item.
 
* http://websvn.kde.org/trunk/kdesupport/oxygen-icons/
 
* http://websvn.kde.org/trunk/kdesupport/oxygen-icons/
 
* https://mail.kde.org/mailman/listinfo/kde-artists
 
* https://mail.kde.org/mailman/listinfo/kde-artists
 +
* If you would like to request help designing icons unique to your application, you can ask for help on the [http://forum.kde.org/viewforum.php?f=285 KDE Visual Design Group Forum].
  
 
==References==
 
==References==

Revision as of 20:08, 28 March 2014

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.).
  • Test your icon set on strength of association, discriminatory power, conspicuousness, and, if applicable, on accessibility.

Monochrome Icons

HIGMonoIcons.png

  • Used for application toolbar actions, menus, and status and notifications. Also 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.
  • Color can be used for distinction (change of state, destructive actions, etc.).

Application icons

HIGAppIcons.png

  • Unique and easily recognizable.
  • Have the widest variation of color and visual style to represent the visual identity of the application.
  • When creating an system icon theme, respect trademarks by avoiding significant alterations to application icons.

Implementation

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.