<page xmlns="http://projectmallard.org/1.0/" type="topic" id="icons-and-artwork" xml:lang="de">

  <info>

    <credit type="author">

      <name>Allan Day</name>

      <email>aday@gnome.org</email>

    </credit>

    <credit type="author">

      <name>Jakub Steiner</name>

    </credit>

    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>

    <desc>Auswahl und Erstellung von Symbolen.</desc>   

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Christian Kirbach</mal:name>

      <mal:email>christian.kirbach@gmail.com</mal:email>

      <mal:years>2014</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Mario Blättermann</mal:name>

      <mal:email>mario.blaettermann@gmail.com</mal:email>

      <mal:years>2016</mal:years>

    </mal:credit>

  </info>

<title>Symbole und grafische Gestaltung</title>

Symbole spielen eine bedeutende Rolle in der Benutzeroberfläche: Die Auswahl eines korrekten Symbols ist daher unerlässlich, um dafür zu sorgen, dass Ihre Anwendung gut benutzbar ist. Ein eindeutiges Symbol ist außerdem ein essenzieller Teil jeder Anwendung und entscheidend für deren Identität.

<section id="using-icons">

<title>Verwendung von Symbolen in Ihrer Benutzeroberfläche</title>

Es gibt viele Situationen, in denen Sie zwischen einem Symbol oder einer Textbeschriftung entscheiden müssen, insbesondere für Knöpfe. Symbole haben den Vorteil, dass sie kleiner sind und deren Inhalte nicht übersetzt werden müssen. Gleichzeitig kann die inkorrekte Verwendung eines Symbols dazu führen, dass Ihre Benutzeroberfläche schwer (oder sogar gar nicht) verständlich ist.

<list>

<item>
Verwenden Sie Symbole nur, wenn ihre Bedeutung gemeinhin bekannt ist. Falls ein solches Symbol nicht zur Verfügung steht, sollten Sie besser eine Textbeschriftung verwenden

<list>

<item>
Convention establishes which icons will be recognized. If you are in doubt, stick to icons which are frequently used in other applications.
</item>

<item>
Consider which icons will be meaningful in the specific context of your application - users of specialist tools will often be familiar with domain-specific symbols.
</item>

</list></item>

<item>
Remember that some icons are only meaningful alongside other icons of the same type. For example, a media icon for stop is simply a square, and may not be identified as a stop icon without other media controls (like play, pause, or skip) being visible close by. Likewise, the icon to remove an item from a list is a subtract symbol (ie. a single line), and will not be recognizable without a corresponding “plus” add icon.
</item>

</list>

</section>

<section id="stock-icons">

<title>Choosing stock GNOME icons</title>

GNOME stellt eine breite Auswahl an Standardsymbolen bereit. Diese sollten verwendet werden, wo immer es möglich ist. Versuchen Sie, eigene Symbole zu vermeiden, es sei denn, dies ist unbedingt notwendig.

Follow the icon naming specification when selecting which icons to use - the name of the icon should reflect what the icon is intended to communicate. This is important for those using a screen reader.

Sie können den Symbolbrowser von GTK+ verwenden, um empfohlene Symbole zu suchen.

<section id="color-vs-symbolic">

<title>Farbige im Vergleich zu symbolischen Symbolen</title>

GNOME 3 provides two types of icon: full-color and monochrome symbolic icons. The guidelines in this HIG indicate when to use which type of icon. The following is a a general guide.

Farbige Symbole sollten verwendet werden für:

<list>

<item>
Geräte
</item>

<item>
Dateitypen/MIME-Typen
</item>

<item>
Anwendungssymbole (Starter)
</item>

</list>

All other icons should use the symbolic icon style. In addition, symbolic icons should always be used inside:

<list>

<item>
Knöpfen
</item>

<item>
Listen
</item>

<item>
Eintragsfeldern
</item>

<item>
Wenn der Hintergrund halbtransparent ist (zum Beispiel bei Überlagerungen oder Vollbildsteuerungen)
</item>

</list>

</section>

</section>

<section id="application-icons">

<title>Anwendungssymbole</title>

Every application should have a unique and beautiful application icon. It is the face of the application, and the first visual element a user sees when browsing for new applications. The <link xref="application-basics">application basics page</link> includes details on what an application is, and when to provide an application icon.

Because application icons are presented at larger sizes, legacy Tango styled 48x48 px or SVG icons no longer suffice (lacking detail). It is essential your application has a 256x256 px icon. With the advent of high-DPI displays, a 512x512 px variant is recommended.

<media type="image" mime="image/png" src="figures/icons/sizes.png"/>

While not as critical, there are still areas where application icons are presented at a small size. To keep the icon sharp and well defined, a specific rendering is required to sizes of 48x48 px, 32x32 px, 24x24 px and 16x16 px. Many GNOME icons also ship a 22x22 px size for legacy reasons, but that isn’t required.

<media type="image" mime="image/png" src="figures/icons/sizes-small-24.png"/>

To maintain crispness, a lot of detail is discarded for the low resolution variants and a 1px stroke is used to outline the silhouette of the object.

More information on designing an application icon can be found below, in the custom full-color icon section.

</section>

<section id="custom-symbolic-icons">

<title>Benutzerdefinierte symbolische Symbole</title>

Symbolic icons have a simple form and are drawn within a 16x16 pixel grid. They are then programmatically scaled and colored within the user interface itself.

<list>

<item>
Identify a single property when looking for an appropriate metaphor for an icon, and focus on what distinguishes the idea you want to communicate. For example, when describing an action to be performed on an image, it isn’t necessary to repeat the idea of an image in every icon. Instead, focus on what is distinct about each action (for example: rotate, tag, align).
</item>

<item>
Vermeiden Sie perspektivische Darstellungen in symbolischen Symbolen, bleiben Sie stattdessen bei einer strikten rechtwinkligen Ansicht.
</item>

<item>
Ausgefüllte Formen sind in der visuellen Wahrnehmung des Benutzers im Allgemeinen schneller zu erfassen als einfache Umrandungslinien.
</item>

<item>
Symbolic icons are recolored at runtime to match the context, very much like a piece of text. While there are ways to “shade” parts of an icon by using opacity or creating duotone/pattern dithering, try avoiding these as much as possible.
</item>

<item>
When a metaphor relies on the negative space, make sure it will work with the colors inverted. For example a camera lens spec/highlight will only work if lighter than the lens itself.
</item>

</list>

<media type="image" mime="image/svg" src="figures/icons/inverting.svg"/>

<section id="size-and-grid">

<title>Größe und Gitter</title>

While the icons are scalable and should work in any size, the basic canvas size is 16x16 grid units. You have the whole canvas to fill, but note that a filled rectangular object will appear stronger/larger when placed next to items that only use thinner strokes. Try to keep the contrast of your whole set.

</section>

</section>

<section id="custom-full-color-icons">

<title>Eigene farbige Symbole</title>

Full-color icons are drawn and rendered at a variety of preset sizes.

<section id="perspective">

<title>Perspektive</title>

Most icons can be executed best by using the “on the table” perspective, as if the observer was standing in front of the object and looking slightly down on it. Many icons can be rendered with a simple “straight on” or “on the shelf” perspective, with the observer looking directly at the object at eye level.

</section>

<section id="palette">

<title>Farbpalette</title>

Verwenden Sie die Tango-Farbpalette, wenn Sie farbige Anwendungs- oder Gerätesymbole entwerfen.

Butter

<media type="image" mime="image/svg" src="figures/icons/palette/butter.svg"/>

Pflaume

<media type="image" mime="image/svg" src="figures/icons/palette/plum.svg"/>

Orange

<media type="image" mime="image/svg" src="figures/icons/palette/orange.svg"/>

Scharlachrot

<media type="image" mime="image/svg" src="figures/icons/palette/scarlet-red.svg"/>

Schokolade

<media type="image" mime="image/svg" src="figures/icons/palette/chocolate.svg"/>

Aluminium

<media type="image" mime="image/svg" src="figures/icons/palette/aluminium1.svg"/>

Chamäleon

<media type="image" mime="image/svg" src="figures/icons/palette/chameleon.svg"/>

<media type="image" mime="image/svg" src="figures/icons/palette/aluminium2.svg"/>

Himmelblau

<media type="image" mime="image/svg" src="figures/icons/palette/sky-blue.svg"/>

You are free to use different shades of these colors depending on the desired material effect. However, these primary colors are a good baseline to start from. All major libre graphics packages come with the Tango palette pre-installed.

</section>

</section>

<section id="see-also">

<title>Siehe auch</title>

<link href="http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines">Tango Icon Guidelines</link>

</section>

</page>