Der supereinfache Leitfaden zur Ikonografie

Wie lange brauchen Sie im Durchschnitt, um ein benutzerdefiniertes Symbol zu entwerfen?

Ein paar Minuten? Zehn Minuten? Länger? Was wäre, wenn wir Ihnen zeigen würden, wie Sie in weniger als 10 Minuten 10 großartige Symbole erstellen können?

Ikonographie ist eine Form der Kommunikation, die zur visuellen Sprache einer Marke beiträgt, sodass ein benutzerdefiniertes Icon-Set aussagekräftiger und ansprechender ist als ein einfaches, generisches. Die meisten Designer machen sich nie die Mühe zu lernen, wie man benutzerdefinierte Symbole erstellt, hauptsächlich weil dies ein weiterer Kurs ist, den wir unserer Lernwarteschlange hinzufügen können.

Also machte ich mich daran, einen supereinfachen Leitfaden zu erstellen, der Ihnen hilft, die Grundlagen der Ikonographie in weniger als 10 Minuten zu lernen (ich meine es ernst).

Die Möglichkeit, benutzerdefinierte Symbole zu erstellen, eröffnet Ihnen eine ganz neue Welt, in der Sie mit der Erstellung komplizierter Formen für Ihre Projekte beginnen können, die Sie vom Rest der Masse abheben und Ihnen als Designer einen Wettbewerbsvorteil verschaffen.

Ursprünglich wurde ich zu diesem Leitfaden von diesem GIF von Morgan Allan Knutson inspiriert, das zeigt, wie man in wenigen Sekunden ein Symbol für Ortungsdienste erstellt. Ich fand es erfrischend, intelligent und schnell. Es entmystifiziert den Prozess der Erstellung benutzerdefinierter Symbole und zeigt, wie einfach er sein kann. Ein Symbol ist eigentlich eine geometrische Form, die aus einer Kombination oder Verformung von Grundformen wie Quadraten, Dreiecken oder Kreisen resultieren kann. Eine Faustregel im Logo- oder Icon-Design lautet, die Dinge einfach zu halten.

Das Ziel dieses Artikels ist es, innerhalb von jeweils 10 Sekunden 10 Symbole zu erstellen, wobei nur einfache Formen verwendet werden.

Wichtiger Hinweis: Wir verwenden in diesem Beitrag Adobe Illustrator, aber Sie können die gleichen Ergebnisse mit Sketch oder sogar Figma erzielen. Jedes Mal, wenn wir einen Punkt auf einer Form hinzufügen oder entfernen müssen, verwenden wir das „Stiftwerkzeug (P)“. Das Auswählen und Verschieben von Punkten erfolgt mit dem „Direktauswahl-Werkzeug (A)“.

Augensymbol

Richten Sie vier Kreise mittig aus, gehen Sie vom größten zum kleinsten mit wechselnden Farben, wie gezeigt. Ziehen Sie auf dem größten Kreis nach hinten die linken und rechten Punkte von der Mitte weg. Bewegen Sie abschließend den kleinsten, inneren Kreis an den Rand des nächsten, um einen Lichteffekt auf der Iris zu erzeugen.

Tipp: Anstatt einen weißen Kreis zu verwenden, subtrahieren Sie einfach (mithilfe des Pathfinder-Bedienfelds) die beiden Kreise von dem Kreis unter jedem von ihnen. Es erzeugt ein saubereres Ergebnis auf dem Hintergrund.

Pfeil-Symbol

Es geht darum, wo Sie diese zusätzlichen Punkte an den Rändern des ursprünglichen Quadrats hinzufügen. Tipp: Alternativ können Sie auch einfach eine dünne Linie in Form eines Pfeils zeichnen.

Batteriesymbol

Verwenden Sie ein Quadrat mit Strich und zwei mit Füllung. Spielen Sie einfach mit den Proportionen, während Sie ein gefülltes Quadrat in die Strichform einfügen und das zweite außen lassen, um die Batteriespitze zu bilden.

Tipp: Spielen Sie mit Strichstärke und Polsterung, um ein gutes visuelles Gleichgewicht zu erhalten.

Aufzählungszeichen-Symbol

Beginnen Sie mit einem einfachen Quadrat; dupliziere es einmal rechts davon; und formen Sie es in ein langes Rechteck um. Wählen Sie das Ganze aus und duplizieren Sie es zweimal, während Sie dazwischen einen quadratischen Abstand lassen.

Tipp: Ersetzen Sie das Quadrat durch Kreise, um ein weicheres Aussehen zu erzielen.

Cloud-Symbol

Zeichne drei unterschiedlich große Kreise. Richten Sie die beiden kleinsten Kreise unten aus, um eine Basis zu haben, und platzieren Sie den größten Kreis an einer höheren Position dazwischen. Erstellen Sie die Basis der Wolke, indem Sie einen der kleinen Kreise verformen.

Tipp: Verwenden Sie unterschiedliche Kreisgrößen, um eine organisch aussehende Wolke zu erhalten.

Vorwärts-Wiedergabe-Symbol

Zeichne ein langes Rechteck. Fügen Sie einen Punkt in der Mitte der linken Kante hinzu und entfernen Sie den oberen und unteren Punkt. Jetzt, da Sie ein Dreieck haben, duplizieren Sie diese Form einfach einmal nach rechts, um das Symbol zu vervollständigen.

Tipp: Um das noch schneller zu machen, beginne einfach mit einem Dreieck statt einem Quadrat.

Trichter-Symbol

Beginnen Sie mit einem langen Rechteck. Fügen Sie einen Punkt in der Mitte der linken und rechten Kante hinzu. Jetzt den oberen Rand waagerecht strecken, fertig.

Tipp: Legen Sie zwei Quadrate Kante an Kante und strecken Sie einfach die oberste Kante horizontal.

Wiedergabe-/Pause-Symbol

Beginnen Sie mit drei langen Rechtecken parallel. Formen Sie das breiteste Rechteck zu einem Dreieck um.

Tipp: Alternativ zeichnen Sie einfach ein Dreieck, gefolgt von zwei parallelen Rechtecken.

Positionspfeil-Symbol

Dies ist ein Remix von Morgans Ortungsdienst-Symbol. Zeichnen Sie einfach ein Quadrat, ziehen Sie dann den unteren linken Punkt in eine diagonale Richtung und bewegen Sie sich nach oben, bis Sie den gegenüberliegenden Punkt passieren.

Tipp: In Illustrator hilft das Drücken der Umschalttaste beim Ziehen des Punkts, die Symmetrie beizubehalten, während der Diagonalwinkel richtig bleibt.

Pin-Symbol positionieren

Schlagen Sie einen Kreis in einem größeren aus (mithilfe des Pathfinder-Bedienfelds). Ziehen Sie den niedrigsten Punkt gerade nach unten und schärfen Sie den gebildeten Winkel. Wechseln Sie zum „Stiftwerkzeug (P)“ und klicken Sie dann bei gedrückter „Umschalttaste“ auf den Punkt.

Tipp: Verwenden Sie an diesem Wendepunkt eine abgerundete Ecke, um das Aussehen weicher zu machen – passen Sie den Wert für den „Eckenradius“ im Optionsfeld „Transformieren“ an, während der Punkt ausgewählt ist.

Sound-Symbol

Genau wie das Trichtersymbol, aber um 90 Grad gedreht.

Tipp: Kopieren Sie einfach das Trichtersymbol, fügen Sie es ein und drehen Sie es im Uhrzeigersinn.

Wellensymbol

Zeichnen Sie eine gerade Linie und fügen Sie Punkte in gleichem Abstand über ihre Länge hinzu. Ziehen Sie Änderungspunkte nach unten und runden Sie jede Ecke maximal ab, bis alles glatt ist.

Tipp: Runden Sie die Linienspitzen für einen noch glatteren Look ab.

Toptal-Symbol

Dies ist das Bonussymbol.

Zeichnen Sie ein Quadrat mit einem ausreichend dicken Strich. Schneiden Sie mit dem Scherenwerkzeug die oberen rechten und unteren linken Punkte ab. Dadurch wird die Form in zwei Teile geteilt. Bewegen Sie die untere Hälfte nach oben und drehen Sie das Ganze um 45 Grad gegen den Uhrzeigersinn.

Tipp: Achten Sie auf die Dicke der Linien und den innerhalb des Logos gebildeten weißen Raum.

Eine Ikone sagt mehr als 1.000 Worte.

Wir hören oft, dass ein Bild mehr als tausend Worte sagt. Nun, das gilt sehr stark für Symbole, die lange Sätze und Wörter ersetzen, um den visuellen Raum, die Benutzerfreundlichkeit und die Ästhetik zu optimieren. Zu wissen, wie man eine Reihe einfacher und effektiver Symbole erstellt, kann einen langen Weg zurücklegen. Und wir haben gerade gesehen, wie schnell und einfach es sein kann, wenn wir einen grundlegenden Satz von Formen beobachten und verwenden.

Zusammenfassend sind die 10 Hauptregeln der Ikonographie:

• Machen Sie es symbolisch und bedeutungsvoll.
• Sie haben es gehört: Halten Sie es einfach. Der Stil sollte die Lesbarkeit nicht beeinträchtigen.
• Sei absichtlich und nachdenklich. Denken Sie nach, bevor Sie erstellen.
• Stellen Sie sicher, dass es in verschiedenen Größen funktioniert.
• Denken Sie an Einheitlichkeit.
• Bitte nur Vektoren!
• Verwenden Sie Farben nur, wenn es notwendig ist, und tun Sie dies sorgfältig.
• Es hilft, grundlegende Geometrie zu kennen.
• Denken Sie an „Erschwinglichkeit“, um sicherzustellen, dass das entworfene Symbol das Gesamtdesign unterstützt.
• Ikonographie ist eine Sprache, die universell sein sollte.
• Bonus: Das Alphabet besteht nur aus 26 Symbolen.

Spielen Sie mit und sehen Sie, was Ihnen in weniger als 10 Sekunden einfällt.

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft