Share
Die Ikonografie ist heutzutage ein fester Bestandteil jedes UI-Designprojekts. Icons haben die Fähigkeit, Ideen, Funktionen und Bedeutungen in einer gemeinsamen Bildsprache zu kommunizieren. Untersuchen wir die Menge an Arbeit, die zum Erstellen eines Symbolsatzes erforderlich ist, sowie die logischen Phasen, die dabei zu beachten sind.
Für den Zweck dieses Artikels arbeiten wir mit einem Ikonensatz, den ich kürzlich mit dem Namen Uicons entworfen habe.
Die Webdesign-Community liebt große Ressourcen. Open Source oder nicht, sie erleichtern uns das Leben als Designer. Bevor Sie mit der Erstellung eines eigenen Iconsets beginnen, ist es eine gute Idee, zu prüfen, ob bereits eines vorhanden ist, das Ihren Anforderungen entspricht.
Der erste Schritt besteht darin, vorhandene Symbolsätze zu überprüfen. Sie können sich Zeit und Energie sparen, wenn Sie nicht das wiederherstellen, was bereits draußen ist.
Bei der Platzierung handelt es sich um den Unterschied zwischen Ihrem vorgeschlagenen Symbolsatz und einem von tausend bereits vorhandenen Symbolsätzen. Das folgt wirklich aus unserer Forschungsphase; ohne zu wissen, was bereits verfügbar ist, woher wissen Sie, ob ein Bedarf besteht oder nicht?
Die Auswahl an Symbolen ist riesig und Sie müssen entscheiden, welchen Stil Ihre Icons haben werden. Ob es sich um Monoton, Vollfarbe, Mehrfarbig, Dreidimensional, Cartoon, Realistisch, Silhouetten, Handgezeichnet oder Pixel handelt, wählen Sie einen Stil aus und bleiben Sie dabei.
Bevor ich Uicons erstellte, fand ich ein Bedürfnis nach mehrschichtigen Vektor-Icons, die pixelgenau waren. Ich wollte ein Icon-Set, das mehr Tiefe und Details bietet als die meisten der vorhandenen Mono-Icon-Sets, ohne dass farbige Icons verwendet werden müssen.
Sobald Sie einen Unterschied gefunden und einen Stil ausgewählt haben, ist es Zeit für die Planungsphase.
Bei der Planung geht es einfach darum zu entscheiden, welche Icons Sie in Ihr Set aufnehmen möchten. Sie müssen sich überlegen, an wen Ihr Icon-Set anspricht, und dann eine Liste (am besten als Tabellenkalkulation erstellt) erstellen, die auf diesen Parametern basiert.
Ein guter Tipp ist, Ihre Liste in Unterkategorien wie soziale Medien, Dateitypen, Transport usw. zu unterteilen. Sie werden dies nicht nur in Ordnung halten, sondern auch während der Entwurfsphase nützlich sein. Durch das Abhaken der Liste wird die Liste der Symbole weniger abschreckend.
Die Planungsphase ist auch der perfekte Zeitpunkt, um zu entscheiden, in welcher Größe oder in welchen Größen Sie Ihre Icons anbieten. Übliche Abmessungen sind 16, 32 und 48 Pixel. Es werden jedoch immer mehr Symbolsätze in skalierbaren Formaten wie .CSH (Photoshop-Formdatei) und Schriftformaten angezeigt. Später mehr über Formate.
Während der Planungsphase ist es gut, über Ihre bisherigen Forschungsarbeiten in der ersten Phase nachzudenken. Es gibt Hunderte von Glyphen und Symbolen, die für ein komplettes Set in Betracht gezogen werden sollten. Sie können sich diese nicht ohne Referenzmaterial merken.
Seien Sie in der Planungsphase hart an sich. Scheuen Sie sich nicht, Nein zu einer Idee zu sagen oder die Liste zu streichen - sie kann schnell lächerlich wirken. Das Erstellen von Qualitätssymbolen ist zeitaufwändig und das Erstellen eines Satzes von 5000 (zum Beispiel) dauert nicht nur ewig, sondern ist für den Endbenutzer schwierig zu verwalten.
Während der 4 Monate, die es dauerte, Uicons zu erstellen, sah ich mich bis zur Veröffentlichung ständig auf der Liste. Auch jetzt denke ich immer noch darüber nach, welche Icons in der nächsten Version enthalten sein sollen.
Ihre Liste sollte jetzt mit Ideen für Ihre Kick-Ass-Icons gefüllt sein. Jetzt können Sie mit dem Entwerfen beginnen.
In den Phasen 2 und 3 haben Sie sich für Ihren Icon-Stil entschieden. Ihr spezifischer Stil wirkt sich darauf aus, welche Anwendung oder Methode Sie zum Erstellen Ihrer Symbole verwenden.
Im Falle von Uicons habe ich skalierbare Icons (Vektoren) erstellt, mit denen Benutzer die Größe ohne Qualitätsverlust ändern können. Die meisten Designer verwenden Illustrator oder andere Vektorgrafiken, jedoch kann ein Vektorprogramm das Leben schwer machen, wenn Sie von Hand gezeichnete Pixelsymbole erstellen. Wählen Sie die richtige App für den Job.
Wenn ich jetzt "Inspiration" sage, meine ich nicht "Plagiat". Machen Sie es sich selbst.
Icons sind Grundformen, die etwas erkennbar machen. Es kann schwierig sein, sich alle Ihre Symbole vorzustellen und sie von Grund auf zu visualisieren. Zum Glück haben Sie die in Phase 1 durchgeführten Untersuchungen und verfügen über eine Liste von Referenzpunkten für die visuelle Inspiration.
Es ist gut, mit alternativen Designideen für Ihre Icons herumzuspielen. Es gibt mehrere Möglichkeiten, einen Store darzustellen, Tools darzustellen und alles darzustellen. Seien Sie kreativ. Versuchen Sie nicht nur eine Standarddarstellung des Themas Ihres Symbols anzubieten, sondern auch eine neue Perspektive zu bieten. Wenn jeder Icon-Designer die gleichen Ideen auf die gleiche Weise liefern würde, wäre die Benutzeroberflächenwelt ziemlich langweilig.
Nur weil Sie etwas entworfen haben, heißt das nicht, dass es den endgültigen Schnitt machen muss. Seien Sie wählerisch bei dem, was Sie für die Öffentlichkeit freigeben. Im Fall von Uicons blieben etwa 10% der Symbole aus irgendeinem Grund auf dem Boden der Schneiderei.
Die Entwurfsphase ist offensichtlich die zeitaufwendigste Phase des gesamten Projekts, daher ist Ausdauer, Durchhaltevermögen und Beständigkeit wichtig.
Nicht wirklich eine dedizierte Phase, sondern eine übergreifende Herangehensweise an Ihr Iconset. An allen Punkten des Designprozesses sollten Sie sich bewusst sein, dass Ihr Icon in Stil und Aussehen konsistent ist. Wenn Sie sich während des Prozesses nicht zu sehr um die Konsistenz sorgen, wird die Kontinuität zu einer dedizierten Phase, wenn Sie am Ende alle Icons Ihrer Symbole überarbeiten.
Eine unzureichende Beachtung der Konsistenz kann zu ungleichmäßigen Gewichten, falschen Größen, falschen Perspektiven oder einfach nur zu falschen Ergebnissen führen. Machen Sie nach jedem Symbol einen Schritt zurück und sehen Sie, wie es zu den bereits erstellten passt. Es kann leicht sein, die ungeraden herauszupicken.
Möglicherweise haben Sie sich dafür entschieden, Ihr Icon-Set in einem Vektorformat wie .EPS, .AI oder .SVG bereitzustellen. In diesem Fall haben Sie einen Teil der Arbeit aus dem Prozess herausgeschnitten. Sie können noch schlauer sein und Ihre Icons als Zeichensatzdatei oder als .CSH-Datei freigeben. Jede dieser Optionen macht einen erfahrenen Designer wie Ihr Icon-Set noch mehr. Um diesen Weg zu gehen, ist etwas mehr Aufwand erforderlich, da Sie Ihre Illustrator-Symbole in ein anderes Format konvertieren müssen. Die zusätzliche Arbeit bringt jedoch enorme Vorteile.
Aufgrund meines Unterschiedes beim Design von Uicons hatte ich zu diesem Zeitpunkt etwas mehr Arbeit vor mir. Ich wollte mehrschichtige Vektor-Icons erstellen, die pixelgenau waren. Ich hätte die vielschichtige Sache in Illustrator machen können und sie so belassen, dass sie in Photoshop kopiert und eingefügt werden können, aber ich wollte pixelgenaue Vektoren in einem Rasterprogramm.
Photoshop ist großartig. Das heißt, bis Sie mit dem Erstellen von Symbolen beginnen. Aus vielen guten Gründen erlaubt Photoshop Abweichungen bei der Pixelbreite. Sie können ein halbes Pixel oder sogar zwei Drittel haben, wenn Sie möchten. Das so genannte Anti-Aliasing eignet sich hervorragend für Schriftarten und Bézier-Kurven, kann jedoch frustrierend sein, wenn pixelgenaue Icons erstellt werden.
Uicons mussten mehrere Vektorformen unabhängig von Illustrator in Photoshop importieren, ausrichten, deren Größe anpassen und sie anpassen, um sie dann für die Pixel-Perfektion zu optimieren, indem die Pfade schrittweise verschoben werden, um saubere Kanten zu erhalten.
Herzlichen Glückwunsch, es soweit zu schaffen! Es ist keine kleine Aufgabe, ein eigenes Icon-Set zu erstellen. Nun, da alle harte Arbeit erledigt ist, müssen Sie nur noch Ihre Icons für die Öffentlichkeit freigeben. An diesem Punkt haben Sie sich entschieden, ob Sie dieses Design als kostenloses Symbol für die Design-Community anbieten oder ob Sie eine kleine Erstattung für die Hunderte von Stunden benötigen, die Sie mit der Erstellung Ihres Killer-Icon-Sets verbracht haben.
Auf jeden Fall benötigen Sie eine Bühne, von der aus die Vorschau und der Download von den Benutzern abgerufen werden können. Die kostenlose Option ist am einfachsten, da Sie sie buchstäblich an eine Reihe von Websites und Blogs für grafische Ressourcen senden können, um sie zu veröffentlichen, sich zurückzulehnen und auf die Kudos zu warten.
Wenn Sie jedoch Ihr Killersymbol-Set verkaufen möchten, haben Sie mehr Arbeit vor sich. Der einfachste Weg, sie zu verkaufen, besteht darin, sie auf einer von mehreren Designressourcen-Websites wie GraphicRiver zu hosten. Der Download und die Bezahlung werden für Sie erledigt und Sie haben den Vorteil, dass der vorhandene Site-Traffic genutzt wird.
Wenn Sie proaktiver sind, können Sie auch Ihre eigene Website erstellen, um Ihre günstigen Symbole anzuzeigen und herunterzuladen. Wenn dies der Fall ist, gibt es großartige Optionen, mit denen Sie sich um die Download- und Zahlungsseite kümmern können.
Dank digitaler Lieferservices wie Fetch und Quixly können Sie Ihr Icon-Set ganz einfach verkaufen, indem Sie sich um die Bestellung, den Download und die Zahlung kümmern. Sie müssen nur eine coole Website entwerfen und erstellen, um Ihre Arbeit anzuzeigen. Um all das schwere Tech-Zeug wird gekümmert.
Wie jede Bildsprache muss auch die Ikonografie klar und prägnant sein. Was auch immer Sie mit Symbolen darstellen möchten, hält es einfach und klar, und Ihre Chancen auf ein allgemeines Verständnis sind größer.
Accentsconagua