|
|
| (18 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. 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 [[Projects/Usability/HIG/IconsAndText|icons with text]]
| |
| * 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 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.
| |
| :# [[File:Icon_Grey1.png|40x40px]] [[Projects/Usability/HIG/Color|Icon Grey]] - Color used for icons in a normal state and non destructive actions e.g.: back, forward, ok, home.
| |
| :#[[File:Icon_Red.png|40x40px]] [[Projects/Usability/HIG/Color|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.
| |
| :#[[File:Icon_Orange.png|40x40px]] [[Projects/Usability/HIG/Color|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.
| |
| :#[[File:Icon_Blue.png|40x40px]] [[Projects/Usability/HIG/Color|Icon Blue]] - Color used in addition to color #1. Used to distinguish icons that involve the action "select" or "insert".
| |
| :#[[File:Icon_Yellow.png|40x40px]] [[Projects/Usability/HIG/Color|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.
| |
| :#[[File:Icon_Green.png|40x40px]] [[Projects/Usability/HIG/Color|Icon Green]] - Color used in addition to color #1. Used to distinguish icons that involve "connected", "secure" or "successful" actions.
| |
| | |
| === Colorful icons ===
| |
| [[File:Sample color icons.png]]
| |
| * Use colorful icons for applications, folders, mimetypes and devices.
| |
| * For Breeze icons, use colors from the [[Projects/Usability/HIG/Color|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==
| |
| * Use icons available from the system icon theme whenever possible. Avoid using custom icons.
| |
| * Follow the [[Projects/Usability/HIG/IconTheme|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 [http://websvn.kde.org/trunk/kdesupport/oxygen-icons/ 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 [http://forum.kde.org/viewforum.php?f=285 KDE Visual Design Group Forum].
| |
| | |
| ==References==
| |
| [1] http://user-prompt.com/semiotics-in-usability-guidelines-for-the-development-of-icon-metaphors/
| |
| | |
| [[Category:Usability]][[Category: Presentation]][[Category:Layout]]
| |
