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

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Guidelines)
(HIG moved to community)
 
(32 intermediate revisions by one other user not shown)
Line 1: Line 1:
__NOTOC__
+
{{ Moved To Community | KDE_Visual_Design_Group/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.
 
 
 
== 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].
 
** 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'').
 
** Define metaphors independent from language and culture.
 
** Make icons simple.
 
* Colorize icons according to the meaning but in respect to application’s colors.
 
* Don’t use animated icons.
 
* Test your icon set on strength of association, discriminatory power, conspicuousness, and, if applicable, on accessibility.
 
 
 
==Implementation==
 
* http://websvn.kde.org/trunk/kdesupport/oxygen-icons/
 
* https://mail.kde.org/mailman/listinfo/kde-artists
 
 
 
==References==
 
[1] http://user-prompt.com/semiotics-in-usability-guidelines-for-the-development-of-icon-metaphors/
 
 
 
[[Category:Usability]][[Category: Presentation]][[Category:Layout]]
 

Latest revision as of 11:26, 4 August 2016

This page is now on the community wiki.


This page was last edited on 4 August 2016, at 11:26. Content is available under Creative Commons License SA 4.0 unless otherwise noted.