Share
Infinite Skills ist ein Software-Unternehmen, das Lernmaterialien für Menschen entwickelt, um das Wissen über eine Vielzahl von Anwendungen zu erweitern, von Industriesoftware bis hin zu gängigen Textverarbeitungsprogrammen. Infinite Skills bat mich, eine Reihe von Anwendungssymbolen zu erstellen, die ihre Software begleiten werden. Unnötig zu sagen, mit meinem unersättlichen Appetit auf Ikonendesign und Branding war das Spiel angesagt!
Das Projekt musste bewertet werden, um den richtigen Ansatz zu ermitteln. Da der Start dieser Apps in den iTunes Store ein neues Unterfangen für sie war, hatten sie keine vorhandenen Icon-Design-Parameter, die ich brauchte, um darin zu bleiben. Ich habe diese Gelegenheit genutzt, um das Problem wirklich zu analysieren und die bestmögliche Lösung zu finden.
Zuerst und vor allem musste ich entscheiden, welche Elemente in der gesamten Icon-Kampagne vereint werden sollten. Ich wusste, dass sie als Familie arbeiten müssten, aber immer noch so verschieden waren, dass der Betrachter sie schnell als unterschiedliche Softwaretitel erkennen würde.
Durch offene Kommunikationswege wurde festgestellt, dass es eine Wäscheliste mit Softwaretiteln geben würde (was Sie unten sehen, ist nur eine unvollständige Liste.) Ich ließ den Kunden mir die erwarteten Titel senden, damit ich die Neigung zum gemeinsamen Symbolen besser einschätzen konnte Ähnlichkeiten im Verlauf der Erstellung aller Icons.
Nach langem Überlegen, Skizzieren und Nachdenken entschied ich, dass es vier Kernelemente geben würde, die die einzelnen Symbole unterscheiden: Buchstaben, Farben, Grafik und Hintergrund.
Jedes der Symbole würde hauptsächlich durch einen großen Buchstaben erkannt. Ich habe eine serifenlose und fette Schrift verwendet, damit sich das Symbol nicht schwach oder zu luftig anfühlt. Der Buchstabe wird um einen Winkel gedreht, um ein dynamischeres Aussehen zu erhalten.
Da mehrere Elemente beispielsweise mit dem Buchstaben "F" beginnen, hilft die Farbe weiter, einen doppelten Buchstaben von einer anderen Anwendung zu unterscheiden. Adobe Flash und Apple Final Cut Pro sind hervorragende Beispiele.
Jedes der Icons würde auch eine verbesserte Grafik erhalten, die angibt, was der Softwaretitel Ihnen beibringen wird. Wo Softwaretitel allgemeiner waren, habe ich auch eine generische Grafik verwendet.
Die Hintergrundtextur ist ein subtiler Unterschied, der auf den ersten Blick nicht wahrgenommen werden soll. Wenn möglich, übernimmt jede Hintergrundtextur die Richtung der Software. In Final Cut Pro besteht der Hintergrund aus Sternen, die mit Film, Kamera, Filmen usw. Übereinstimmen.
Nachdem ich mich für die verschiedenen Elemente entschieden hatte, arbeitete ich an der Bearbeitung der Wireframes für jedes der Icons. Ich wollte mir die beste Gelegenheit bieten, die Icons in Einklang zu bringen. In diesem Sinne arbeitete ich an mehreren Wireframes gleichzeitig.
Dies machte es sehr klar, welche Gegenstände zu verbessern waren, um als Einheit enger zusammenarbeiten zu können. Das Arbeiten an zwei oder drei Symbolen war in der Regel eine gute Grundlage, um die Ähnlichkeit festzustellen. Als Icons fertig waren, habe ich immer auf sie verwiesen, sodass ich sicher bin, dass auch die kleinsten Details konsistent bleiben.
Da die Buchstaben pro Symbol variierten, musste ich kreativ und flexibel sein, was die begleitenden Grafiken angeht. Manchmal war ein Brief sehr breit und manchmal waren Briefe wirklich groß. Um diesen Unterschied auszugleichen, habe ich zwei Arten von Grafiken implementiert. Lange und dünne Gegenstände liefen in einem Winkel von links oben nach rechts unten. Wenn ein entsprechender Artikel nicht dünn und flach war, habe ich ihn eher quadratisch gezeichnet und vor den Brief gestellt. Es war wichtig, die Verwendung jedes dieser Vorkommnisse zu beachten, so dass eines nicht übermäßig verwendet wurde.
Beim Erstellen einer Symbolserie muss sichergestellt werden, dass die Symbole so aussehen, als ob sie zusammengehören. Es gibt viele Faktoren, die die erfolgreiche Ausführung beeinflussen, darunter: Thema, Orientierung und Oberfläche, um nur einige zu nennen.
Oft gibt es Parameter, die umgearbeitet werden müssen. Ein Parameter, dem ich während dieses Projekts begegnete, war, dass der Kunde ein Gebäude im AutoCad-Symbol und eine Kamera im Photoshop für Fotografen-Symbol verwenden wollte. Wie Sie wissen, unterscheidet sich ein Gebäude im Detail von etwas, das so klein wie eine Kamera ist.
Für Photoshop für Fotografen zeichnete ich viel von den Details, die Sie in einer Kamera sehen würden. Natürlich etwas destilliert, wenn man bedenkt, dass das entstandene Stück eine Ikone ist. Vergleichen Sie das mit einem Gebäude. Um das Gebäude zu integrieren, musste ich es so veranschaulichen, dass es über genügend Details verfügte, um als Gebäude gelesen zu werden, obwohl der Maßstab viel kleiner ist. Trotzdem reduzierte ich das Gebäude auf die Kernelemente, die einbezogen werden mussten, damit es als solches erkannt werden konnte - Fenster, Gegenstände auf dem Dach und Verkleidungen waren das Wesentliche, das bleiben würde.
Infinite Skills wusste, dass sie Inhalte für bestimmte Segmente innerhalb einer Benutzergruppe produzieren würden. Beispielsweise haben sie einen allgemeineren Softwaretitel, der sich an Photoshop-Benutzer richtet. Sie haben auch eine andere Version erstellt, die speziell für Fotografen gedacht ist. Typischerweise wird die Versionierung durch eine Schnipsel (Wörter, die in einem Winkel über die Kante von etwas geschrieben werden) bezeichnet. In diesem Fall hat der Kunde jedoch eine völlig neue entsprechende Grafik-Kamera vorgezogen.
Es versteht sich von selbst, dass die Icons als Einheit wirken müssen. Es ist jedoch auch wichtig, dass der Betrachter das Interesse an der Anzeige der Elemente nicht verliert, weil sie sich bei der Ausführung langweilen. In diesem Sinne habe ich es mir zur Aufgabe gemacht, die Illusionen verschiedener Oberflächen auf jedem der Begleitgegenstände im Vergleich zu dem nebenstehenden Buchstaben zu erzeugen.
Es gibt keine feste Regel, dass Ikonen auf diese Weise angegangen werden müssen, sondern eher eine künstlerische Lizenz, die ich ausgeübt habe. In manchen Fällen ist es einfach unlogisch, die Illusion einer anderen Oberfläche zu erzeugen, z. B. im Microsoft Excel-Symbol, wo man erwarten würde, dass ein Balkendiagramm reflektierend ist. Auf dem Adobe Illustrator-Symbol wird der Stift jedoch matt aussehen während das "Ich" sehr reflektierend wirkt. Dies weckt ein wenig mehr Interesse und hilft, das Objekt in einem realistischeren Licht darzustellen.
Während jedes Symbol mehrere Stunden von Anfang bis Ende benötigt, habe ich einen noch größeren Einblick in die Erstellung eines Teils eines der Symbole erhalten. Ich hoffe, Sie haben viel über meinen Prozess gelesen und werden einige der Informationen, die Sie hilfreich fanden, auf Ihre eigenen Projekte anwenden.
Zeitraffer-App-Icon-Erstellung von Jonathan Patterson auf Vimeo.
Accentsconagua