So wählen Sie effektive und attraktive Symbole in Ihren Designs aus
Symbole können als eine der Universalitäten des Webdesigns angesehen werden. Fast jede Website profitiert von der Hinzufügung von mindestens einigen von ihnen. Es ist also verlockend anzunehmen, dass Ihre Arbeit erledigt ist, wenn Sie eine Handvoll dieser kleinen Bilder einstreuen. Aber es steckt noch viel mehr dahinter: Gute Symbole sollten das Gefühl haben, visuell in die Gruppe der Bilder, in denen sie sich befinden, sowie in das gesamte Site-Design integriert zu sein. Sie müssen eine konzeptionelle Klarheit und einen Zweck haben, der über die bloße Augenweide hinausgeht. Jedes Symbol, das keinem bestimmten Zweck dient oder in seiner Bildsprache nicht das richtige Konzept vermittelt, muss überdacht werden.
Natürlich gibt es Raum für Interpretation und Verallgemeinerung bei jeder Art von Bildmaterial, aber Symbole sind keine bloßen Illustrationen, die lediglich dazu dienen, den Raum aufzubrechen und Interesse zu wecken: Sie sind visuelle Metaphern, die auf einen Blick Bedeutung in ein Thema investieren können. Als solche sind sie ein leistungsstarkes Tool zur Verbesserung der Benutzererfahrung.
Wie sollten Sie Symbole verwenden?
Ikonographie kann ein schlüpfriges Thema sein, weil sie so viele Arten von Bildern umfasst und so viele Rollen erfüllen kann. Symbole können für viele Zwecke verwendet werden, aber die beiden häufigsten und wichtigsten sind in der Regel:
- Visuelle Unterbrechungen des Inhalts : ansprechender und lesbarer. Diese Anwendung wird häufig im Hauptteil der Website, in Listen (wie oben gezeigt) oder anderen textlastigen Elementen verwendet.
- Schnelle visuelle Referenz für ein Konzept : Diese Verwendung wird am häufigsten in Navigationselementen (wie oben gezeigt) angezeigt, und einige - wie das Lupensymbol, das eine Suche kennzeichnet - sind so häufig, dass sie nicht einmal eine Textkennung benötigen.
Es ist offensichtlich, dass selbst diese beiden Kategorien eine Vielzahl von Möglichkeiten und Gründen für die Verwendung von Symbolen bieten. Sie werden sie daher wahrscheinlich in fast allen Elementen des Webdesigns sehen: Kopf- und Fußzeilen, Navigationsleisten, Listen; Praktisch jeder Teil eines Designs kann durch Hinzufügen ausgewählter Symbole verbessert werden.
Was macht eine gute Ikone aus?
Während es nicht schwer zu erkennen ist, wie wichtig Symbole für fast jedes gute Website-Design sind, kann es manchmal schwierig sein, zu erkennen, wenn sie nicht so gut funktionieren, wie sie sein könnten. Selbst ein schlecht gestalteter Satz von Symbolen ist normalerweise einer Textwand vorzuziehen, aber ein schöner Satz aussagekräftiger Symbole, wie die oben genannten, kann noch viel mehr.
Auch wenn das Icon-Design ein kompliziertes Thema ist, das sich mit jeder neuen Situation ändert, gibt es dennoch einige wesentliche Regeln, die für ein effektives Icon-Design in allen Anwendungen gelten: Die beiden wichtigsten Punkte, die in jedem Icon-System berücksichtigt werden müssen, sind die visuelle und visuelle Erstellung von Icons konzeptionell effektiv.
Wie machen Sie Symbole visuell effektiv?
Symbole können verwandte Inhalte besser gruppieren und wichtige Informationen anzeigen, wenn sie konsistente und überlegte Beziehungen zu den anderen Symbolen im Set und zum umgebenden Site-Design aufweisen.
Symbolsätze sollten eine visuelle Vereinheitlichung aufweisen
Eine Gruppe von Symbolen, die nicht genügend Zusammenhalt haben, sieht falsch aus, egal wie groß sie sein mögen, wenn sie einzeln betrachtet werden. Es gibt viele Tricks, die ein Gefühl der Einheit schaffen können, darunter:
- Verwenden Sie dieselbe Farbe oder dasselbe Farbschema wie oben.
- Passen Sie alle Ihre Symbole in die gleiche Form an, wie oben gezeigt.
- Gestalten Sie Ihre Symbole mit oder ohne Linien oder anderen Rahmenattributen, wie oben dargestellt.
- Hinzufügen von Effekten wie Farbverläufen, Transparentfolien oder Schlagschatten (siehe oben).
Zu diesem Zweck ist es wichtig zu überlegen, wie Sie den Stil Ihrer Illustrationen an die Themen anpassen. Beispielsweise möchten Sie Ihre Symbole möglicherweise mit einem 3D-Effekt in einem Winkel darstellen. Was aber, wenn eines der Symbole im obigen Beispiel eine Geschenkkarte darstellen muss? Ein Symbol, das eine Karte darstellt, muss mit ziemlicher Sicherheit zweidimensional sein und würde somit den gewünschten Effekt ruinieren.
Je größer die Menge und der Umfang der Symbole sind, desto vielfältiger sollten sie sein
Obwohl Symbole innerhalb eines Satzes eine enge Übereinstimmung aufweisen sollten, können Sie die Regeln bei großen Bildsätzen biegen und sogar brechen. Diese oben gezeigte Website ist ein hervorragendes Beispiel, das sich mit dem Problem der gleichen Dimensionalität befasst, da sie beschlossen haben, die unterschiedlichen Dimensionalitäten ihrer Symbole zu berücksichtigen. Die Unterschiede stören nicht, da die beiden Typen getrennt sind und sie zu verwandten Symbolsystemen werden, die gut zusammenarbeiten, ohne genau gleich auszusehen.
Zusätzlich zu diesen kleinen Änderungen unterscheidet sich die Site noch stärker von den anderen Symbolen, auf die Sie stoßen. Einige haben größere und komplexere Formen, andere replizieren den 3D-Effekt, jedoch in einem völlig anderen Stil. Diese funktionieren jedoch immer noch gut zusammen, da sie einige gemeinsame Elemente beibehalten und in Instanzen dargestellt werden, die so weit voneinander entfernt sind, dass der Betrachter nicht überfordert wird.
Symbole sollten mit dem Rest Ihres Site-Designs harmonieren
Natürlich gibt es unendlich viele Methoden, mit denen Sie Ihre Symbole mit Ihren anderen Designelementen kombinieren können. Grundsätzlich sind die beiden effektivsten Methoden jedoch:
- Symbole als Kontrastpunkt zum Rest der Website : Dieser Ansatz ist besonders effektiv, wenn die Symbole wie diese Social-Media-Links (siehe oben) navigativ sind, da der Kontrast viel Aufmerksamkeit auf sie lenkt.
- Stylen Sie Symbole so, dass sie in andere Designelemente integriert sind und diesen ähneln : Dies ist eine gute Option für Bilder, bei denen es mehr um visuelle Ruhe und Klarheit geht und die nicht die zusätzliche Betonung benötigen, die Navigationselemente möglicherweise haben, wie oben dargestellt.
Wie machen Sie Icons konzeptionell effektiv?
Es ist wichtig, dass Symbole die richtige Rolle spielen, um die Aufmerksamkeit zu lenken und die Ästhetik eines Designs zu verbessern. Ebenso wichtig ist es, dass sie auch in Bezug auf die von ihnen kommunizierten Konzepte logisch und konsistent sind.
Symbole müssen leicht verstanden werden
Einerseits können Bilder schwierig sein, da Interpretationen niemals absolut sind. Andererseits sind sie weitaus überschaubarer als Wörter, denn wenn sie klar genug sind, können sie die Sprache überschreiten. Die einfachen Richtlinien, in denen Webdesign im Überfluss vorhanden ist, sind, wie oben dargestellt, das perfekte Mittel für die universelle Kommunikation.
Aber manchmal versuchen Designer, kompliziertere Konzepte in die Ikonographie zu integrieren, und der Effekt ist eher verwirrend als klar, wie oben dargestellt. Unter diesen Umständen ist es gut, einen Schritt zurückzutreten und wirklich zu versuchen, den Inhalt auf das Wesentliche zu reduzieren. Wenn Sie dies nicht können, bedeutet dies, dass ein Symbol nicht die richtige Lösung für diesen Inhalt ist. Eine der besten Ressourcen, um eine clevere Ikonographie zu finden, die die Grenzen der Bildkommunikation überschreitet, ist das Infografik-Design, bei dem es häufig darum geht, aus jeder Information eine Ikone zu machen.
Wenn das Webdesign exponentiell wächst und reift, wächst auch das Icon-Design. Konzepte, die früher nicht durch Ikonografie dargestellt werden konnten, werden schnell standardisiert und den Kommunikationstools des Webdesigners hinzugefügt. Mit diesem Streben nach Universalität ist es eine sichere Vorhersage, dass Symbole ein noch wichtigerer Bestandteil des Designs werden als sie es bereits sind. Wenn Sie diese wesentlichen Verwendungsmethoden berücksichtigen, können Sie sie mit all der Kunstfertigkeit und Klarheit übernehmen, die erforderlich sind, um schöne, funktionale und effektive Designs für jedes Projekt zu erstellen.
