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

Jump to: navigation, search
(Breeze Icon Design - for 22 and 16 px)
(15 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{#externalredirect: https://hig.kde.org/style/icons/index.html<nowiki/>}}
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 [[KDE_Visual_Design_Group/HIG/IconsAndText|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.
:# [[File:Icon_Grey1.png|40x40px]] [[KDE_Visual_Design_Group/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]] [[KDE_Visual_Design_Group/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]] [[KDE_Visual_Design_Group/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]] [[KDE_Visual_Design_Group/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]] [[KDE_Visual_Design_Group/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]] [[KDE_Visual_Design_Group/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 [[KDE_Visual_Design_Group/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.
===Breeze Icon Design - Sizes===
Breeze icons come in a variety of sizes depending on their context. The following lists the current sizes in use:
***toolbar/ - 22x22
***toolbar-small/ - 16x16
***preferences/ - 32x32
***software/ - 48x48
***software-medium/ - 22x22
***software-small/ - 16x16
***system-power-actions/ - 48x48
***system-session-actions / - 48x48
***start-menu/ - 32x32
***start-menu-small/ - not used in Plasma
***hardware/ - 48x48
***sidebars/ - 16x16
***file-types/ - 64x64
***file-types-small/ - 16x16
***dialogs/ - 64x64
***im-status/ - 16x16
***panel/ - 22x22
***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.
<div style="text-align: center;">
''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.
<div style="text-align: center;">
''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:
<div style="text-align: center;">
''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.''
<div style="text-align: center;">
''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.''
===Breeze Icon Design - for 22 and 16 px===
These are the simplest of icons in terms of labor. When doing these icons check the file index.theme located in the root of the Breeze folder for hints of where the icon will be used.
* These icons don't have any details other than their shapes.
Icons in these sizes use 1 px strokes and sometimes fill on some areas depending on the graphic.
<div style="text-align: center;">
''Mix of 1 px strokes and fill areas plus symbol indicating an action or status.''
Generally when adding symbols to graphics such as "+", "-", etc. they should be placed at the bottom right corner of the bigger graphic and there must be 1 px of blank space between each element.
*The symbol should have a size of 5 px minimum.
===Breeze Icon Design - 32 and 48 px===
Most of the icons this size (32 px) were used for System Settings but they're also used by Kickoff for the app categories. These icons make use of smooth, vibrant, fresh and aligned elements colored by gradients and they mostly consist of three parts: a background, a front symbol and a long shadow.
These icons don't have a particular shape, they simply fit together despite their differences. Shapes can be either squares, rectangles, circles, have resemblance of real-life objects, etc.
Icons do have a particular element in common: a long shadow.
The front symbol is what dictates the long shadow, the shadow always has the same gradient, no exception. And it takes up the whole object even if said object has only strokes and no fill.
The angle of the long shadow is 45° towards the bottom right of the symbol.
Always use the grid when doing these shadows, this is very important.
The difference between 32 and 48 px icons is a shadow at the bottom of the 48 px icons and a bit more of detail. Since there more space for more pixels we've used them. 48 px icons can have more long shadows, and they also have a 1 px hard shadow at the bottom, whether they're rectangular/squares or circles.
48 px icons have a bit more detail to them.
Application icons are at 48x48 px, an important thing though is that when doing an application icon you want to keep established brands mostly intact or at least that they don't differ too much from the original.
And for apps that are free software try to come up with something creative, a better representation of what the software does, a feature an UI element, etc. The last thing we want is to keep using the same old unrepresentative icon.
VLC and Konsole. Classics, refreshed.
* Use icons available from the system icon theme whenever possible. Avoid using custom icons.
* Follow the [[KDE_Visual_Design_Group/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].
[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 13:31, 4 December 2019

This page was last edited on 4 December 2019, at 13:31. Content is available under Creative Commons License SA 4.0 unless otherwise noted.