8 einfache Schritte zum besseren Ikonendesign
Ikonen sind überall. Von App-Symbolen auf Homescreens bis hin zu grafischen Darstellungen, die Benutzer durch ein Design führen, ist das Icon-Design eine große Sache.
Es gibt eine gute Kunst zum guten Icon-Design. Das Element muss nicht nur bei kleinsten Größen erkennbar sein, auch gute vektorbasierte Icons können skaliert werden, um sie auch in übergroßen Proportionen zu verwenden. Einige Designer verwenden sogar ikonenartige Bilder für dominante Bilder.
Also, wo fängst du an? Hier ist ein Leitfaden für die Gestaltung eines besseren Symbols in acht (etwas) einfachen Schritten.
1) Beginne mit einem Gitter
Gutes Icon Design beginnt mit einer soliden Grundlage. Ein einfaches quadratisches Blockraster genügt, um mit dem Skizzieren eines Symbols zu beginnen.
Verwenden Sie das gleiche gerasterte Papier, mit dem Sie in der Grundschule gearbeitet haben, um Symbolskizzen mit Bleistift und Papier zu erstellen, oder beginnen Sie mit einem quadratischen Pixelraster in der Entwurfssoftware. Sie sollten wahrscheinlich auf einer quadratischen Leinwand entwerfen, da die meisten Symbole in quadratische Felder passen. (Dies umfasst alles von Icons für Apps bis zu Icons in Website-Designs oder für Social-Media-Profile.)
Sobald Sie ein Raster haben, stellen Sie sicher, dass Sie ein Element von Leerraum um den Umfang geben. Dies gibt Ihnen genug Flexibilität, um bei Bedarf einen Hintergrund hinzuzufügen und das Symbol davon abzuhalten, in Anwendungen abgeschnitten zu werden, die abgerundete Kanten oder andere Arten von Anfasungen aufweisen könnten.
Nur weil dein Raster quadratisch ist, bedeutet das nicht, dass dein Icon sein muss. Es kann rund oder rechteckiger sein. Denken Sie daran: Wenn Sie etwas entwerfen, das nicht quadratisch ist, sollte es horizontal und vertikal im Raster zentriert sein, damit Sie es später leichter verwenden können. Es hilft Ihnen auch, eine konsistente Skalierung für ein Icon-Set beizubehalten.
Das Raster soll Ihnen helfen, ein Framework zu erstellen, in dem Sie konsistent gestalten können. Als Bonus können Sie auch das Gitter verwenden, um Elemente des Symbols zu zeichnen. Verwenden Sie Gitternetzlinien, um gerade Winkel zu zeichnen, oder legen Sie die Anordnung der Striche innerhalb des Entwurfs fest.
2) Build mit Geometrie
Symbole sind oft klein, daher ist der Aufbau mit Elementen, die Benutzer auf einen Blick erkennen, wichtig. Deshalb sind so viele Icons in geometrischen Formen verwurzelt.
Kreise, Quadrate und Dreiecke sind die beliebtesten Kombinationen von Formen. Benutzer müssen nicht über sie nachdenken oder fragen, was sie sind. Jede Form ist einfach und identifizierbar. Dann können sie zusammengeführt und verbunden werden, um andere Elemente mit demselben geometrischen Stil zu erstellen.
Schauen Sie sich zum Beispiel das Symbol für Dropbox an. Es sind nicht mehr als ein paar miteinander verbundene Quadrate zu einer Kiste. Das Konzept ist kreativ, einfach und leicht in jeder Größe zu lesen.
Eine andere beliebte "geometrische" Option besteht darin, einen einzelnen Blockbuchstaben als Teil der Ikonographie zu verwenden. Während dies für eine weit verbreitete Anwendung nicht gut funktioniert, kann es als eine funktionale Markenidentifizierung dienen. Facebook ist ein wichtiges Beispiel für die Verwendung dieses Symbols in Aktion.
3) Erstellen Sie eine einzigartige Form
Wenn du mit Kreisen und Quadraten beginnst, solltest du eine Form erstellen, die dir gehört. Dies ist besonders wichtig, wenn Sie mit einem markenidentifizierenden Symbol arbeiten. Selbst scheinbar komplizierte Icons beginnen oft mit einfachen Formen, die sich in etwas Einzigartigeres verwandeln.
Wenn es um Einzigartigkeit geht, gibt es ein paar Design-Elemente zum Nachdenken.
- Bleib weg von Bildern. Sie werden nicht gut klein aussehen.
- Bleib weg von Text. Benutzer können es nicht lesen.
- Einige Trends sind lohnenswert. Flache und fast flache Iconstile wirken Wunder.
- Arbeiten Sie mit geraden Linien und Winkeln, die durch Punkte auf dem Gitter verbunden sind. Kurven können schnell unangenehm werden.
- Die besten Icons funktionieren in Farbe, sind aber auch als schwarz-weiße Konturen erkennbar.
4) Geben Sie viel Platz
Symbole brauchen viel Platz zum Atmen. Denken Sie daran, wie Symbole verwendet werden. Besonders wenn Sie ein App-Icon entwerfen, das Benutzer auf verrückten Hintergrundbildern auf ihren Geräten sehen, muss das Design innerhalb des Rahmens ein wenig angepasst werden, um es lesbarer und unterscheidbar zu machen.
Erstellen Sie in Ihrem Raster eine konsistente Umrandung. Stellen Sie sich diesen Raum fast so vor, als würden Sie mit einem blutenden Druckdesign arbeiten. Die Farbe muss sich auf diesen Teil der Leinwand erstrecken, wird aber wahrscheinlich nicht sichtbar sein.
5) Bleiben Sie bei Markenfarben
Verwöhnen Sie sich nicht mit Icon-Farbpaletten, nur weil Sie es können. Wenn Sie etwas für Markenarbeit kreieren, bleiben Sie bei Ihrer Farbpalette. Während Sie von Ihrem normalen Markenlogo für ein Symbol abweichen können, sollte die Farbe konsistent bleiben.
Wenn Sie an einem Symbol für ein Webdesign-Paket oder eine andere Verwendung arbeiten, beginnen Sie zuerst mit schwarzen oder weißen Symbolen. Fügen Sie dann Farbe hinzu, wenn Sie sich dem Abschluss des Entwurfs nähern. Durch die Arbeit mit einfachen Elementen mit hohem Kontrast - Schwarz auf Weiß oder Weiß auf Schwarz - bekommt man wirklich ein Gefühl dafür, wie jedes Symbol im Raum aussieht. Wenn es unabhängig von der Farbe funktioniert, sind die Chancen größer, dass es auch mit der Farbe gut funktioniert.
6. Verwenden Sie konsistente Divots
Achten Sie auf jedes Detail im Icon Design. Hast du eine abgewinkelte Ecke im Design ausgeschnitten? Dann überlegen Sie, es an allen Ecken zu tun.
Während diese winzigen Details vielleicht nicht wichtig erscheinen - sie sind möglicherweise nicht einmal bei kleinsten Größen vollständig sichtbar - können sie Icons, die in mehr grafischen Darstellungen verwendet werden, mit einem klassischen Flair versehen.
Mehr Designer verwenden Symbole als Schaltflächen in allen Designs und helfen, die Augen zwischen mehr textlastigen Elementen zu führen. Sorgfältig gestaltete Symbole können den Benutzer erfreuen und Website-Conversions fördern.
7. Design für die kleinste Größe
Während Symbole in fast jeder Größe verwendet werden können, möchten Sie das Design so gestalten, dass es bei kleinsten Größen funktioniert. Üblicherweise werden Favicon-Symbole mit nur 16 mal 16 Pixeln hochgeladen. Ist Ihr Icon in dieser Größe entzifferbar?
Wenn die Antwort nein ist, haben Sie zwei Möglichkeiten:
- Beginnen Sie mit dem Icon-Design.
- Erstellen Sie ein alternatives Symbol für kleine Leerzeichen, z. B. Favicons.
8) Nicht dekorieren
Schließlich, behalte es einfach. Widerstehen Sie dem Drang, Ihr Icon-Design zu dekorieren. Einige der besten Apps leiden immer noch unter peinlichen Symbolen. (Wunderlist kommt mir sofort in den Sinn. Denk nur daran, wie viel schöner es ohne die Schatten und Umrisse aussehen würde.)
Die Dekoration endet in diesen kleinen Räumen nur noch unbeholfen. Es kann auch das Design überfordern. Denken Sie an Symbole als Design-Akzente, sie sind nicht der primäre Fokus. Wenn ein Benutzer zu lange auf einem Symbol verweilt, weil er versucht, die Bedeutung des Symbols herauszufinden, können sie den Überblick verlieren, was sie tun sollen. Symbole sollten schnelle Interaktionen signalisieren.
Fazit
Icon-Design kann viel Spaß machen, wenn Sie Zeit haben, diese Fähigkeit zu verbessern. Aber wenn Sie kein Experte sind, machen Sie sich keine Sorgen. Es gibt viele tolle Shops, die Icon-Sets für deine Projekte veröffentlichen.
Wenn Sie gerade mit dem Icon-Design beginnen, lohnt es sich, eines dieser Sets herunterzuladen. Wirf die Symbole auf ein Gitter und wähle sie auseinander. Sie können eine Menge darüber lernen, wie Sie Ihre eigenen einfachen Formen aus dieser Übung besser erstellen können.