Größe von App Store-Symbolen: Dateianforderungen, Design-Tipps und Best Practices

Was ist die richtige App Store Icon-Größe? Was sollten Sie in Ihrem Icon abbilden? Welchen Unterschied macht das Ganze? Dieser Leitfaden für App-Symbole beantwortet diese wichtigen Fragen, gibt Tipps und verweist auf Ressourcen.

Warum App-Symbole wichtig sind

Die Größe der App-Store-Symbole ist winzig. Wenn die Symbole auf dem Bildschirm Ihres Smartphones erscheinen, nehmen sie jeweils nur eine Daumenbreite Platz in Anspruch. Aber im Apple App Store oder im Google Play Store ist das Design, das Sie in dieses kleine App Store-Symbol packen, alles.

Wie bei Buchcovern oder Produktauflistungen auf Amazon helfen die Icons für mobile Apps Ihren potenziellen Kunden, in Sekundenbruchteilen ein Urteil zu fällen.

Bevor sie den Titel oder die Beschreibung der App lesen, sehen sie das Icon. Ihr Icon für eine mobile Anwendung muss den Kunden auf ansprechende Weise über Ihre Anwendung informieren und sie dazu bringen, mehr darüber zu erfahren. Sobald jemand auf Ihr Symbol geklickt hat, ist die Wahrscheinlichkeit größer, dass er Ihre App installiert. Und das ist genau das, was Sie wollen. Im Grunde ist Ihr App-Symbol das Tor zu Installationen.

Deshalb ist es so wichtig, es richtig zu machen.

Ein App-Symbol ist kein Logo

Es scheint vielleicht am einfachsten zu sein, Ihr Markenlogo auf Ihr App-Symbol zu übertragen und es damit zu belassen. Don’t. Ein App-Symbol ist kein Logo. Ein Logo repräsentiert die Marke hinter der Anwendung, ja, aber das App-Symbol repräsentiert die Anwendung selbst.

Genauso wenig, wie Sie ein Logo anstelle eines Produktbildes auf einer Amazon-Liste verwenden würden, sollten Sie ein Logo in die Größenvorgaben für ein App-Symbol packen und es als Symbol bezeichnen. Nur Megamarken wie Starbucks oder Target können damit durchkommen.

Wenn Sie jedoch eine anständig etablierte und bekannte Marke sind, können Sie Ihr Logo auf irgendeine Weise in Ihr App-Symbol einfügen, aber stellen Sie es nicht in den Mittelpunkt.

Im folgenden Beispiel fügt der bekannte Reisebuchverlag Lonely Planet sein Logo in das App-Symbol für Guides by Lonely Planet ein. Aber das Logo ist nur ein Teil des App-Designs. Die beruhigende blaue Umrandung lässt die warme, gelb getönte Stadtlandschaft hervorstechen und lädt den Betrachter zu seinem nächsten Abenteuer ein.

Die Tagline besagt, dass diese App eine Zusammenstellung von „kuratierten Stadtführern“ ist, und das App-Symbol deutet auf diese Funktion hin.

Jeder, der es liebt, neue Städte zu erkunden, und der im Laden nach „Reiseführern“ sucht, wird von diesem warmen und doch spannenden App-Symbol angezogen.

Vergleiche die Lonely Planet App mit einer anderen Reiseführer-App, die du unter der gleichen Suche findest.

mTrip nimmt das M aus seinem Logo, fügt einen grünen Hintergrund hinzu und gibt sich selbst einen Daumen nach oben, um das Icon in den App Store zu stellen.

Aber das Symbol sagt nichts darüber aus, was der Nutzer bekommt, und mTrip ist nicht bekannt genug, um an einem einzigen Buchstaben zu erkennen zu sein. Netflix (siehe unten) verwendet ebenfalls den ersten Buchstaben aus seinem Logo als App-Symbol, aber diese Marke schafft es, weil jeder weiß, was Netflix ist und was es tut.

Nun, da Sie den Unterschied zwischen einem Logo und einem App-Symbol kennen, lassen Sie uns einen Blick auf die wichtigen Fragen werfen, die Sie sich stellen müssen, bevor Sie mit der Gestaltung beginnen.

Größe des App Store-Symbols: 4 Fragen, die Sie sich vor der Erstellung eines App-Symbols stellen sollten

Es stimmt, dass Ihr App-Symbol so viele Blicke wie möglich auf sich ziehen muss. Es soll sich von allen anderen App-Symbolen abheben, und in einer von Apps übersättigten Welt ist das keine leichte Aufgabe.

Aber ich verrate Ihnen ein Geheimnis: Sie müssen nicht dafür sorgen, dass Ihr App-Symbol alle Menschen auf der Welt anspricht. Konzentrieren Sie sich stattdessen darauf, dass es die Menschen in Ihrer Zielgruppe anspricht.

Hier ist also die erste Frage, die Sie sich stellen müssen.

Frage 1: Wer ist die Zielgruppe für diese App?

Ist Ihre App für Menschen, die gerne kochen? Eltern mit kleinen Kindern? Liebhaber von Spielen wie Candy Crush und Angry Birds? Reisende? Angehende Musiker?

Da Sie die App bereits entwickelt haben, sollten Sie die Antwort auf diese Frage kennen. Aber stellen Sie sie auch in den Mittelpunkt Ihres App-Symboldesigns.

Suchen Sie eine einfache Phrase, die Ihre Zielgruppe definiert.

Sagen wir zum Beispiel, dass Ihre App Menschen das Klavierspielen beibringt. Eine Suche nach „Klavier lernen“ im Google Play Store führt zu diesen Top-Apps.

Welches der vier App-Symbole würden Sie anklicken, um mehr zu erfahren?

Für mich, einen ehemaligen Pianisten, der gerne wieder lernen würde, was ich einmal konnte, gewinnt diese App. Hands down.

Ich finde das App-Symbol von Flowkey überhaupt nicht ansprechend, weil es mir nichts über das Klavierspielen erzählt. (Auch hier ist es im Grunde nur ein Logo und nicht mehr). Die beiden anderen haben Klaviertasten im Icon – vielleicht erwartet, aber völlig in Ordnung.

Für mich gewinnt Real Piano Teacher, weil es Hände zeigt, die auf beschrifteten Tasten Klavier spielen, mit einem Notenblatt vor der Person, die spielt.

Man kann nicht lernen, Klavier zu spielen, ohne Noten zu lernen, und das Lesen von Noten kann genauso schwierig sein wie das Lesen einer geschriebenen Sprache. Allein durch das App-Symbol verspricht diese App, den Nutzern zu helfen, das Notenlesen zu erlernen und sie ihrem Traum, selbst schöne Melodien zu spielen, näher zu bringen.

Der Haken an der Sache: Sie als App-Ersteller müssen sich fragen: Wie kann ich mein App-Symbol noch besser machen als das, das mir am besten gefällt (das von Real Piano Teacher)?

Entwerfen Sie Ihr App-Symbol so, dass es sich von allen Konkurrenzprodukten abhebt.

Frage Nr. 2: Welche aktuellen Designstandards sollte ich befolgen?

Die Designtrends ändern sich laufend. Ich bin schon lange genug dabei, um mich an die letzte Änderung des Starbucks-Logos im Jahr 2011 zu erinnern. Ich war ein wenig traurig, dass die Sirene verschoben wurde, aber letztendlich wurde das Design wieder zum Synonym für mein Lieblingscafé und ich konnte mir nicht vorstellen, dass es zu seinem vorherigen Design zurückkehren würde.

Natürlich finden einige Leute das neue Logo zu sparsam und scherzen, dass es irgendwann nur noch ein grüner Punkt sein wird.

Scherz beiseite, es ist wichtig, die aktuellen Designtrends im Auge zu behalten und zu wissen, wie sie sich auf Ihr App-Design beziehen. Sowohl der Google Play Store als auch der App Store veröffentlichen aktuelle Richtlinien, die Sie befolgen können (und sollten).

Diese Richtlinien helfen Ihnen, ein App-Symbol zu erstellen, das modern und zugänglich ist.

Google’s Material Design bietet einen gründlichen Satz von Richtlinien, die die folgenden Themen abdecken:

• Gestaltungsprinzipien, einschließlich des Markenausdrucks und des Designansatzes
• Gitter- und Schlüssellinienformen
• Spezifikationen – eine detaillierte Aufschlüsselung der Anatomie von App-Symbolen und Beleuchtungsspezifikationen
• Icon-Behandlungen: Informationen zu App-Farbe, Ebene, Einkerbung, Überlappung, Akkordeon und Verzerrung

Material Design soll Ihnen helfen, ein App-Symbol mit einem haptischen Gefühl durch das Medium der Pixel zu erstellen. Es ist eine komplexe Materie, aber es lohnt sich, sie zu studieren.

Die Human Interface Guidelines von Apple lesen sich freundlicher und sind leicht zu befolgen. Sie bieten zehn Tipps, wie z. B. „Umfassen Sie die Einfachheit“ und „Testen Sie Ihr Symbol mit verschiedenen Hintergrundbildern“ zusammen mit Anweisungen, wie sie zu befolgen sind.

Danach bietet Apple Informationen darüber, wie man:

• Attribute für App-Symbole formatiert
• Das App-Symbol in verschiedenen Größen erstellt

• Bereitstellen von vom Benutzer auswählbaren Symbolen
• Erstellen von Spotlight-, Einstellungs- und Benachrichtigungssymbolen für iOS

Während die Human Interface Guidelines kürzer und in vielerlei Hinsicht einfacher sind als die Material Design Guidelines von Google, bieten letztere mehr Design-Tipps.

Frage Nr. 3: Wie kann ich den Zweck meiner App andeuten?

Wie wir im Fall der Apps zum Erlernen des Klavierspiels gesehen haben, ist es von entscheidender Bedeutung, dass Sie Ihrer Zielgruppe den Zweck Ihrer App mitteilen.

Werfen wir einen Blick auf ein anderes Beispiel. Nehmen wir an, Sie entwerfen ein App-Symbol für eine App, die Schriftstellern hilft, ihre Gedanken und Ideen zu organisieren. Vielleicht setzt Ihre App auch Ziele für die Anzahl der Wörter und ermöglicht es den Benutzern, die tägliche Schreibzeit zu verfolgen. Darüber hinaus bietet Ihre App vielleicht auch Zitate, die zum Schreiben anregen.

Wer ist also Ihre Zielgruppe?

Schriftsteller, natürlich. Angehende Schriftsteller. Romanciers. Freiberufler. Journalisten. Jeder Schriftsteller könnte Ihre App gebrauchen!

Werfen Sie nun einen Blick auf Ihre Konkurrenz.

Suchen Sie im App Store nach „Apps für Schriftsteller“ und Sie erhalten eine Reihe von Organisations-Apps.

Schauen Sie sich hier die App-Symbole an. Zuerst ist da ein Schnurrbart mit rotem Hintergrund. Wenn Sie den Titel nicht sehen würden, wüssten Sie nicht, dass sich diese App überhaupt an Schriftsteller richtet. Selbst dann ist unklar, was die App genau tut, um Autoren beim Schreiben zu helfen.

Das nächste App-Symbol hat einen weißen Hintergrund mit einem roten… Papierflugzeug? Stiftspitze? Lachskopf? Es ist nicht ganz klar.

Das letzte App-Symbol in unserer kleinen Studie zeigt einen Glühbirnenstift vor einem schwarzen Hintergrund. Schon beim Anblick des Symbols bekommt man das Gefühl, dass diese App Schriftstellern dabei hilft, Ideen zu formulieren und die Inspiration zu bewahren, bis sie sich in ein Buch, einen Artikel oder ein Gedicht verwandelt.

Emulieren Sie dieses Symbol, nicht die ersten beiden. Weisen Sie auf die Funktionalität hin, die Ihre App bietet.

Beachte, dass die Andeutung der Funktionalität für verschiedene Arten von Apps unterschiedlich aussehen sollte.

Wenn du zum Beispiel eine Utility-App entwickelt hast – wie einen Tipp-Rechner oder eine Taschenlampe – sollte das App-Symbol der Person, die es anschaut, das Gefühl geben, dass sie die App bereits benutzt, bevor sie überhaupt auf das Symbol klickt.

Das folgende App-Symbol erreicht dieses Ziel nicht, und außerdem ist es überladen und schwer zu lesen.

Das untenstehende App-Icon hingegen vermittelt das Gefühl, dass man schnell auf diesen Trinkgeldrechner zugreifen kann, weil er praktisch schon geöffnet ist.

Icons für Handyspiele brauchen ebenfalls eine besondere Behandlung. Ihr Ziel bei einem Icon für eine Spiele-App ist es, dem Betrachter das Gefühl zu geben, dass er bereits in die Welt des Spiels eingetaucht ist. Alles, was er tun muss, ist, auf das App-Symbol zu klicken, und er bekommt den Dopaminrausch, etwas Neues, Aufregendes und Belohnendes zu spielen.

Hier ist ein großartiges Beispiel für ein App-Symbol, das dies erreicht:

Man kann fast den Rausch spüren, einen holprigen Hügel hinunterzufahren, wenn man dieses App-Symbol ansieht. Es ist ein köstlicher Nervenkitzel, einer, der Lust auf das Spiel macht.

Ein nicht ganz so tolles Beispiel? Dieses App-Symbol für ein Basketballspiel.

Man hat das Gefühl, dass man… auf einen Basketball starrt. Und nicht auf ein Spiel. Langweilig!

Frage Nr. 4: Wie sieht meine App aus?

Es ist zwar eine gute Idee, bei der Gestaltung eines App-Symbols kreativ zu sein, aber Sie wollen nicht, dass Ihre App-Benutzeroberfläche und Ihr App-Symbol unterschiedliche Texturen haben. Sie sollten in einem nahtlosen Designsystem zusammenarbeiten.

Hier sind zwei Wortblockspiele, deren Icons dem Aussehen und dem Gefühl der Spiele entsprechen, die sie darstellen.

Das Icon von Word Stacks hat die gleichen Sonnenuntergangsfarben und klobigen Wortblöcke wie das Spiel selbst.

Das App-Icon von Woody Block Puzzle ist so holzig wie das Spiel selbst.

Sie wollen nicht, dass Ihr Publikum denkt, dass Ihre App ein holziges Blockspiel ist, aber dann stattdessen ein sonnenuntergangsfarbenes, schaumiges Wortblockspiel zeigt. Inkonsistentes Branding ist schlechtes Design.

Wie ein Blogger auf 99designs schreibt: „Wenn Ihr App-Design flach ist, sollte auch Ihr Symbol flach sein. Wenn deine App Skeuomorphismus enthält, sollte auch dein Icon zumindest ein Element von Skeuomorphismus haben.“

Das App-Symbol sollte die Farben, Texturen und das Design der App so gut wie möglich widerspiegeln.

Tipps, die Sie bei der Gestaltung Ihres App-Symbols beachten sollten

Nachdem Sie nun die vier wichtigsten Fragen zum App-Design beantwortet haben, ist es an der Zeit, mehrere Varianten oder Designvorschläge für Ihr App-Symbol zu erstellen. Beginnen Sie mit einer grundlegenden Designskizze und experimentieren Sie dann mit verschiedenen Farben, Rahmen und Grafiken.

Hier ein paar Tipps zur Orientierung:

• Verlassen Sie sich auf nur zwei oder drei Farben. Bei mehr als drei Farben wirkt Ihr App-Symbol zu unruhig.
• Vermeiden Sie die Verwendung eines echten Fotos. Sie können ein Foto jedoch jederzeit in eine Illustration/Vektorbild umwandeln.
• Denken Sie klein. Ihr App-Symbol mag Ihnen beim Entwerfen groß vorkommen, aber auf einem iPhone- oder Android-Bildschirm ist es winzig. Stellen Sie sicher, dass jedes Element auch in der kleinsten Form des Symbols klar ist.
• Sparen Sie sich Worte für den Titel und die Tagline. Ein App-Symbol soll eine visuelle Wirkung haben. Im Titel, in der Tagline und in der App-Beschreibung können Sie sagen, was Sie sagen müssen.
• Halten Sie sich immer an die Größenanforderungen und Richtlinien für App-Store-Symbole von Apple und Google. Die Größenanforderungen für Google Play finden Sie hier und die für den Apple App Store hier. Denken Sie daran, dass Sie mehrere Versionen Ihres App-Symbols für jeden Store erstellen müssen. Beachten Sie auch, dass der App Store auf dem iPhone zwar über abgerundete Ecken verfügt, Sie aber alle Ihre App-Dateien in quadratischer Form einreichen sollten. Das Apple-System wird die Ecken für Sie abrunden.

Wenn Sie zwei oder drei potenzielle App-Symbole zur Auswahl haben, ist es Zeit für den wichtigsten Schritt bei der Erstellung von App-Symbolen: Split-Tests, um herauszufinden, was Ihre Zielgruppe davon hält.

Über die Größe von App Store-Symbolen hinaus: Split-Tests von App-Symbolen auf PickFu

Der beste Weg, um herauszufinden, was Ihre Zielgruppe von Ihrem App-Symbol hält, ist ein Split-Test auf PickFu, bevor Sie Ihr App-Angebot im Google Play Store oder im App Store tatsächlich veröffentlichen. Sicher, Sie könnten einen In-App-A/B-Test durchführen und mehrere Varianten im Store selbst testen, aber das ist ein langsamer Prozess, der Ihre Zeit und Ihr Geld verschlingen kann.

Durch Split-Tests mit einem Pool von Befragten auf PickFu, bevor Sie Ihr App-Symbol live veröffentlichen, erhalten Sie das Feedback, das Sie brauchen, ohne dabei Geld zu verlieren.

Es dauert nur ein paar Minuten, eine Umfrage auf PickFu einzurichten. Erinnern Sie sich daran, dass ich gesagt habe, dass die Zielgruppenauswahl entscheidend ist? PickFu macht das für Sie ganz einfach. Sie können die Zielgruppe nach iOS- oder Android-Geräten, nach mobilen Spielern und danach, wie viel sie im App Store ausgegeben haben, sowie nach vielen anderen nützlichen Merkmalen eingrenzen.

Ein App-Entwickler hat kürzlich bei PickFu zwischen zwei Icons für eine Dating-App getestet.

Das erste Icon zeigt das rosafarbene Profil einer Frau, die ein Telefon in der Hand hält, den App-Titel in zwei verschiedenen Farben und einen rötlichen und orangefarbenen Hintergrund. Insgesamt gibt es bei diesem App-Symbol sechs verschiedene Farben.

Bei der zweiten Option wird die Frau weggelassen, der Hintergrund bleibt stromlinienförmig in Orange und Rot, und die Worte bleiben erhalten, allerdings in Weiß mit einem kleinen Herz, das in die Biegung des Buchstabens M gesteckt wird.

Die Befragten stimmten mit überwältigender Mehrheit für die einfachere, sauberere Option B. Anders als bei einem herkömmlichen Live-A/B-Test geben Ihnen die Befragten bei PickFu detailliertes schriftliches Feedback. So können wir genau sehen, warum Option B gewonnen hat.

Zunächst einmal schätzten die Befragten das einfachere, professionellere Aussehen von Option B. Sie sagten Dinge wie: „Ich mag die Einfachheit dieser Option, und sie hebt nicht nur ein Geschlecht für die Verwendung hervor“ und „Ich mag die leuchtende lila/rosa Farbgebung von Option A wirklich nicht – das ist wirklich anstrengend für die Augen.“

Hoffentlich hat sich der App-Entwickler für das zweite App-Symbol entschieden, das viel wahrscheinlicher potenzielle Nutzer anzieht als Option A.