So gestalten Sie App-Symbole

Wissen Wie erstelle ich eine App? ist nur die halbe Miete im App-Design. Wenn Ihre Kreation im App Store nicht auffällt, spielt es keine Rolle, wie gut sie ist. niemand wird es kaufen. Ein schönes, identifizierbares und einprägsames App-Symbol kann einen großen Einfluss auf die Popularität und den Erfolg einer App haben. Es kann jedoch eine einschüchternde Aufgabe sein, dieses einzigartige Design zu erstellen, mit dem Benutzer jedes Mal, wenn sie Ihr Produkt sehen, zuerst interagieren.

Wie genau macht man ein 'gutes' App-Symbol? Was bedeutet das überhaupt? Fürchte dich nicht, ich habe einige Tipps und Ratschläge zusammengestellt, um diese Fragen zu beantworten und dich auf dem Weg zu einem großartigen App-Icon-Design zu führen. Zu diesem Tutorial gibt es auch ein Video, das Sie auch unten finden.

Was ist ein App-Symbol?

Das erste, was Sie verstehen müssen, wenn Sie sich auf den Weg machen, um Ihr Symbol zu erstellen, ist, was genau ein App-Symbol ist und welche Aufgabe es ausführen muss. Ein App-Symbol ist ein visueller Anker für Ihr Produkt. Sie können sich das als ein kleines Stück Branding vorstellen, das nicht nur attraktiv und auffällig aussehen muss, sondern im Idealfall auch die Kernessenz Ihrer Anwendung kommuniziert.



Das Wort 'Logo' wird heutzutage nachlässig herumgeworfen. Icon Design und Logo Design sind nicht dasselbe. Während sie zweifellos markenähnliche Eigenschaften aufweisen, unterliegen App-Symbole vielen unterschiedlichen Einschränkungen.

Während sie zweifellos markenähnliche Eigenschaften aufweisen, sind App-Symbole nicht mit Logos identisch

Für den Designer ist es eine wichtige Unterscheidung: Logos sind skalierbare Vektor-Branding-Teile für Briefköpfe und Werbetafeln. Symbole sind meistens rasterbasierte Ausgaben, die so angepasst sind, dass sie auf einer quadratischen Leinwand, in bestimmten Größen und in bestimmten Kontexten gut aussehen. Der Ansatz, die Werkzeuge, der Job und damit die Erfolgskriterien sind unterschiedlich.

So ändern Sie die Größe einer Seite in Indesign

Aus praktischer Sicht erstellen Sie beim Erstellen eines App-Symbols eine Reihe von PNG-Dateien in verschiedenen Größen - von 29 x 29 Pixel bis 1024 x 1024 Pixel -, die mit Ihrer App gebündelt werden müssen. Diese sorgfältig ausgearbeiteten Designs werden in den vielen Kontexten des Betriebssystems verwendet, in denen Benutzer auf Ihre Anwendung stoßen - einschließlich App Store oder Google Play, Bedienfeld Einstellungen, Suchergebnisse und Startbildschirm.

App-Symbole können im Wesentlichen in jeder Anwendung erstellt werden, die Rasterdateien erstellen kann. Übliche Optionen sind jedoch Photoshop, Illustrator und Sketch. Kostenlose Tools wie appicontemplate.com bieten clevere PSD-Vorlagen, mit denen Sie schnell loslegen können.

Schauen wir uns nun einige der Best Practices für das Design von App-Symbolen an.

01. Mach es skalierbar

Ein App-Symbol muss die Lesbarkeit in verschiedenen Größen beibehalten

Ein App-Symbol muss die Lesbarkeit in verschiedenen Größen beibehalten

Einer der wichtigsten Aspekte eines Symbols ist die Skalierbarkeit. Da das Symbol an mehreren Stellen auf der Plattform und in verschiedenen Größen angezeigt wird, ist es wichtig, dass Ihre Kreation ihre Lesbarkeit und Einzigartigkeit beibehält. Es muss im App Store, auf Retina-Geräten und sogar im Einstellungsfenster gut aussehen.

Übermäßig komplizierte Symbole, die versuchen, zu viel auf die Leinwand zu drücken, sind häufig einer schlechten Skalierbarkeit zum Opfer gefallen. Ein sehr großer Teil der konzeptionellen Phasen des App-Icon-Designs sollte dem Überlegen gewidmet werden, ob ein bestimmtes Design ordnungsgemäß skaliert werden kann.

  • Das Arbeiten auf einer Leinwand mit einer Größe von 1024 x 1024 Pixel kann trügerisch sein. Probieren Sie Ihr Design auf dem Gerät und in verschiedenen Kontexten und Größen aus
  • Umfassen Sie die Einfachheit und konzentrieren Sie sich auf ein einzelnes Objekt, vorzugsweise eine einzigartige Form oder ein Element, das bei Skalierung seine Konturen und Eigenschaften beibehält
  • Stellen Sie sicher, dass das App-Symbol vor verschiedenen Hintergründen gut aussieht

02. Mach es erkennbar

Ein App-Symbol ist wie ein kleines Lied, und es ist eine Schlüsselkomponente für ein großartiges Icon-Design, es in all den Geräuschen des Geschäfts oder Ihres Homescreens leicht identifizieren zu können. So wie der Vers eines Songs beim Hörer Anklang finden muss, müssen auch die Formen, Farben und Ideen eines App-Symbols mitschwingen. Das Design muss ein Gefühl der Erinnerung und der Verbindung sowohl auf funktionaler als auch auf emotionaler Ebene schaffen.

Ihr Symbol wird unter Tausenden anderer Symbole um Aufmerksamkeit wetteifern, die alle dieselbe 1024px-Leinwand haben, um ihre Wirkung zu erzielen und ihre Verbindung mit dem Betrachter zu sichern. Während die Skalierbarkeit einen großen Teil der Erkennbarkeit ausmacht, ist dies auch die Neuheit. Die Suche nach einem Gleichgewicht zwischen diesen Eigenschaften ist der Kern der Disziplin.

  • Langweilige, übermäßig komplizierte Symbole sind der Feind der Erkennbarkeit. Versuchen Sie, Details von Ihrem Symbol zu entfernen, bis sich das Konzept verschlechtert. Verbessert dies die Erkennbarkeit?
  • Probieren Sie verschiedene Variationen Ihres Designs aus. Richten Sie sie in einem Raster aus und versuchen Sie, einen Blick darauf zu werfen, um zu sehen, welche Aspekte der Designs Ihre Aufmerksamkeit auf sich ziehen
  • Versuchen Sie, Ihre bevorzugten App-Symbole zu dekonstruieren und herauszufinden, warum Sie sie mögen und welche Methoden sie verwenden, um sich abzuheben

03. Halte es konsistent

Es gibt etwas zu sagen, um Konsistenz zwischen der Erfahrung der Interaktion mit Ihrem App-Symbol und der Interaktion mit der App, die es darstellt, herzustellen. Ich denke, gutes Icon-Design ist eine Erweiterung dessen, worum es in der App geht. Wenn Sie sicherstellen, dass sich die beiden gegenseitig unterstützen, entsteht eine unvergessliche Begegnung.

Die Gestaltung eines schlanken, einheitlichen Bildes Ihrer App in den Köpfen Ihrer Benutzer erhöht die Produktzufriedenheit, -bindung und -viralität. Kurz gesagt: Es ist ein großer Gewinn, sicherzustellen, dass Ihr Symbol harmonisch mit der Essenz, Funktionalität und dem Design Ihrer Anwendung zusammenarbeitet.

  • Eine Möglichkeit, die Konsistenz zwischen App und Symbol sicherzustellen, besteht darin, die Farbpalette Ihrer Benutzeroberfläche und Ihres Symbols in einer Linie zu halten und eine ähnliche und konsistente Designsprache zu verwenden - beispielsweise eine grüne Benutzeroberfläche, die durch ein grünes App-Symbol verstärkt wird
  • Obwohl dies nicht immer möglich ist, besteht eine Möglichkeit, die Verbindung zwischen Ihrer App und Ihrem Symbol zu verbessern, darin, dass sich die Symbolik des Symbols direkt auf die Funktionalität der App bezieht

04. Streben Sie nach Einzigartigkeit

Symbole können detailliert oder simpel sein. Stellen Sie jedoch sicher, dass sie kreativ und interessant sind und Ihre Absichten genau wiedergeben

Symbole können detailliert oder simpel sein. Stellen Sie jedoch sicher, dass sie kreativ und interessant sind und Ihre Absichten genau wiedergeben

Das ist fast selbstverständlich, aber versuchen Sie etwas Einzigartiges zu machen. Die Nachahmung eines Stils oder eines Trends ist vollkommen in Ordnung, aber machen Sie es sich selbst. Ihr App-Symbol konkurriert ständig mit anderen Symbolen um die Aufmerksamkeit der Benutzer, und das Hervorheben kann ein durchaus gültiges Argument für ein Design sein. Einzigartigkeit ist ein schwieriger Teil des Designs, da sie nicht nur von Ihren Fähigkeiten abhängt, sondern auch von den Entscheidungen anderer, die versuchen, eine ähnliche Aufgabe zu bewältigen.

  • Überlegen Sie, was alle anderen in Ihrem Raum tun, und versuchen Sie dann eine andere Richtung. Recherchiere immer - die Welt braucht kein weiteres Häkchensymbol
  • Eine einzelne Glyphe auf einem einfarbigen Hintergrund kann ein schwieriger Weg sein, wenn Sie einzigartig bleiben möchten. Spielen Sie mit verschiedenen Farben und Kompositionen und fordern Sie sich heraus, neue und clevere Metaphern zu finden
  • Farbe ist eine großartige und oft übersehene Möglichkeit, ein Konzept neu zu positionieren

05. Verwenden Sie keine Wörter

Dies ist einer meiner besten Haustierhüllen aller Zeiten. Nur in den seltensten Fällen ist es in Ordnung, Wörter in App-Symbolen zu verwenden. Wenn Sie sich auf ein anderes Werkzeug der Abstraktion zurückziehen müssen - das geschriebene Wort - würde ich sagen, dass Sie nicht die volle Kraft Ihres Bildarsenals nutzen.

Wörter und Bilder sind separate Darstellungswerkzeuge, und das Mischen in einer angeblich grafischen Darstellung führt häufig zu einer überfüllten und unscharfen Erfahrung, die schwerer zu dekodieren ist. Gibt es wirklich keinen besseren Weg, um die Anwendung zu visualisieren als mit trockenen Worten? Immer wenn ich Wörter in App-Symbolen sehe, habe ich das Gefühl, dass der Designer die Gelegenheit verpasst hat, ihre Absichten klarer zu vermitteln.

  • Es ist nicht erforderlich, den App-Namen in das Symbol aufzunehmen - er wird meistens dem Symbol in der Benutzeroberfläche beigefügt. Verbringen Sie stattdessen Ihre Zeit damit, ein cooles Bildkonzept zu entwickeln
  • 'Aber Facebook hat das' f 'in seinem App-Symbol', höre ich Sie sagen. Wenn Sie einen einzelnen Buchstaben verwenden und das Gefühl haben, dass er gut (und einzigartig) passt, verliert der Buchstabe seine „wortreichen“ Eigenschaften und wird von selbst zu einer Ikone. Dies ist jedoch häufiger die Ausnahme als die Regel
  • Ihr Firmenlogo und Ihr Name in einem Quadrat sind niemals eine gute Lösung. Haben Sie eine Markierung oder eine Glyphe, die innerhalb der Einschränkungen gut funktioniert? Wenn nicht, kommen Sie wahrscheinlich am besten auf etwas Neues. Denken Sie daran, dass Symbole und Logos nicht identisch sind und nicht in denselben Kontext gezwungen werden sollten

06. Machen Sie es auffällig

Im App Store und bei Google Play gibt es viele Beispiele für langweilige und unbefangene Icon-Designs. Ihr Symbol ist die stärkste Verbindung, die Sie mit Ihrem Benutzer haben. Es ist das, was sie zuerst sehen werden, wenn sie Sie im App Store treffen. Es ist das, womit sie jedes Mal interagieren, wenn sie Ihre App verwenden. Es ist das, woran sie denken, wenn sie an Ihre App denken.

Alles andere als eine gut durchdachte, passende und attraktive Lösung ist das Versagen, Ihr größtes visuelles Gut zu nutzen. Ihr App-Symbol sollte kein nachträglicher Gedanke sein, sondern ein funktionierender Teil des Prozesses sein.

App-Symbole sind winzige kleine Teile konzentrierten Designs, und dieser Prozess des Erstellens hat etwas wirklich Anziehendes. Unabhängig davon, ob es sich um detaillierte oder vereinfachte, konventionelle oder kreative Symbole handelt, haben diese Symbole eine einheitliche Eigenschaft: Sie alle erfassen die Aufmerksamkeit der Menschen auf engstem Raum bei völlig gleichen Wettbewerbsbedingungen. Es ist eine besondere Herausforderung, und die Antwort liegt immer innerhalb derselben Pixel.

Es besteht kein Zweifel, dass es einschüchternd sein kann, Ihre Bewerbung mit einem einzigartigen Stück Grafikdesign zu krönen, aber ich hoffe, dass die Tipps, die ich hier skizziert habe, Sie sicherer machen, die Herausforderung anzunehmen. Jetzt mach ein fantastisches App-Symbol!

Verwendung des magnetischen Lasso-Werkzeugs in Photoshop

Dieser Artikel wurde ursprünglich in net veröffentlicht, dem weltweit meistverkauften Magazin für Webdesigner und Entwickler. Abonnieren Sie hier .

Weiterlesen: