App-Icons sind klein, aber tragen viel zum Erfolg deiner App bei. Deine Downloads erhöhen, den Look und Stil deiner App bewerben und die Funktion deiner App kommunizieren sind nur ein paar Dinge, die ein App-Icon für dich tun kann. Sie haben viel Macht und deshalb wollen wir alle Vorteile für uns nutzen! Dazu haben wir diesen praktischen Guide erstellt, der alles enthält, was du über das Designen von App-Icons wissen musst:
- Was ist ein App-Icon?
- Im App Store
- Die aktuellen Designstandards kennen
- Look and Feel deiner App zeigen
- Die Funktion deiner App kommunizieren
- Einen App-Icon designen lassen
- Deine Plattformen kennen
- Größe und Format
Was ist ein App-Icon?
—
Das Wichtigste zuerst: Ein App-Icon ist kein Logo. Aber es macht so ziemlich dasselbe, oder? Nun, fast.
Während ein Logo ein Produkt oder eine Marke eines Unternehmens kennzeichnet und repräsentiert, kennzeichnet und repräsentiert ein App-Icon – du ahnst es schon – eine App.
Stell dir ein App-Icon als kleines Behältnis vor, welches „mundgerechte“ Stücke an visuellen Informationen über deine App enthält. Ja, natürlich könntest du dein Produkt- oder Markenlogo in ein App-Icon packen, aber das macht dein App-Icon nicht zu einem Logo (und ist erfahrungsgemäß nicht die beste Lösung).
Stell es dir so vor: Logos selbst können sich frei über die Grenzen eines App-Icons bewegen. Man kann ihre Größe verändern und sie in jeden Kontext setzen: Auf Flyern, Websites, Visitenkarten, und so weiter (selbst in App-Icons). Aber vergiss Logos! Reden wir über App-Icons.
Im App Store
—
Wie du vielleicht weißt, wirst du mehr Downloads bekommen, je besser dein App-Icon aussieht. Nur weil eine Person etwas attraktiv findet, heißt dies allerdings nicht, dass eine andere Person dies auch so sieht. Daher geht es nicht einfach darum, ein auffälliges Icon zu gestalten, das alle für sich erobert. Es geht eher darum, herauszufinden, was für deineZielgruppe attraktiv ist. Es ist notwendig, darüber nachzudenken, welcher Stil eines App-Icons für einen Schnäppchenjäger, Sportfan oder Gamer attraktiv ist. Schauen wir es uns an!
Nimm zum Beispiel das Ergebnis für „Kamera“ im Google Play Store. Kannst du anhand der App-Icons erraten, welche Kamera-App die meisten Downloads hat? Golden Camera ist Letzter, mit geschätzten 10 bis 50 Tausend Downloads, Professional HD Camera hat geschätzte 1 bis 5 Millionen Downloads, Open Camera und Camera MX haben geschätzte 10 bis 50 Millionen Downloads und an erster Stelle steht Candy Camera mit geschätzten 100 bis 500 Millionen Downloads.
Angesichts der Tatsache, dass das App-Icon von Candy Camera die meisten Downloads erzielt hat, können wir es dazu verwenden, um etwas über die Allgemeininteressen von Nutzern von Kamera-Apps zu lernen. Das Design ist farbenfroh und verspielt und stellt doch Einfachheit und Funktionalität dar. Die App-Icons für Open Camera und Camera MX stellen ebenfalls Einfachheit und Funktionalität dar (was ihre Wettbewerbsfähigkeit im App Store erklärt), aber ihr Mangel an Farbe und Verspieltheit erklärt möglicherweise ihre geringeren Download-Zahlen. Die Schlussfolgerung hier lautet, dass die Zielgruppe für Kamera-Apps größtenteils nach einer App suchen, die simpel, aber unterhaltsam ist.
Wir können dieses Beispiel auch aus einem anderen Winkel betrachten. Candy Camera nutzt ein Design, welches nah an Googles Richtlinien für Material Design ist (dazu kommen wir im nächsten Abschnitt). Im Grunde ist Candy Camera das einzige Icon, das den aktuellen Designstandards folgt. Golden Camera und Open Camera sehen hingegen aus, als wären sie designt worden, als gerade Flat Design und skeuomorphisches Design florierten. Heute fühlen sich diese Looks veraltet an. Daher ist es ebenfalls wichtig, aktuellen Designstandards zu folgen.
So faszinierend es auch ist, sich mit den Designmechanismen der obigen Beispiele zu beschäftigen – die große Erkenntnis hier ist, dass App-Icons einen deutlichen Unterschied machen, wenn es um Downloads geht.
Aktuelle Designstandards kennen
—
Während du nicht zwingend irgendwelchen Regeln folgen musst, abgesehen von der vorgegebenen Größe, haben sowohl Google als auch Apple Richtlinien erstellt, wie deine App aussehen sollte – und es ist klug, sich daran zu halten. Wie wir oben gesehen haben, fühlen sich App-Icons, die diese Richtlinien befolgen, zusammenhängender und relevanter in Bezug auf die aktuellen Trends an. Als Ergebnis erreichen die jeweiligen Apps üblicherweise mehr Downloads.
Mit der neuesten Veröffentlichung von Android hat Google eine neue Designsprache namens Material Design implementiert, welche im Grunde genommen eine umfangreiche Reihe an Richtlinien zum Erzeugen einer zusammenhängenden Bedienoberfläche ist – noch genauer genommen, das Erzeugen eines Erlebnisses, das sich anfühlt, als würdest du mit pseudo-physischen „Materialien“ interagieren (abgesehen davon, dass es alles Pixel sind). Für Designer, die zu diesem zusammenhängenden Look and Feel beitragen wollen, hat Google eine detaillierte Dokumentation zu Material Design herausgegeben. Für die Material Design Icon Guidelines klicke hier.
Apple hat ähnliche Richtlinien für iOS hervorgebracht, die Human Interface Guidelines. Diese Richtlinien sind praktisch für iOS-Designer, allerdings sind sie nicht annähernd so ausführlich, wie die für Material Design. Aber es ist ein guter Anfang, wenn du dir nicht sicher bist, wie dein iOS-Icon aussehen sollte. Um dir die Human Interface Guideline anzusehen, klicke hier.
Look and Feel deiner App zeigen
—
Natürlich sollte dein App-Icon den Look and Feel deiner App widerspiegeln. Um eine Analogie zu verwenden, wie würdest du dich fühlen, wenn du einen Eimer Eierschalen-Weiß kaufen würdest, um deine Wohnung zu streichen, nur um beim Öffnen des Eimers festzustellen, dass die Farbe ein dunkles Braun ist? Obwohl einige Eierschalen tatsächlich braun sind, ist es wichtig darüber nachzudenken, welche Erwartungen Kunden basierend auf deinem Branding haben.
Um dies auf das Design von App-Icons anzuwenden: Wenn deine App flat ist, sollte dein Icon ebenfalls flat sein. Enthält deine App Skeuomorphismus, sollte dein Icon zumindest einige Elemente von Skeuomorphismus enthalten. Wenn dein App-Design Googles Richtlinien für Material Design folgt, sollte dein App-Icon das auch. Schau dir an, wie die App-Icons in den obigen Beispielen zum Look and Feel ihrer entsprechenden App passen.
Funktion deiner App kommunizieren
—
App-Icons spielen auch beim Gesamterlebnis der App eine Rolle. Nimm zum Beispiel Dienstprogramme wie Taschenrechner, Taschenlampen oder Wetter-Apps. Diese App-Icons sollten dem Nutzer das Gefühl geben, die Funktion und den Nutzen jederzeit zur Verfügung zu haben. Denke daran, wie es sich anfühlt, einen Stift in die Hand zu nehmen, auf ein Thermometer zu sehen oder etwas mit einem Lineal zu messen – Das ist das Gefühl, welches das App-Icon für ein Dienstprogramm beim Anwender hervorrufen sollte. Achte bei den obigen Beispielen darauf, wie du die Tasten des Taschenrechners beinahe unter deinen Fingerspitzen fühlen kannst oder wie sich die Taschenlampe anfühlt, als könnte sie leicht mit einem Schieberegler ein- und ausgeschaltet werden.
Über das Gefühl der Nützlichkeit hinaus sind die Beispiele oben sofort als Dienstprogramme erkennbar. Ein Weg, auf dem Designer dies erreichen, ist, indem sie visuelle Hinweise bekannter Dienstprogramme einarbeiten. Ein tolles Beispiel sind die retro-digitalen Zahlen im App-Icon für die Uhr. Wer erinnert sich nicht an sie?
Eine weitere große App-Kategorie ist Spiele. Im Gegensatz zu App-Icons für Dienstprogramme sollten Icons für Spiele in die Welt des Spiels ziehen. Einfach gesagt, sollten App-Icons für Spiele dich dazu bringen, spielen zu wollen! In den obigen Beispielen ist die attraktive, glitzernde Bowlingkugel, die die Pins umhaut, schwer zu ignorieren. Es kommuniziert Action, Bewegung, Aufregung und Spaß! Ebenso lockt der Poké Ball, der auf einem Planeten unter den Sternen liegt, dich in eine Welt, die man nur schwer nicht entdecken will.
Es ist auch wichtig darüber nachzudenken, wie diese Apps deine Aufmerksamkeit auf sich ziehen. Im Falle einer Bowling-App, willst du die Action des Bowlings zeigen und nicht die stehenden Pins, wie langweilig! Dasselbe gilt für Fruit Ninja Classic, wo die Action, eine Frucht durchzuschneiden, auf auffällige und aufregende Weise gezeigt wird.
Einen App-Icon designen lassen
—
Wenn du bereits einen Freelance-Designer für das UI-Design deiner App ausgesucht hast, ist es keine schlechte Idee, ihn auch zu engagieren, um ein passendes App-Icon zu erstellen, um einen visuellen Zusammenhang durch deine gesamt App hindurch zu erhalten. Alternativ kannst du einen Wettbewerb auf 99designs abhalten, um eine ganze Bandbreite an Ideen für App-Icon-Designs zu bekommen.
Wenn du nach einem Ausgangspunkt suchst, um dein eigenes Icon zu gestalten, verbreitete Designprogramme für App-Icon-Design sind Photoshop, Illustrator und Sketch. Allgemein gesagt, nutze Photoshop, wenn du es auf Rastereffekte abgesehen hast (Schatten, Glares, Reflexionen), Illustrator, wenn du komplexe Vektor-Formen erzeugen willst und Sketch, wenn du App-Templates bevorzugst. (Sketch kommt mit kostenlosen und bereits installierten Vorlagen für App-Icons). Für tiefgreifende Reviews zu diesen Programmen und mehr, klicke hier.
Deine Plattformen kennen
—
Bevor wir wir auf die Besonderheiten von App-Icon-Design eingehen, ist es wichtig zu lernen, dass es zwei große Lager gibt: Android und iOS. Während beide Typen von App-Icons kleine, quadratische Buttons sind, die man drückt, gibt es doch wichtige Unterschiede in Größe und sogar empfohlenem Stil (mehr dazu in unserem Abschnitt zu den Regeln). Legen wir los!
Welche Größe und Format sollte mein Icon haben?
—
Auf Android-Geräten sind Launcher-Icons in der Regel 96×96, 72×72, 48×48 oder 36×36 Pixel (abhängig vom Gerät). Android empfiehlt allerdings, dass die Größe deines Artboards zu Beginn 864×864 Pixel ist, damit du das Icon leichter bearbeiten kannst. Des Weiteren werden App-Designer für Android in der Regel verschieden große App-Icons für jede mögliche Bildschirmauflösung in einem bestimmten Quellverzeichnis innerhalb der App speichern. Mehr dazu erfährst du hier. App-Icons für Android müssen als PNG-Dateien gespeichert werden.
Für iOS gilt, dass App-Icons eine Größe von 1024×1024 Pixeln haben sollten. Wie bei Android wird das Icon in der Größe angepasst, abhängig vom Gerät und Kontext, aber Apple macht das für dich. Wenn du die genauen Angaben für diese Größen haben willst, um es zu testen oder zu experimentieren, klicke hier. App-Icons für iOS müssen als PNG-Datei gespeichert werden.
Rocke dein App-Icon-Design
—
Wir wissen, du hast eine großartige Idee für eine App – also geh nicht mit einem schlechten App-Icon in der Masse verloren. Wenn du diesem Guide folgst, wirst du zu einem Design kommen, das verblüffend aussieht und deine Zielgruppe erreicht.
App-Icon Designquellen
—
- Icon Templates Pack für Android 4.0 (Template-Pack direkt von Android)
- Freebies Material Icon Template
- Every Interaction iOS App-Icon Template
- Savvy Apps iOS App-Icon Template
Bereit für deinen eigenen App-Icon?
So erhältst du Ideen für App-Icons von Grafikdesignern aus aller Welt.
Hier lang!
