About

Origins

“As with any art there is no denying that Oxygen was inspired by other works”

The Oxygen icon theme was started by David Vignoni during the first Appeal Project meeting held in Berlin on March 2005. The very first versions of the folder design, were following the Nuvola style, using vibrant colors, outlines and a cartoonish look and feel (Figure 1). Then it was decided to change everything and adopt a photo-realistic icon style, moving to a very high standard of graphics quality. The default size we would like for icon view is 128×128. With big icons in fact we do a good thing for usability purposes and at the same time make user eye happy to enjoy such nice graphics. These icons will be full SVG vector images, using alpha channels, translucency, embedded bitmaps to allow complex three dimensional effects, with highlights and shadows.
Figure 1
So yes, OS X Aqua style is inspiring and a reference on several issues mentioned later. Oxygen, however, does not intend to copy anything but rather to collect ideas for the ways that people present visual metaphors with an eye not only on artwork but also on usability and improve on these ideas.

Goals

“Make a break with the past and go in a new direction, leaving behind the cartoonish and childish look of previous graphics”

  • A well designed concept supports usability and accesability by learning from and planning for the uniqueness of being human.
  • Think! Being innovative and creative ensures our stake in the future.
  • Respect use case studies, better fullfill the needs of our entire business and enterprise users.
  • Really nice art, acceptance through beauty (sexy!) :-)

Back to top.

Concepts

“Oxygen includes a full set of icons with a distinct “design note” for each icon type while adhering to the over-all look-n-feel”

Using Form and Color

Improve identification of different icon types. In order to make the identification of different types of icons easier we have devised a scheme in which the different types have slightly different characteristics of shape, detail and color.

Back to top.

Shapes and Details

Mimetypes icons, represent files. Differently from most other desktop environments, KDE doesn’t change the document icons according to the applications used to open/view/play the file, i.e. There is only one document icon for MP3 files, doesn’t matter the application you use. To identify a document file in Oxygen, an identifying symbol is placed over the sheet icon. The symbol will be in most cases a very simple plain element, using only one color tone that is kept the same for all related document icons.
To help the user to identify what he’s looking for, color has a crucial role:

  • A color and design concept is used for each distinct (easily
    definable) logical set throughout the different icon types.
  • The symbols for rich media mimetypes like audio files or images, will have vibrant colors while non media rich mimetypes will use less saturated tonalities (Figure 2).
  • Documents related to the system or to configuration files, like “binary”, “ascii”, “log” have a more sober appearence.

Figure 2

Hardware icons, wants to be the more realistic, improving the association with real objects as they are usually seen by the user point of view. For this reason devices have a three-dimensional perspective, while media storage has straight on view from the top.

Actions, the icons that go on the toolbar, are all seen in a shelf position, and have a distinct 1px solid outline. To emphasize the shelf position and the bi-dimensional nature of the icon a shadow is placed under the icon. All elements in an icon should be grouped as one object (Figure 3). The outline should then be applied to this object, not the individual elements. All of the action icons are made in the 32×32 svg size and scaled to other sizes.
Figure 3

Back to top.

Colors

“Since color has a very important role in Oxygen, a consistent color palette was needed”

Oxygen has one color palette with two parts (Figure 4). “Normal” colors have sober tonalities of the most needed colors. These are used mostly for mimetypes, folders, system applications and actions. Vibrant colors are more saturated used to emphasize important action icons on a toolbar, for rich media mimetypes, for application icons and, generally speaking, used when there is need to focus the attention of the use on a particular element, helping the user to find his way by following a “subliminal” color language.
Figure 4

Back to top.

Terms of Use

All images on this page are released under the Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.