Piktogramme und Icons sind Bildzeichen, die unabhängig von Sprache und Kultur verständlich sind. Daher sind sie im Webdesign auch so wichtig. Denn schließlich ist das Web ja eine recht internationale Welt und Icons sind z.B. im Bereich Onlineshopping, Produkt-Support, Blog-Artikelformate oder Kontakt immer wieder ein bedeutendes Hilfsmittel für Webdesigner. Aus diesem Grund habe ich mich einmal etwas genauer mit der Entwicklung von Piktogrammen und Icons auseinander gesetzt, um so den wichtigsten Merkmalen für eine erfolgreiche Gestaltung näher zu kommen.

1. Die historische Entwicklung von Piktogrammen und Icons

Bildzeichen spielen in der Geschichte der Menschen schon sehr lange eine wichtige Rolle. Schließlich helfen sie Menschen unterschiedlicher Kulturen bei der Kommunikation miteinander. Icons und Piktogramme (das Wort Piktogramm setzt sich aus dem Lateinischen “pictus” für Bild und dem Griechischen “gramm” für Geschriebenes zusammen) sind Bildzeichen, die eine möglichst Kultur unabhängige Bedeutung haben sollen. Eine besonders wichtige Rolle spielen die Bildzeichen daher besonders im internationalen Handel und Verkehr. Zum Beispiel findest man internationale Bildzeichen z.B. auf Flughäfen, Bahnhöfen oder beim internationalen Transport von Gütern.

Icons und Piktogramme
Bildzeichen für die Orientierung auf Flughäfen.
Icons und Piktogramme
Bildzeichen auf Bahnhöfen.
Icons und Piktogramme
Verschiedene Bildzeichen für den Transport von Paketen.

Einen richtigen Piktogramm-Kult haben die Olympischen Spiele ausgelöst. Das erste Piktogramm-Set für die Olympischen Spiele wurde 1964 bei den Spielen in Tokyo gestaltet, daraufhin folgten die ebenfalls sehr berühmten Olympia-Piktogramme für die Spiele in München 1972 gestaltet des Grafikers Otl Aicher (Direktor der HfG Ulm 1962-64. Otl Aicher hat u.a. auch das Logo der Lufthansa gestaltet). Seitdem wurden die Olympia-Icons immer wieder neu interpretiert und modernisiert, wie z.B. für die olympischen Spiele in Beijing 2008.

Icons und Piktogramme
Ausschnitt aus der Piktogramm-Kollektion für die olympischen Spiele von Tokyo 1964.
Icons und Piktogramme
Verschiedene Piktogramme von Otl Aicher. (Flickrbild von EveryDayLifeModern)
Icons und Piktogramme
Piktogramme für die Olympischen Spiele Beijing 2008. (Flickrbild von Duet G.)

2. Wichtige Merkmale von Icons und Piktogrammen

Wenn man sich etwas genauer mit dem Sinn und den Hintergründen bei der Verwendung Bildzeichen auseinander gesetzt hat, kann man folgende wichtige Merkmale für die Gestaltung gelungener Bildzeichen zusammen fassen:

  • Die Bedeutung eines Piktogramms und Icons sollte möglichst ohne den Zusatz von Text verständlich sein.
  • Bildzeichen sollten international und unabhängig von einer jeweiligen Kultur verstanden werden können.
  • Bildzeichen sollten möglichst auf unnötige Gestaltungselemente verzichten können.
  • Icons und Piktogramme sollten vor allem der Information und Navigation dienen. Im Gegensatz zu Signets oder Markenzeichen, die der Unterstützung einer Corporate Identity dienen.
  • Icons und Piktogramme sollten möglichst innerhalb eines Gestaltungssystems erstellt werden, da so leicht mehrere einheitliche Icons für ein Set erstellt werden können.

Dieses tolle YouTube-Video von iconwerk erklärt sehr anschaulich die wichtigsten Kriterien bei der Gestaltung von Icons:

3. Icons im Webdesign

Im Webdesign sind Icons ebenfalls nicht mehr wegzudenken und die praktischen Bildzeichen bieten ein wichtiges Hilfsmittel bei der Gestaltung eines übersichtlichen und international verständlichen Webseiten-Navigation.

Besonders beliebt sind Webdesign-Icons bei Onlineshops, für die Verlinkung auf Social Media Plattformen, bei der Navigation auf Blogs (Tag-Icons, Kommentar-Icons, Artikel-Formate etc,) oder auch auf Kontaktseiten.

Beim Einsatz von Icons im Webdesign ist es ebenfalls hilfreich, ein einheitliches Icon Set innerhalb eines Designs zu verwenden. Natürlich kannst du ein eigenes Icon-Set für eine Webseite erstellen, es gibt aber auch einige sehr schöne Icon-Sets als Freebies oder Premium-Set zu kaufen:

  • Picons Icons: verschiedenste hochwertige Premium Icon-Sets und ein Freebie Social Media Icon Set.
  • The Nounproject: Icon-Sammlung mit immer neuen Freebie-Icons (jeweilige Lizenz der Icons beachten)

Wie gefallen dir Icons zur unterstützenden Navigation auf Webseiten? Kennst du weitere hilfreiche Quellen und Infos zum Thema Icons oder weitere schöne Icon-Sets zum downloaden? Über dein Feedback und weitere Tipps freue ich mich sehr!