Podcast
Videos
September 6, 2022
Nov 2022
4 Min

Wie kreire ich ein App-Icon mit Wiedererkennungswert?

Es geht um den ersten Eindruck. Es geht um den täglichen Gebrauch. Es wird Ihr Markenzeichen sein: das App-Icon. In den Stores sehen potentielle Nutzer es zuerst, auf dem Home Screen müssen aktive Nutzer jedes Mal darauf klicken, um Ihre App zu öffnen. Wenig anderes wird so sehr mit Ihrer App identifiziert werden. Die Assoziationen, die das Icon hervorruft, können die Downloadrate Ihrer App maßgeblich beeinflussen. It better be good.

Aber was heißt hier "gut"? Oder sogar "großartig"?

Im Prinzip ist es ganz einfach: Ein gelungenes App-Icon ist schlicht, weltweit verständlich und bietet einen hohen Wiedererkennungswert. So wie Ihr App-Name - bloß graphisch umgesetzt. Nur: Grau ist alle Theorie. Es ist die Umsetzung, auf die es ankommt. Und die stellt auch versierte Designer häufig vor Herausforderungen. Icon-Gestaltung ist ein kreativer Prozess und kreative Prozesse benötigen Zeit. Das ist die Grundlage jedes guten App-Icon-Designs. Daneben gibt es aber natürlich noch ein paar Richtlinien, die man beachten sollte.

Das Wichtigste zuerst: App User suchen in den Stores nach funktionalen Apps. Klingt banal? Dennoch sollte das Icon genau das kommunizieren - die Hauptfunktion. Das Icon muss auf den ersten Blick verdeutlichen, wie die App dem User nutzen wird.
Aber wie bitteschön geht das? Wie verdeutlicht ein kleines Bild innerhalb von Sekundenbruchteilen, was das Programm dahinter kann?

Einfachheit ist hierfür ein Schlüsselfaktor. Konzentrieren Sie sich auf die Hauptfunktion. Alles andere, was die App sonst noch kann, lässt sich anderweitig in Szene setzen - durch Screenshots, Video oder Beschreibung. Beim ersten Blick zählt die Fokussierung auf eine einzelne Aufgabe. Das gelingt oft am Besten durch ein einziges, simples Element, das die Hauptfunktion der App repräsentiert. Bei sehr bekannten Unternehmen, die auf eine bestimmte Dienstleistung spezialisiert sind, kann auch ein Bezug zum Unternehmen sinnvoll sein. Ein gutes Beispiele ist hierfür z.B. die Bahn-App: Ein Blick auf das DB-Logo verrät, dass diese App ihre User bei Zugreisen innerhalb Deutschlands unterstützt - mit Tickets, Fahrplänen und aktuellen Informationen. Mehr braucht es nicht.

Weniger ist mehr gilt auch beim Text. Bildsprache ist leicht verständlich und eingängig. Text hingegen erfordert Aufmerksamkeit. Je weniger Text das Icon also enthält, desto besser. Wenn Textelemente sich jedoch partout nicht vermeiden lassen, gilt es, den Text so reduziert und so gut lesbar wie möglich zu integrieren. Immerhin ist das Format winzig - und Ihr Icon wird sowieso immer in Kombination mit dem App-Namen erscheinen: Im App-Store steht er daneben, auf dem Home-Screen klein darunter. Es gibt also keinen Grund, ihr Icon mit Text oder dem App-Namen zu überfrachten.

Auch farblich ist Zurückhaltung angesagt: Mit ein bis drei Farben lässt sich schon viel machen. Alles andere wirkt schnell unprofessionell oder überdreht. Ausnahmen bestätigen natürlich die Regel. Insbesondere in den Kategorien Games oder Familie darf es ruhig etwas bunter zugehen. Doch auch hier kann man mit Farbreduktion viel erreichen, wie "Pokémon Go" oder "DieMaus" eindrucksvoll belegen.

Die beiden zuletzt genannten Apps sind auch ein schönes Beispiel für den Einsatz von Key Visuals. Was könnte besser für Pokémon Go stehen, als der Ball, mit dem der Spieler seine Pokémons fängt? Besonders effektiv sind personalisierte Key Visuals. Die Maus wurde eben schon erwähnt, aber auch Duo, die Eule von Duolingo, verdeutlicht, wie sehr das Kindchenschema zieht und zur Identifikation mit der App einlädt.

Wenn dann auch noch das Icon-Design zur App passend gestaltet ist, kann schon fast nichts mehr schief gehen. Das Icon sollte den User darauf vorbereiten, wie die App selbst aussieht. Harmonieren Stil, Farbwelt und Formen des Icons mit denen der App, entsteht eine nahtlose User Experience ohne unangenehme Brüche.

Nahtlos sollte auch der Wechsel zwischen Geräten stattfinden. Um den Wiedererkennungswert zu sichern, empfiehlt es sich, das gleiche Icon für alle Geräte und alle Auflösungen in der großen und kleinen Version zur Verfügung zu stellen. Gerade mit Blick auf die kleinste Auflösung von 57 × 57 Pixel gilt: sparsam mit Details! So bleibt Ihr Icon immer gut erkennbar. Für iOS müssen zudem noch die Ecken abgerundet werden. Die exakten Maße zur Orientierung finden sich online in Grid-Templates.

Und damit ihr App-Icon richtig universell wird: Testen Sie, wie bei den Namen auch, ob ihr Icon in allen gegenwärtigen und zukünftigen Zielmärkten verstanden wird - oder ob es negative Assoziationen hervorrufen könnte. Hilfe durch Testpersonen aus den entsprechenden Zielländern ist hierfür unabdingbar. Und, was man besonders gerne übersieht: Testen Sie Ihr Icon auf verschiedenen Hintergründen in den entsprechenden Größen auf aktuellen Endgeräten. Ist es auch vor einem Fotohintergrund gut erkennbar? Wie stark hebt es sich von den Icons der Konkurrenz ab? All das lohnt es sich, zu berücksichtigen.

Letztendlich geht es ums Experimentieren. Nehmen Sie sich Zeit, spielen Sie mit verschiedenen Ideen und nutzen Sie das Feedback von Testpersonen. Wenn Sie Inspiration brauchen, stöbern Sie in den infrage kommenden Kategorien in den App Stores oder recherchieren Sie im Netz - z.B. hier oder hier. Oder, Sie beauftragen gleich einen Profi - zum Beispiel uns. ;)

Andreas Link
Andreas Link
Anh Dung Pham
Anh Dung Pham
Cihat Gündüz
Cihat Gündüz
Andreas Link
Ekrem Sentürk
Eva Maria Stock
Eva-Marie Stock
Andreas Link
Giulia Maier
Inken Marei Kolthoff
Inken Marei Kolthoff
Janina Baumann
Janina Baumann
Janina Bokeloh
Janina Bokeloh
Jeanette Schmidt
Jeanette Schmidt
Jens Krug
Jens Krug
Kajorn Pathomkeerati
Kajorn Pathomkeerati
Karl Barth
Karl Barth
Kay Dollt
Kay Dollt
Murat Yilmaz
Murat Yilmaz
Thorsten Hack
Thorsten Hack
Thorsten Hack
Thorsten Hack
Inken Marei Kolthoff
Cynthia Murat
Inhaltsverzeichnis

Weitere Artikel

German Design Award 2018 - Wir sind nominiert!
Janina Baumann
26.11.2022
2 Min

German Design Award 2018 - Wir sind nominiert!

Wir freuen uns bekannt geben zu können, dass wir für den German Design Award 2018 in der Kategorie Excellent Communications Design für das Neusehland Beratungs-App Konzeptnominiert sind.

Artikel lesen
Tutorial - iOS-Apps programmieren (1)
Cihat Gündüz
26.11.2022
2 Min

Tutorial - iOS-Apps programmieren (1)

Wäre es nicht toll, sich seine eigene App fürs iPhone zu programmieren?

Artikel lesen
EnBW mobility+ Release
Kay Dollt
26.11.2022
2 Min

EnBW mobility+ Release

Seit dem 23. April präsentiert EnBW die brandneue Version der EnBW mobility+ App auf der Hannover Messe.

Artikel lesen

Jetzt kostenloses Strategiegespräch sichern!

Die Beratungen sind grundsätzlich schnell ausgebucht, deshalb fülle jetzt in 2 Minuten das kurze Formular aus.

Jetzt Strategiegespräch sichern