Eine Seite des Sächsischen Bildungsservers
Zurückbutton Link zur Begriffdefinition Link zum Begriff Signet Link zu den verschiedenen Anordunungsarten
Link zur Bedeutung der Fabe im Logos Link zur Namensvergabe im Logos - dem Layout
Link zum Grundaufbau eines Logos - dem Layout
  1. Einsatzvarianten von Icons
  2. Erkennungskette für Icons
  3. Darstellungformen von Icons
  4. Gestaltungselemente für Icons
    • Formen
    • Farben
Einsatzvarianten von Icons

Damit Icons funktionieren, müssen sie „lesbar“ sein. Das bedeutet, dass die Funktion oder Operation die das Icon auslöst auf einen Blick erfassbar ist.

Folgende Einsatzvarianten von Icons unterscheidet man:

Variante

Beispiel

Bemerkung

Beschriftung und Icon für eine Aktion laufen parallel nebeneinander z.B. Menü: Datei - Speichern und das Icon

Icon besitzt die Funktion des meist schnelleren und komfortableren Ausführens der Aktion.
Icon steht alleine für eine Aktion z.B. Zeichenwerkzeug Bleistift im Photoshop

Icon muss höchsten Ansprüchen gerecht werden, da die Aktion sich ausschließlich über das Icon erschließt!
Icon und Beschriftung bilden eine Einheit z.B. Icon für Microsoft Word

Icon muss keinen hohen gestalterischen Anspruch erfüllen, da sich die Aktion auch über die Beschriftung erschließt.

Hochbutton

Erkennungskette für Icons

Die Bedeutung eines Icons erschließt sich stets über folgende logische Kette:

Icon + Kontext + Betrachter => Bedeutung

Fehlt ein Glied der Kette oder ist anders, geht meist die Bedeutung verloren. Legt man z.B. das Icon für die Zentrierung von Texten in die Symbolleiste einer Spieleoberfläche, kann es nicht gedeutet oder interpretiert werden.

Hochbutton

Darstellungformen von Icons

Wie sollte ein Icon eine bestimmte Aktion darstellen? Auch hier gibt es verschiedene Möglichkeiten, die weitestgehend von der Art der darzustellenden Aktionen abhängig sind:

Direkte Darstellung

Gegenstand wird auf ein Minimum an Merkmalen reduziert und als grafisches Symbol dargestellt.
z.B. Zeichenwerkzeug - Bleistift

Indirekte Darstellung

Aktion wird über ein zur Bearbeitung verwendetes Werkzeug oder einer verwandten Struktur dargestellt.
z.B. Schere für Aktion Ausschneiden und z.B. Ordner für ein Verzeichnis

Freie Darstellung

Icondarstellung hat mit der Aktion nichts gemeinsam. Es bedarf hier eines Lerneffektes beim Anwender. Der Erkennungswert wird durch Training erreicht.
z.B. Icon für Macromedia Flash 5.0
Hochbutton
Gestaltungselemente für Icons

Formen

Linien

Waagerechte und senkrechte Linien sind total glatt und ohne jeglichen Pixeleffekt. Sie wirken jedoch sehr statisch und vermitteln keine Dynamik im Icon. Deshalb sollten waagerechte und senkrechte Linien in Icon eher sparsam eingesetzt werden.
Diagonale Linien (Linien im 45° Winkel) sehen auch relativ glatt aus. Sie müssen optisch breiter gezeichnet werden, damit die gleiche Breite wie bei waagerechte und senkrechte Linien entsteht.
Schräge Linien im 30° oder 60° Winkel bilden einen Kompromiss zwischen Glätte und Pixelstruktur. Bei diesen Linien entsteht ein sich wiederholendes Pixelmuster. Bei freien Linen wechselt das Pixelmuster ständig. Diese Linien wirken seht unruhig. Sie sollten sehr sparsam und immer im Zusammenhang mit einer Füllung oder Struktur eingesetzt werden.

Flächen

Kreise oder Ovale sind schwierige Formen in der Pixelgrafik. Bei Kreisen entstehen im quadratischen Pixelraster stets Kreisabschnitte mit geraden Linien. Je größer der Kreis ist, desto ähnlicher ist die Pixelform dem Kreis. Kleine Kreise sind oft von Vierecken mit abgerundeten Ecken nicht zu unterscheiden.
Vierecke mit abgerundeten Ecken sind im Pixelgrafikraster relativ leicht zu erzeugen. Mit größer werdenden Radius wirken allerdings die Linienabschnitte an den Rundungen dünner als die geraden Abschnitte.
Freie Flächen haben wie freie Linien eine sehr starke und auffällige Pixelstruktur. Diese sollte durch Füllung, Struktur oder Antialiasingeffekte gemildert werden.

Hochbutton

Farbe

Gegenstand des Themas Farbe sind nicht die verschiedenen Farbmodelle oder die Wirkungen der Farbe. Zu den Wirkungen von Farben wurden im Grafikmodul Signet/Logo schon Angaben gemacht, die ich für das Iconmodul einfach übernommen habe. Siehe hier!

Heute werden Icons für eine Aktion meist in mehreren Varainte angelegt. Trotz der großen farblichen Möglichkeiten der meisten Computer wird die Anzahl der in einem Icon verwendeten Farben von den meisten Herstellern begrenzt. Üblich sind heute noch für ein Icon folgende Farbvarianten anzulegen:

Schwarzweiß

(zweifarbiges Icon)

24 Farben (16 Farben)

28 Farben (256 Farben)

Hersteller von Betriebssystemen wie Windows oder MacOS haben sich dabei auf bestimmte Farben festgelegt:

Hochbutton Logo von f-Design