Share
Icons sind ein wesentlicher Bestandteil jeder iOS-Anwendung. Sie vermitteln potenziellen Nutzern den ersten Eindruck Ihrer App und bleiben für diejenigen, die die App herunterladen, ein zentraler Schwerpunkt. Wir alle wissen, wie wichtig es ist, einen guten ersten Eindruck zu schaffen und mit Ihrem Design eine starke Marke aufzubauen. Dieses Tutorial zeigt Ihnen 8 großartige Möglichkeiten, genau dies zu tun!
Dies ist ein Kinderspiel im Icon Design, aber wenn Sie durch den App Store gehen, gibt es überraschend wenige Icons, die dies gut machen. Suchen Sie beispielsweise nach "Zungenbrechern", und Sie sehen eine Reihe von Symbolen wie diese:
Wenn Sie alle Wörter von diesen Symbolen genommen hätten, wie viele würden Ihnen "Zungenbrecher" sagen? Aus diesem Grund hören Sie oft "keine Wörter auf Symbolen verwenden" - zu viele Leute verwenden es als Krücke, um zu beschreiben, worum es in der App geht!
Ich habe das einzige Symbol vergrößert, das dem Begriff "Zungenbrecher" wirklich gerecht wird. Ein paar Verbesserungen, die ich vorschlagen würde, sind die Silhouette des Kopfes zu skizzieren und möglicherweise größer zu machen. Dadurch wird die verdrehte Zunge deutlich sichtbar und der Umriss lässt sie vom Hintergrund abspringen. Wenn nicht alle Twisters spezifisch für Großbritannien sind, würde ich die Flagge verlieren und stattdessen einen Hintergrund wählen, der die Darstellung kontrastreicher erscheinen lässt.
Die primäre App von Starbucks hat ein tolles Symbol und ein App-Design, aber die App, die das Bargeld auf Ihrer Starbucks-Geschenkkarte erfasst, verblasst im Vergleich. Das Symbol ist im App Store-Raster kaum lesbar und das Logo ist praktisch unsichtbar.
Was hätten sie sonst tun können? Wie wäre es, wenn das Symbol wie eine Geschenkkarte aussieht? Ziehen Sie das Markenzeichen Grün ein, machen Sie das Logo groß und sichtbar, und fügen Sie das Magnetband "Geschenkkarte" hinzu, das darüber verläuft. Oder vielleicht eine Abbildung mit einer Geldbörse mit dem Starbucks-Logo?
Eine weitere Möglichkeit, Ihrem Icon und App-Design mehr Tiefe zu verleihen, besteht darin, ihm konzeptionelle Tiefe zu verleihen. Im überfüllten Raum von To-Do-Apps ist das Häkchen eine schöne visuelle Metapher für „erledigt“, wird jedoch bis zur Sinnlosigkeit überstrapaziert.
Die einzigen Apps, die sich von der Masse abheben, haben dem kommunikativen Haken eine zusätzliche konzeptionelle Ebene hinzugefügt.
2Do - Dieses Symbol ähnelt einem Stapel von Dokumenten, die überprüft werden müssen. Das genähte Leder bildet einen schönen Kontrast zu der reinen Post-It-Notenfarbe und der glatten Textur.
Dinge weglegen - Dinge ablegen ist ein großartiges Beispiel für konzeptionelles Denken und Design. Warum eine neue To-Do-App erstellen, wenn die meisten von uns wirklich herausfinden möchten, was wir bis morgen verschieben können? Wenn Sie ein Problem genau gegenüber Ihrer Konkurrenz betrachten, kann dies zu ziemlich kreativen und unterhaltsamen Ergebnissen führen. Das Artwork sagt genau, worum es bei der App geht - einen Posteingang mit einem „Vorwärtspfeil“, und wenn Sie das Raster mit Symbolen über der Farbauswahl betrachten, hebt es sich wirklich von der Masse ab.
Taska - Das Symbol von Taska sieht aus wie ein Stapel Papiere, die ordentlich auf einem Schreibtisch liegen. Obwohl es sich nicht um ein tiefes Konzept handelt, ist dieses Symbol schön illustriert. Beachten Sie die Details der Schattierung des Holzhintergrunds, die dem Stapel Tiefe verleiht, sowie die Schärfe der Papierkanten und das Häkchen. Die Papiere scheinen sich direkt vom Bildschirm abzuheben, wodurch sie aus dem Raster von veralteten Haken kommen.
Ihr App-Symbol ist das erste Versprechen, das Sie dem Benutzer geben. Es sagt:
Wenn die Leute ein hochwertiges Symbol sehen und die App Mist ist, erhalten die Leute PO. Wenn die Leute denken, dass das Symbol „x“ bedeutet und die App tatsächlich „y“ ausführt, erhalten sie ein PO. Erfüllen Sie das Versprechen Ihrer App an den Benutzer!
Um sicherzustellen, dass Sie Ihre Versprechen halten, müssen Sie sicherstellen, dass die Grafiken in der App mit dem Symbol übereinstimmen. Ausgaben sind ein hervorragendes Beispiel für ein Symbol, das sehr genau die Funktion der App beschreibt (Ausgaben verfolgen) und wie ein Entwurfskonzept von Symbol zu App erstellt wird.
Dies ist eine Überraschung für viele Designer, die sich mit der Entwicklung von iPhone- und iPad-Icons beschäftigen. Die Art und Weise, in der Ihr Design in Photoshop oder sogar im iPhone-Simulator verspottet aussieht, unterscheidet sich erheblich von der Darstellung auf einem tatsächlichen Gerät. Warum? Einige Gründe:
All-in Yoga ist ein hervorragendes Beispiel für eine provokante und dennoch geschmackvoll illustrierte Silhouette, die ausführlich beschreibt, worum es in der App geht.
All-in-Yoga
Wenn Sie eine App für eine bekannte Marke entwerfen, verwenden Sie sie! Im Folgenden finden Sie Beispiele für Apps, die sich hervorragend im App Store abheben, indem sie ein erkennbares Logo, einen Namen oder ein Gesicht zeigen, das mit der App zusammenhängt. Diese Apps können Ihnen zwar nicht genau sagen, was die App tut, aber sie vermitteln einen Eindruck des Inhalts, den Sie basierend auf dem Bild erhalten.
Nike - wahrscheinlich etwas Fitness bezogen
NBC Nächtliche Nachrichten - Nachrichtensendungen aus dem Programm
Madonna - Musik oder Videos
Jamie Oliver - Rezepte
Mad Libs - wahrscheinlich eine App-Version von MadLibs?
Was auch immer Sie tun, verschwenden Sie nicht das Geschenk einer erkennbaren Marke! Diese können erkennbar sein, wenn sie gesprengt werden:
Aber sehen Sie, was passiert, wenn ihre schwachen Silhouetten mit anderen Symbolen im geschäftigen App Store-Raster konkurrieren. Wo ist Rachel? iCarly?
Betrachten Sie nun die Verbesserung mit nur wenigen kleinen Änderungen:
Sie sind auch im App Store-Raster besser erkennbar:
Das Nachdenken und Ausführen dieser Optimierungen dauerte in Photoshop weniger als eine Stunde:
Rachel Ray - Selbst wenn Rachels Gesicht nicht erkennbar war, hat sie ein großartiges Lächeln und Augen, die als Anlaufstelle dienen, um die Menschen anzuziehen. Die gute Nachricht, wenn Sie eine Ikone für eine Berühmtheit entwerfen, ist, dass Sie viel damit arbeiten müssen Gesicht der Person Im Allgemeinen werden die Augen eines Menschen zuerst von einer Gruppe generischer Ikonen zu menschlichen Gesichtern angezogen. Testen Sie dies selbst: Schauen Sie eine Minute von dem obigen Bild weg und schauen Sie dann zurück. Auf welchem Symbol landete dein Auge zuerst? Lass es mich in den Kommentaren wissen!
iCarly - Zugegeben, ich schaue nicht iCarly, aber der gesunde Menschenverstand sagt mir, dass die Hauptfigur der Show wahrscheinlich das beste Gesicht auf diesem Symbol ist, zusammen mit dem Tweeny-Show-Logo. Wenn sich Kinder oder Eltern nicht sicher sind, ob sie eine bestimmte Anwendung gefunden haben, unterstützt das Logo die App.
Eckart Tolle - Diese App ist eigentlich für seine Videoserie Stillness Within. Der Titel könnte sicherlich auf elegante Weise über die Unterseite geschrieben werden. Für Leute, die Eckart kennen, werden sie sich wahrscheinlich nicht um den Titel kümmern. Er zieht ein SEHR leidenschaftliches Publikum an, das sich für alles interessieren würde, was er veröffentlicht. Es reicht schon, sein Bild zu haben.
Hallo Kitty Stempelkalender - Wieder eine sehr erkennbare Marke, die zu viel Platz auf kleinem Raum hat. In der Originalversion ist das Hello Kitty-Gesicht kaum zu erkennen. Das ist schade, denn es ist das international anerkannte Markenzeichen der Marke. Eine sinnvolle Ergänzung wäre natürlich das Hinzufügen eines stempelförmigen Kalenders. Bei großen Marken muss jedoch beachtet werden, wie mit der Ikonografie der gesamten Suite von App-Produkten für diese Marke umgegangen wird. Ist dies die einzige App, die Hello Kitty produzieren wird? Wie werden sie mit Symbolen für die gesamte Marke umgehen??
Perez hilton - Dieses Symbol kann in verschiedene Richtungen gehen. Erkennen seine Leser ihn oder nur seinen Namen? Ich habe seinen Blog ein paar Mal gelesen und kann Ihnen nichts über sein Aussehen sagen. Er hat jedoch einige Illustrationen in seinem Blogheader, das Problem ist, dass das, was verwendet wurde, praktisch nicht wiederzuerkennen ist. Ich habe eine der anderen Illustrationen in seinem Blog verwendet, es für eine starke Silhouette gesprengt und die lauten Farben seiner Website angeglichen. Bam.
Nun, da ich gesagt habe, dass es in Ordnung ist, ein Foto zu verwenden, lassen Sie mich das klarstellen. Dies ist NUR OK, wenn es sich um eine erkennbare, prominente Figur handelt! Ich würde die Verwendung von Fotos aus anderen Gründen nicht empfehlen. Im Folgenden sind einige Beispiele für die unzureichende Verwendung von Fotosymbolen aufgeführt:
Möglicherweise haben Sie bemerkt, dass ich mich immer wieder auf das App Store-Raster bezieht. Dies macht das Icon-Design für das iPhone und das iPad vom Desktop- oder Web-Icon-Design einzigartig. Das Einkaufserlebnis im App Store ist wie das Suchen nach einem Fund in einem Secondhand-Laden. Es gibt einige nützliche und wunderschön gestaltete Produkte, umgeben von viel Bewegung und Trödel.
Das „Raster“ gilt für den iTunes Store, das iPhone und das iPad, also sollten Sie unbedingt testen, wie Ihr Symbol in all diesen Umgebungen aussieht, wenn es mit Apps verglichen wird, die höchstwahrscheinlich in derselben Liste wie Ihre positioniert sind. Sie müssen herausfinden, wie Sie das Auge des Benutzers von der Konkurrenz und zu Ihnen ziehen können!
Lassen Sie mir unten einen Kommentar mit Beispielen von Symbolen, von denen Sie glauben, dass sie es richtig machen!
Accentsconagua