ICON-Wissen, das alle Designer kennen sollten

Iconsgehören zu den unverzichtbaren Fähigkeiten von UI-Designern, aberwie wirdein gutesIcongestaltet?

Heute möchten wir Ihnen eine umfassende Zusammenfassung des Wissens über Icon-Design geben:

Zunächst sollten Sie die folgenden Punkte berücksichtigen, bevor Sie ein Icon entwerfen (das Blatt Papier wird stillschweigend aufgeschrieben):

1. Für welches Gerät ist Ihr Icon hauptsächlich gedacht?
2. Welcher Stil des Icons wird benötigt?
3. Gibt es weitere Anforderungen an das Design?

Kommen wir nun zum Entwurfsprozess:
1. der Entwurf beginnt mit einem Raster

Wir werden verschiedene Rastergrößen für verschiedene Designs verwenden. Nehmen wir ein 32*32-Raster als Beispiel.

Die 2pxam Rand des Rasterssind der unantastbare Teil meines Designs, der weiße Raum. Wenn es keine besonderen Umstände gibt, werde ich meine Design-Grafiken nicht in diesen Randbereich eindringen lassen. Der Zweck des Weißraums besteht darin, das Design nicht zu voll werden zu lassen und dem Benutzer ein Gefühl des Atems zu vermitteln.

Die Struktur eines Symbols besteht aus zwei Teilen: Form und Richtung. Wenn Ihr Symbol einen Rahmen hat, zeichnen Sie normalerweise eine Form wie ein Quadrat, einen Kreis, ein Dreieck, ein Rechteck usw. in der Position des Begrenzungsrahmens als Rahmen.

Kreisförmige Symbole werden im Raster zentriert. Die vier Kanten eines kreisförmigen Symboldesigns berühren die Kanten des Inhaltsbereichs, aber nicht den weißen Raum. Einige kleine Formen und Ecken werden sich außerhalb des Kreises befinden, aber keine Sorge, das ist normal.

Quadratische Symbole werden im Allgemeinen ebenfalls im Raster zentriert, berühren aber in den meisten Fällen auch die Ränder des Inhaltsbereichs. Schauen wir uns das folgende Bild an: Das Bild ist in drei quadratische Bereiche (blau, orange und grün) unterteilt, wobei sich die meisten Grafiken in den Symbolen im mittleren orangenen Bereich befinden. Der Anteil der Grafiken in den einzelnen Bereichen hängt von der visuellen Gesamtwirkung des Symbols ab, und das ist etwas, das Sie üben müssen, um ein Gefühl dafür zu bekommen, damit Sie sich damit wohlfühlen.

In einem Raster von 32 Pixeln werden Sie einen vertikalen und horizontalen Abstand von 20 Pixeln zu den 28 Pixeln feststellen, was im Allgemeinen die Regel ist, die Sie bei der Gestaltung von Icons befolgen sollten.

Bei unregelmäßigen Icon-Designs wird ein Kreis für die Ausrichtung verwendet, wie unten gezeigt. Wie Sie sehen können, berührt die Grafik bereits den Rand des Kreises, Sie müssen hier nicht besonders genau sein, nur nahe genug.

Sie müssen jedoch bedenken, dass die Rasterregeln nicht für alle Entwürfe gelten, denn die Natur eines Symbols ist viel mehr als nur die Festlegung solcher Regeln. Raster helfen Ihnen, die Konsistenz Ihres Icon-Designs zu verbessern, aber wenn Sie die Wahl haben zwischen einem tollen Icon und dem Befolgen der Regeln, werden Sie sich sicher auch für das tolle Design entscheiden.

2. Beginnen Sie mit einer einfachen geometrischen Figur

Das Entwerfen von Icons ist wie Skizzieren: Beginnen Sie mit einem einfachen, groben Kreis, Rechteck oder Dreieck. Bei der Gestaltung kleiner Icons sehen handgezeichnete Darstellungen oft nicht so gut aus, daher ist es besser,mitAIzu arbeiten. Der Entwurf mit einer einfachen Geometrie ist genauer (vor allem an den Kanten von Kurven), lässt sich schneller anpassen und passt besser in das Rastermuster.

3. Angaben zu Kanten, Ecken, Kurven und Winkeln

Soweit möglich, sollten Kanten, Ecken, Kurven und Winkel so gestaltet werden, dass sie einigen mathematischen Normen folgen, ohne zu interessant zu sein. Mit anderen Worten: Verlassen Sie sich nicht zu sehr auf Ihre Augen, sondern halten Sie sich in einigen Details an die Normen, denn wenn diese Elemente nicht konsistent sind, beeinträchtigt dies die Qualität des Symbols.

Winkel

Meistens verwende ich in meinen Entwürfen einen 45-Grad-Winkel oder ein Vielfaches davon. 45-Grad-Winkel sehen einheitlich aus (und sind in Pixeln stärker), und diese perfekte Diagonale ist für das Auge angenehm und klar. Dieses Muster sorgt auch für die Einheitlichkeit einer Reihe von Symbolen. Wenn ich gegen diese Regel verstoßen würde, würde ich wahrscheinlich einen halbierten Winkel (22,5oder11,5Grad) oderein Vielfaches von15verwenden, und natürlich entsprechend anpassen. Die Verwendung von 45 Grad hat den Vorteil, dass die Regel auch dann nicht verletzt wird, wenn der Winkel umgekehrt wird.

Kurven

Kurven sind ein besonderer Test für das Können: Selbst wenn das Bild von schlechter Qualität ist, zeigt ein Blick auf die Kurven, wie gut der Designer ist. Außerdem weist die Messung des menschlichen Auges immer einige kleine Fehler auf, und die Augen und Hände der meisten Menschen können ein so hohes Maß an Koordination nicht erreichen, daher verwenden Sie das Formwerkzeug der Software und einige Figuren, um Kurven zu erstellen, um den Effekt zu erzielen.

Ecken

Abgerundete Ecken werden vielleicht nicht oft verwendet, eine Ecke mit einem Radius von 2px ist offensichtlich ein Kreis. Ob Sie abgerundete Ecken verwenden und wie groß sie sein sollen, müssen Sie anhand der allgemeinen Merkmale Ihres Entwurfs entscheiden.

Pixel-Effekte

Der Pixeleffekt von Symbolen ist ein wichtiger Bestandteil der Benutzeroberfläche, insbesondere bei kleinen Designs, wo er das gesamte Erscheinungsbild beeinflusst. Wenn die Zeilenabstände im Pixelraster nicht aufeinander abgestimmt sind, kann dies bei kleinen Symbolen zu gezackten Rändern und einem unscharfen Aussehen führen. Wird das Pixelraster eines Symbols angepasst, werden die Linien dünner und die Winkel und Kurven weniger präzise. Aus diesem Grund wird empfohlen, einen 45-Grad-Winkel zu verwenden, der überschaubarer, präziser und leichter auszurichten ist.

Linienstärke

Was die Linienstärke angeht, so sind 2Pixel ideal, aber3Pixel sind am vielseitigsten. Ich persönlich bevorzuge 2 px und 4 px, und idealerweise würde ich das Vielfache von 2 häufiger verwenden. Bei Wörtern und flachen Symbolen sollte man besonders dünne Linien vermeiden, es sei denn, man möchte einen bestimmten Effekt erzielen. Wenn Sie die Form der Linie definieren wollen, tun Designer dies in der Regel mit Hilfe von Licht und Schatten.

4. Einheitlichkeit durch Designelemente und Symbolmerkmale

Designer verwenden ein bestimmtes Element, um eine Reihe von Designs einheitlicher zu gestalten. Ein niederländischer Designer sprach beispielsweise auf dem Icon Salon 2015 über ein Projekt, das er für die niederländische Regierung durchgeführt hat und bei dem er und sein Partner das Element "Kerbe" im Design verwendet haben, das nicht in jedem Icon vorhanden ist, aber der Serie durch die Einheitlichkeit eine eigene Identität verleiht. Nicht jede Ikone hat dieses Element, aber die Einheitlichkeit der meisten von ihnen gibt der Serie ihren eigenen Charakter und bringt sie wirklich zusammen.

5. Zurückhaltende Verwendung von Details und Dekoration

Der Zweck eines Icons ist es, mit dem Benutzer zu kommunizieren, ihn zum Nachdenken anzuregen und eine Entscheidung zu treffen. Zu viele Details können die Erkennbarkeit einer Ikone erschweren, vor allem bei kleinen Größen, wo sie unhandlich werden können. Natürlich wirkt sich die Komplexität der Details auch auf die Wirkung einzelner Icons oder einer ganzen Reihe von Icons aus. Wenn Sie sich also nicht entscheiden können, wie viele Details zu viel sind, ist es am besten, ein Minimum an garantierten Details, aber eine hohe Qualität der klaren Symbolbedeutung anzustreben.

6. Einzigartigkeit

Auch wenn wir sehen, dass viele eifrige Designer qualitativ hochwertige Icons entwerfen, konzentrieren sie sich zu sehr auf Designtrends und die Nachahmung der Stile anderer High-End-Designer. Als Designer sollten wir mehr Wert auf Kreativität legen und uns von anderen Bereichen wie Struktur, Schriftarten, Industrie, Psychologie, Natur und so weiter inspirieren lassen. Wir haben alle schon einmal die gleichen Icons gesehen, aber Sie sind der Außenseiter, dessen Stil die Benutzer wirklich erkennen.

Hier sind einige Dinge, die Sie während des Designprozesses beachten sollten:

1. machen Sie es für die Benutzer leicht verständlich

Das Wichtigste bei einem Icon ist, dass es für die Nutzer erkennbar und leicht zu verstehen ist. Bei kleinen Icons kann es schwierig sein, eine eigene Auswahl zu treffen, daher werden die meisten grafischen Designs für Marken so gestaltet, dass sieein Logooder ein ikonisches Bildzeigen. Natürlich gibt es für eine neue oder kleine Marke auch andere Möglichkeiten, sie zu präsentieren.

2. ikonen sind keine Bilder

Ein Icon kann ein Bild enthalten, es kann aber auch ein Text, ein Logo oder eine Kombination dieser Elemente sein. Bildsymbole können auf anderen adaptiven Geräten schwer zu lesen sein, während Grafiken mehr visuelles Interesse wecken können.

3. vermeiden Sie Text

Bei einem Symbol ist es wichtig, keine Wörter als Inhalt zu verwenden, da der Platz selbst klein ist und der Inhalt für den Benutzer nicht leicht zu verstehen ist. Dies ist auch eine Lektion, die wir gelernt haben: Wenn der Text nichtTeil IhresLogosist, dann vermeiden Sie ihn so weit wie möglich. Wenn doch, sollten Sie ihn sich gut überlegen.

Darüber hinaus werden viele Icons in bestimmten Zusammenhängen verwendet, und die meisten enthalten eine Zeile mit beschreibendem Text unter dem Icon. Bei der Gestaltung ist es auch wichtig, die Farben der Buchstaben und die Art des Symbols oder der Website einheitlich zu halten, damit Sie eine einheitliche Marke aufbauen können.

4. helle Farben verwenden

Sie wollen, dass Ihre Icons herausstechen? Dann setzen Sie auf kräftige Farben. Durch die Wahl einer leuchtenden Farbe können Sie die Aufmerksamkeit der Nutzer auf sich ziehen und Ihrer Marke mehr Charakter verleihen. Blau zum Beispiel, vor allem Himmelblau und Marineblau, ist eine Farbe, vor der Sie vielleicht zurückschrecken, weil diese beliebte Farbe nicht sehr ansprechend ist. Wenn Blau jedoch die Hauptfarbe Ihres Logos ist, können Sie etwas Neues und Neutrales wie Limettengrün ausprobieren oder einen saisonalen Farbton wie leuchtendes Orange für den Sommer oder Rosa für den Frühling oder etwas Ähnliches wählen.

5. eineLogoverlängerungerstellen

Ihre Marke wird ein Logo haben, aber sobald es zu einem Symbol wird, ist es mehr wie ein Zeichen. Das Logo kann ein einfaches Logo oder ein Bild sein, aber es muss direkter und einprägsamer für den Kunden sein. Die Marke möchte auch eine Verbindung zwischen dem Logo und dem Icon herstellen, um sich selbst zu vereinheitlichen.

6. die Verwendung des Icons

Icons sind nicht nur auf Mobiltelefone oder Computer-Desktops beschränkt, daher ist es wichtig, bei der Gestaltung die Größe und die Anwendung des Icons zu berücksichtigen, so dass es besser ist, das Icon zu verkleinern, nachdem es vergrößert wurde. Wenn es um den Maßstab und die Größe des Symboldesigns geht, wird auch das Format zu einem wichtigen Faktor, so dass Vektorgrafiken die beste Wahl sind.

7. die Welt außerhalb des Inhalts

In letzter Zeit gibt es viele Icons, die einen monochromen Hintergrund mit weißen Icons verwenden, flaches Design kombiniert mit Schatten, dieser Trend ist beliebt, aber beschränken Sie sich nicht auf dieses Design, machen Sie etwas anderes in Ihren Icons. Während die meisten Leute ein quadratisches Design in Betracht ziehen, sollten Sie vielleicht etwas anderes in Betracht ziehen. Das Hinzufügen eines Textureffekts im Hintergrund hebt sich von den monochromen Farben ab.

8. monochrome Herausforderung

Es gibt einen interessanten Tipp, den Designer seit Jahren nutzen, um die Wirksamkeit eines Designs zu testen - den Schwarzweiß-Modus. Wenn Ihr Design in Schwarzweiß die gleiche Botschaft vermittelt, dann ist es ein effektives Design; wenn es ohne Farbe schwach wird oder sogar die Wiedererkennung durch den Benutzer stört, dann sollten Sie es ändern. Es gibt auch einige Designer, die mit Schwarz und Weiß beginnen, um einen soliden Rahmen zu schaffen, bevor sie Farbe hinzufügen.