10 Design-Hacks für tolle App-Icons
App-Symbole sind das erste, was Ihre Benutzer bemerken, wenn sie auf Ihre App stoßen. Mit Milliarden von Apps, die im App Store um Aufmerksamkeit kämpfen, ist ein App-Symbol zu einem wichtigen Unterscheidungsmerkmal geworden, das die Unordnung auflöst und Benutzer zu Ihrer App führt. Sie sind in der Tat der erste Berührungspunkt, auf den Ihre Benutzer stoßen. Daher ist es äußerst wichtig, diese Erfahrung sofort zu nutzen.
In diesem Beitrag werde ich ein paar Design-Hacks vorschlagen, die Ihnen helfen können, coole App-Symbole zu erstellen, die im App Store auffallen und Ihre App möglicherweise unter anderen hervorheben können, die um Installationen konkurrieren.
Bevor ich Ihnen die Punkte nenne, müssen Sie verstehen, dass der grundlegende Zweck eines App-Symbols darin besteht, eine unmittelbare Verbindung herzustellen und kognitive Hinweise zu erzeugen. Alles, was in diesem Beitrag vorgeschlagen wird, geht im Wesentlichen darauf zurück, dies zu erreichen.
Hier sind einige der Design-Hacks, um großartige App-Icons zu erstellen
Die 70%-Regel
Unter den Designern herrscht Einigkeit darüber, 70 % der Symbolfläche zu verwenden, um das mit der App verbundene Hauptobjekt hervorzuheben. Ein Objekt kann alles sein, was mit der App zu tun hat. Wenn Sie eine Foto-App entwerfen, kann das Objekt eine Kamera oder ein Objektiv sein. Für ein Spiel kann es das Gesicht eines Charakters sein und so weiter.
Mit anderen Worten, das Objekt sollte den Großteil (70 %) der Fläche des Symbols einnehmen. Die Idee ist, mit den Benutzern eine sofortige Wahrnehmung zu entwickeln und sie zur App-Seite für die Beschreibung navigieren zu lassen. Sobald sie auf der App-Seite mit einer Beschreibung landen, wird es für Sie viel einfacher, den Benutzer zu gewinnen.
Es reicht jedoch nicht aus, dem Objekt nur einen größeren Raum zu geben. Es muss auch frei von Unordnung sein. Nur dann kann es sich verbinden und eine schnellere Erkenntnis erzeugen, was uns zum nächsten Punkt bringt.
Beseitigen Sie das Durcheinander, bis die Grundlagen auseinanderfallen
Schneiden Sie die Unordnung weiter, bis die grundlegende Idee des Objekts innerhalb des Symbols herauskommt. Mit anderen Worten, reduzieren Sie Ihr Symbol bis zu einem Punkt, an dem das Objekt im Symbol von sinnvoll zu unsinnig wird. Zerkleinern, bis das Objekt seine universelle Form behält und von der Mehrheit der Menschen identifizierbar ist.
Wenn Sie beispielsweise eine App zum Ausblenden von Bildern erstellen, erhalten Sie möglicherweise ein App-Symbol mit „Schlüssel und Schloss” als Hauptobjekt. Jetzt können Sie Schatten oder Zähler entfernen und sich für ein völlig flaches Symbol entscheiden. Danach Wenn Sie fertig sind, können Sie das Design minimalistisch gestalten und vollständig mit Farben spielen, um 3D-Effekte für die im Symbol verwendete „Schloss und Schlüssel” -Form zu erzeugen.
Matt auf glänzend und glänzend auf matt
Das nächste, was ein App-Symbol hervorhebt, ist die angemessene Verwendung von Kontrast. Designer verwenden häufig einen Kontrast zwischen dem Objekt und dem Hintergrund des App-Symbols. Wenn Sie die beiden oben genannten Schritte ausführen können, landen Sie möglicherweise automatisch hier.
Kontraste zu erzeugen hat auch viel mit Farben zu tun. Beginnen Sie mit einer vorgegebenen Farbpalette im Kopf und arbeiten Sie sich durch. Denken Sie daran, dass die Idee darin besteht, Lebendigkeit und Kontrast zwischen der Hintergrundfarbe und den Elementen im Objekt zu erzeugen. Wenn Sie ein Anfänger in diesem Bereich sind, können Sie auf Dribbble auf einige Designs zurückgreifen und Farbpaletten Ihrer Wahl herunterladen.
Nachdem Sie mit dem endgültigen Schnitt fertig sind, können Sie 2-3 Versionen mit mehr Weiß oder Schwarz zu den Farben erstellen. Jetzt können Sie diejenige auswählen, die sich für Ihre Augen richtig anfühlt. Nach iOS 7 wird viel Wert auf frische Farben mit kräftigeren Weißtönen gelegt.
Lassen Sie sich nicht von Ihrem Big Mac täuschen
Nach der Installation auf einem Gerät wird Ihr App-Symbol in verschiedenen Auflösungen angezeigt. Damit es selbst in seinem kleinsten Avatar bedeutend erscheint, muss man es unter Berücksichtigung der Proportionen entwerfen. Designer arbeiten oft an großen Mac-Bildschirmen, auf denen sich auch kleinste Details erkennen lassen. Wenn jedoch dasselbe Symbol auf einem Smartphone mit unterschiedlichen Symbolgrößen getestet wird, gehen die Details verloren.
Wenn Sie an einem Mac arbeiten und zuerst den Icon App Store erstellen, können Sie es sich leicht leisten, einige winzige Details einzugeben. Denken Sie jedoch daran, dass das kleinste Symbol für das Einstellungsmenü ein 29 x 29 Pixel großes Bild ist. Feinere Details wie kleine Texte oder andere Symbole sind darauf nicht sichtbar.
Was Sie am besten tun können, ist, die Größe im Auge zu behalten und grundlegende Formen und Muster zu verwenden, um die Arbeit zu erledigen. Umfassen Sie Einfachheit und konzentrieren Sie sich auf ein einzelnes Objekt. Vorzugsweise eine einzigartige Form oder ein Element, das trotz Skalierung seine Konturen und Details behält. Auf diese Weise würde Ihr Symbol für alle Auflösungen geeignet aussehen, die in den Richtlinien von Apple und Android vorgeschlagen werden.
Probieren Sie Ihr Symbol gegen eine Vielzahl von Hintergrundbildern aus
Benutzer haben unterschiedliche Geschmäcker und Vorlieben, die sich in der Auswahl der Hintergrundbilder und Themen auf ihren Smartphones widerspiegeln. Das bedeutet, dass sich Ihr App-Symbol von einer Vielzahl von Farben abheben muss. Daher ist es immer eine gute Idee, die Sichtbarkeit Ihres Symbols mit Hintergrundbildern in sieben Grundfarben zu testen. Sie können die Weiß/Schwarz-Sättigung innerhalb der von Ihnen verwendeten Hintergrundbilder erhöhen oder verringern, um einen zufriedenstellenden Test abzuschließen.
Es kann einige Situationen geben, in denen das Hintergrundbild die Sichtbarkeit beeinträchtigen würde. Hintergrundbildern wie Selfies kann es an einheitlichen Farben fehlen und die Sichtbarkeit des Symbols beeinträchtigen. Sie können hier nicht viel tun, aber wie gesagt, Sie können sie gegen die sieben Grundfarben testen, um loszulegen.
Entscheiden Sie sich für Abstraktion und machen Sie Iterationen
Designer leiden unter einem ständigen Dilemma zwischen Abstraktion und realer Darstellung des Hauptobjekts innerhalb der Ikone. Mit dem Aufkommen von Flat Icons und UIs hat sich das Gewichtszeitalter stark in Richtung Abstraktion verschoben, aber auf eine reale Darstellung eines Objekts kann man nicht einfach verzichten. Echte Objekte oder skeuomorphe Symbole sind im App Store immer noch stark im Kommen, und dafür gibt es triftige Gründe.
Wenn Sie beispielsweise eine klangverbessernde App erstellen, können Sie einen skeuomorphen Verstärker in das App-Symbol zeichnen, anstatt es zu glätten oder ein Liniensymbol zu erstellen. Aber angesichts der Tatsache, dass ein Verstärker keine vertraute Ware ist, würde seine Wahrnehmung abnehmen, wenn er abgeflacht wird. Für Dinge, die relativ häufig sind und in der Masse allgemein bekannt sind (eine Kamera für eine Foto-App), können Sie auf jeden Fall mit einem flachen Symbol herauskommen. Wenn die App jedoch mit etwas Obskurem verbunden ist, ist es besser, sie real oder skeuomorph zu halten.
Ein weiterer guter Weg, um zu einem guten Icon-Design zu gelangen, besteht darin, mehrere Iterationen mit skeuomorph und flach zu erstellen. Den zweiten Punkt können Sie dabei im Hinterkopf behalten. Machen Sie mehrere Iterationen, indem Sie jeweils ein paar Details entfernen. Stapeln Sie sie alle nebeneinander und entscheiden Sie, welche Ihnen am besten gefällt und warum.
Identifizieren Sie für Spiele einen Charakter
Das Erstellen von Spielsymbolen kann wirklich Spaß machen, da viele kreative Dinge durch das Erstellen eines Symbols erreicht werden können. Inmitten davon müssen Sie bemerkt haben, dass Spiele oft Geschichten und Charaktere haben. Wenn wir uns an die Regel halten, bei den Benutzern Kognition aufzubauen, können Gesichter von Charakteren aus dem Spiel selbst großartige Arbeit leisten. Tatsächlich ist dies der Grund, warum Charaktergesichter in Symbolen für Spiele-Apps so häufig vorkommen.
Wenn Sie ein Spiel machen, müssen Sie die Hauptfigur oder eine Figur finden, die allen Levels gemeinsam ist. Aufgrund der starken Vertrautheit des Charakters mit den Spielern kann der Charakter verwendet werden, um einen starken Rückruf für das Spiel zu erzeugen. Und aus dem gleichen Grund kann es auch zum App-Symbol für Ihre Spiele-App werden.
Sie können eine Farbpalette auswählen und Ihr App-Symbol um diese herum erstellen. Ehrlich gesagt wird es viel einfacher, wenn Sie sich für ein Gesicht entscheiden. Gleichzeitig müssen Sie jedoch möglicherweise einige zusätzliche Effekte hinzufügen, um es hervorzuheben.
Konsistente Farbpaletten und Konventionen für Symbole und UI
Die Benutzeroberfläche der App wird ein bestimmtes Thema und die Verwendung bestimmter Farben haben. Verwenden Sie am besten die gleichen Farben, um auch das Symbol zu gestalten. Sie können dasselbe auch mit bestimmten Elementen tun, die Sie innerhalb der Benutzeroberfläche implementiert haben, und sie im Symbol verwenden. Dadurch wird Ihr Design einheitlicher und führt zu einer stärkeren Erinnerung und Vertrautheit Ihrer App bei den Benutzern.
Kreativität rettet den Tag
Führen Sie eine Suche nach „to do apps” bei Google Play durch und Sie werden auf ein Raster voller Häkchen stoßen. Ja, die meisten Designer von To-Do-Apps konnten nur ein Häkchen als App-Symbol finden – ein gängiges Symbol für To-Do. Inmitten dieses Lärms hebt sich das Evernote-Symbol jedoch angenehm ab.
Suchergebnisse für den Begriff „to do apps”. Beachten Sie, dass das Evernote-Symbol unter anderem hervorsticht.
Die Idee der Ikone leitet sich von der Tatsache ab, dass ein Elefant niemals vergisst. Es ist mit einer brillanten Ausführung eines gefalteten Elefantenohrs gekoppelt, das einen Notizblock bezeichnet. Es unterscheidet Evernote sofort von anderen To-Do-Apps im Store und schafft eine starke Wahrnehmung.
Ein weiteres Beispiel für großartiges Icon-Design kann Pocket zugeschrieben werden. Zunächst einmal ist die Idee der App einzigartig. Lesezeichen existierten zwar schon seit langer Zeit, konnten die Benutzer jedoch nicht dazu bringen, die gespeicherten Inhalte erneut zu lesen.
Pocket hingegen verwendete Thumbnails, um eine klare visuelle Erinnerung zu schaffen. Die App löst eine „Diesen Inhalt speichern”-Emotion aus und wird durch das Symbol selbst klar und geschickt dargestellt. Die rote Form bezieht sich auf eine „Tasche”, während der Pfeil nach unten zweifellos „Download” darstellt.
Verwenden Sie keine Fotos oder Bilder
Neben den oben genannten Hinweisen können Sie auch die direkte Implementierung von Fotos und Bildern in das App-Icon vermeiden. Auch wenn Sie auf ein Foto verweisen, müssen Sie Ihre eigenen Vektoren in Illustrator oder Photoshop erstellen. Nur dann sieht es authentisch aus und wirkt magnetisch.
Es mag wie ein Klischee klingen, aber Sie müssen Ihr Design sauber halten. Ich habe bereits erwähnt, mehr Weiß oder Schwarz zu den Farben zu mischen, um den gewünschten perfekten Farbton zu erhalten. Dies ist sehr praktisch, um ein Symbol zu entrümpeln. Wenn einige Farben heller gemacht werden oder umgekehrt, sinkt der Gesamtrauschpegel an verschiedenen Stellen.
App-Symbole müssen wie beliebte Songs werden, die jeder erkennen kann, und die folgenden Design-Hacks helfen Ihnen dabei, ein großartiges App-Symbol zu erstellen. Ich hoffe, Sie fanden die Punkte wertvoll. Wenn Sie etwas hinzuzufügen oder vorzuschlagen haben, schreiben Sie unten Ihre Kommentare.