Icon-Design – das sind die wichtigsten Fakten für Dein Web oder App-Icon

Eine Sache oder Aktion in einer minimalistischen Grafik darzustellen, ist manchmal gar nicht so einfach. Mit nur wenigen Strichen muss gestaltet werden, was der Betrachter, auch in kleinster Darstellung sofort erkennen kann. Ein professionelles Icon-Design schafft es, dem User die Navigation auf einer Webseite oder Applikation zu erleichtert und ihn Schritt für Schritt durch die Seiten zu begleiten. Doch was muss beim Icon Erstellen beachtet werden? Wofür braucht man App-Icons überhaupt und worin liegt der genaue Unterschied zum Logo?

Unterschiede Icon-Design und Logo

Das Icon-Design ist, wie bereits erwähnt, eine minimalistische Grafik. Hier finden man schon mal eine Gemeinsamkeit zum Logo, welches im Optimalfall zwar mit ebenso wenigen Elementen in der Bildmarke verdeutlichen kann, worum es sich zum Beispiel bei einer Firma handelt. Aber hier hören die Gemeinsamkeiten von Icon-Design und Logo-Design auch schon auf.
Während Icons so plakativ wie möglich sein sollten, damit auf einen Blick klar ist, welche Bedeutung sich hinter dem Icon verbirgt, haben Logos doch etwas mehr Spielraum. Diese müssen hauptsächlich im Gedächtnis bleiben und das geht ebenso durch eine starke Bildmarke aus Initialen oder einem abstrakten Element. Icons besitzen diesen Luxus nicht. Sie müssen sofort und unmissverständlich klar machen, wofür sie stehen. Wörter oder Buchstaben haben hier in der Regel nichts verloren. Logos und Icons sind beide jeweils grafische Elemente, die etwas repräsentieren. Während Logos aber auch mal zum Nachdenken anregen dürfen, muss das Icon dagegen ein idiotensicherer Wegweiser sein.

Nachfolgend sieht man auf der linken Seite das vorgegebene Logo-Design für Dr. Kluge Seminare und rechts das daraus entstandene Icon-Design, das speziell für die Facebook-Seite des Unternehmens erstellt wurde. Wie man sehen kann, greift das Icon die Bildmarke des Logo-Designs auf, womit ein Wiedererkennungswert geschaffen wird und eine klare Verbindung zum Logo-Design gesetzt wird.

Wofür braucht man Icon-Designs?

Wenn wir im Web surfen, werden wir ständig mit Icon-Designs konfrontiert. Das fängt schon mit den Elementen auf dem eigenen Desktop an. Man sieht anhand des Icons sofort, ob es sich um ein Textdokument, einen Ordner oder eine Musikdatei handelt. Icons vereinfachen uns den Umgang mit unseren Daten und erleichtern die Navigation. Auf Webseiten findet man sich besser zurecht, wenn ein Text grafisch begleitet wird. Bilder und Icons werden schneller wahrgenommen, als Textinhalte. Bevor wir also lesen, welchen Service zum Beispiel ein Unternehmen anbietet, nehmen wir es anhand der unterstützenden Grafiken wahr. Diese helfen uns sowohl als Wegweiser auf der Webseite, als auch in der Menüleiste.

 

App Icon-Designs sind außerdem international verständlich. Der Hörer, der als Symbol für das Telefon steht oder der Briefumschlag, der die Kontaktaufnahmen per Mail symbolisiert, erfordern keine Lese- oder bestimmte Sprachkenntnisse. Diese Zeichen bestehen aus den typischsten Charakteristiken eines Objekts, die weltweit das gleiche bedeuten. Sie sind also auch Hilfestellungen. Darüber hinaus wirken Oberflächen und Apps aufgeräumter, wenn teilweise Begriffe, so wie Themen durch Icons ersetzt oder wie hier im Beispiel von YouTube, begleitet werden.

Was in dieser Grafik auch klar wird, ist die Integration des Icon-Designs in das Corporate-Design von YouTube, welches primär die Farben Rot, Schwarz und Weiß verwendet und sekundär verschiedene Grautöne. Damit die Icon-Designs also wahrgenommen werden, aber nicht stören, sollten sie passend zum Corporate Design gestaltet werden. Achte darauf, dass das Layout der Webseite harmonisch bleibt.

Was muss beim Icon Erstellen beachtet werden?

Wenn es an das Icon Erstellen geht, ist es praktisch, erst einmal alle Ideen zu Papier zu bringen, die einem durch den Kopf schwirren, denn es gibt verschiedene Arten, ein Objekt darzustellen. Skizzen helfen, sich an die beste Darstellung heranzutasten. Kulturelle Unterschieden muss man dabei jederzeit im Hinterkopf behalten. Da App-Icons ja international funktionieren sollen und manche Gegenstände von Land zu Land verschieden sind, wie zum Beispiel das Aussehen eines Briefkastens, muss die Umsetzung den kleinsten gemeinsamen Nenner beinhalten. Einen Briefumschlag statt eines Briefkastens, ist darum die bessere Wahl für das Icon zur Kontaktaufnahme per Mail, denn ein Briefkasten sieht in Deutschland anders aus, als beispielsweise in Kanada oder Ägypten.
Manche Icons müssen außerdem auf 24×24 Pixeln dargestellt werden, in einer anderen Anwendung wiederum sollten sie aber auch in einer viel größeren Darstellung funktionieren, ohne dabei zu verschwimmen. Die Icon-Designs vektorbasiert zu erstellen, ist hierfür die einfachste Lösung. In Pixeldateien können diese dann immer noch umgewandelt werden.

Verschiedene Designstile beachten: modernes oder flat Icon-Design?

Bei der Icon Gestaltung, muss man sich neben dem Designelement, auch Gedanken darüber machen, in welchem Stil nun gestaltet werden soll. Dabei hat man hauptsächlich zwischen „flat“ und „modernem“ Icon-Design die Qual der Wahl. Klar ist, der Stil muss zum Corporate Design passen. Ist das Logo modern und mit Effekten versehen, die ihm Tiefe verleihen, dann passen auch Icons dazu, die ebenfalls diese Merkmale haben. Den Unterschied zwischen flat und modern sieht man besonders in der folgenden Grafik, bei der links das Icon flat, also flach ist und daneben in modernem Stil, mit mehr Tiefe, umgesetzt wurde.

Flat ist außerdem die ursprüngliche Darstellungsvariante aller Icons, von der sich allmählich realistischere Designstile entwickelt haben. Mittlerweile sind beide Stile gleichermaßen gefragt.

Fazit

Icon-Designs sind ein tolles Hilfsmittel auf Webseiten, Applikationen oder auch Programmoberflächen. Richtig ausgearbeitete Icons sind international verständlich und sind auch in kleinster Darstellung genau in Ihrer Bedeutung erkennbar. Wichtig dabei ist, dass sie mit dem bestehenden Corporate Design harmonieren. So dienen sie optimal als praktische Wegweiser durch unseren digitalen Alltag.