Icons können als eine der Universalitäten des Webdesigns betrachtet werden. Fast jede Website profitiert von mindestens einigen wenigen. Daher ist es verführerisch anzunehmen, dass Ihre Arbeit erledigt ist, wenn Sie eine Handvoll dieser kleinen Bilder einstreuen. Es gibt jedoch noch viel mehr als das: Gute Icons sollten sich so anfühlen, als wären sie visuell in die Gruppe der Bilder integriert, in denen sie sich befinden, sowie in das gesamte Site-Design. Sie müssen eine konzeptionelle Klarheit und einen Zweck haben, der über bloße Augenweide hinaus geht. Jedes Symbol, das keinem bestimmten Zweck dient oder in seiner Bildsprache nicht das richtige Konzept vermittelt, muss überarbeitet werden.
Natürlich gibt es Raum für Interpretationen und Verallgemeinerungen mit jeglicher Art von Bildern, aber Icons sind nicht nur Illustrationen, die lediglich dazu dienen, den Raum aufzubrechen und Interesse zu wecken: visuelle Metaphern, die auf einen Blick einen Sinn in ein Thema bringen können; Sie sind daher ein leistungsfähiges Werkzeug zur Verbesserung der Benutzererfahrung.
Wie sollen Icons verwendet werden?
Die Ikonografie kann ein rutschiges 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. Die zwei häufigsten und wichtigsten sind jedoch:
- Visuelle Inhaltsbrüchemacht es ansprechender und lesbarer. Diese Anwendung wird häufig im Hauptteil der Website, in Listen (wie oben dargestellt) 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 anzeigt, sind so häufig, dass sie nicht einmal einen Textbezeichner benötigen.
Es liegt auf der Hand, dass selbst diese beiden Kategorien eine Vielzahl von Möglichkeiten und Gründen für die Verwendung von Symbolen bieten, sodass Sie sie in fast jedem Element des Webdesigns sehen können: Kopfzeilen, Fußzeilen, Navigationsleisten, Listen; praktisch jeder Teil eines Designs kann durch Hinzufügen ausgewählter Icons verbessert werden.
Was macht ein gutes Symbol aus?
Obwohl es nicht schwer zu erkennen ist, wie Symbole für fast jedes gute Website-Design eine wesentliche Komponente darstellen, kann es manchmal schwer zu erkennen sein, wenn sie nicht so gut funktionieren, wie sie sein könnten. Sogar ein schlecht entworfenes Set von Icons ist normalerweise einer Textwand vorzuziehen, aber ein schönes Set bedeutungsvoller Icons, wie die oben genannten, kann noch viel mehr.
Obwohl das Icon-Design ein kompliziertes Thema ist, das sich mit jeder neuen Situation ändert, gibt es immer noch ein paar wichtige Regeln, die für das effektive Icon-Design in allen Anwendungen gelten: Die beiden wichtigsten Punkte, die in jedem Icon-System zu beachten sind, sind die beiden Symbole visuell und konzeptionell Wirksam.
Wie machen Sie Icons visuell effektiv?
Icons gruppieren besser verwandte Inhalte und lenken wichtige Informationen, wenn sie konsistente und überlegte Beziehungen zu den anderen Symbolen im Set und zum Site-Design haben.
Symbolsätze sollten visuelle Vereinheitlichung haben
Eine Gruppe von Symbolen, die nicht genügend Kohäsion haben, sieht falsch aus, egal wie groß sie auch sein mag, wenn sie einzeln betrachtet wird. 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 dieselbe Form ein, wie oben gezeigt.
- Gestalten Sie Ihre Symbole mit oder ohne Linien oder anderen Grenzattributen (siehe oben).
- Hinzufügen von Effekten wie Farbverläufen, Transparenzen oder Schlagschatten wie oben gezeigt.
Zu diesem Zweck ist es wichtig zu überlegen, wie Sie den Stil Ihrer Illustrationen an die Motive anpassen. Beispielsweise möchten Sie Ihre Symbole mit einem 3D-Effekt in einem Winkel darstellen. Was aber, wenn eines der Icons im obigen Beispiel eine Geschenkkarte darstellen müsste? Ein Symbol, das eine Karte darstellt, muss fast zweifellos zweidimensional sein und würde somit den Effekt ruinieren, den Sie sich wünschen.
Je größer die Menge und der Umfang der Symbole, desto mehr Vielfalt sollten sie haben
Obwohl Symbole innerhalb eines Satzes eine enge Übereinstimmung aufweisen sollten, können Sie die Regeln biegen und sogar brechen, wenn es sich um große Bildsätze handelt. Diese Website ist ein hervorragendes Beispiel, das sich mit dem Thema Gleichdimensionalität befasst, da sie beschlossen haben, die unterschiedlichen Dimensionen ihrer Icons zu berücksichtigen. Die Unterschiede sind nicht verwirrend, da die beiden Typen voneinander getrennt sind, wodurch sie zu verwandten Symbolsystemen werden, die gut zusammenarbeiten, ohne genau gleich auszusehen.
Zusätzlich zu diesen kleinen Änderungen divergiert die Site noch mehr in den anderen Symbolen, von denen einige auftauchen, wobei einige größere und komplexere Formen haben und andere den 3D-Effekt replizieren, jedoch in einem völlig anderen Stil. Diese funktionieren jedoch immer noch gut miteinander, da sie einige gemeinsame Elemente beibehalten und in Fällen dargestellt werden, die voneinander getrennt sind, um den Betrachter nicht zu überfordern.
Symbole sollten mit dem Rest Ihres Site-Designs harmonisieren
Natürlich gibt es eine unendliche Anzahl von Methoden, mit denen Sie Ihre Icons mit Ihren anderen Designelementen zusammenarbeiten können. Grundsätzlich sind die zwei effektivsten Wege, um dagegen vorzugehen:
- Icons als Kontrast zum Rest der Site: Dieser Ansatz ist besonders effektiv, wenn die Icons wie diese Social-Media-Links (wie oben gezeigt) navigationsfähig sind, da der Kontrast sie sehr aufmerksam macht.
- Symbole werden so gestaltet, dass sie in andere Designelemente integriert sind und diesen ähneln: Dies ist eine gute Option für Bilder, bei denen es mehr darum geht, visuelle Ruhe und Klarheit zu bieten, und nicht die zusätzliche Hervorhebung benötigen, die Navigationselemente wie oben gezeigt haben könnten.
Wie machen Sie Icons konzeptionell effektiv?
Es ist wichtig, dass Icons die richtige Rolle spielen, um die Aufmerksamkeit zu lenken und die Ästhetik eines Designs zu verbessern, aber es ist ebenso wichtig, dass sie auch logisch und konsistent in Bezug auf die Konzepte sind, die sie kommunizieren.
Icons müssen leicht verstanden werden
Einerseits kann die Bildsprache schwierig sein, da Interpretationen niemals absolut sind. Andererseits sind sie viel leichter zu handhaben als Worte, denn wenn sie klar genug sind, können sie die Sprache überschreiten. Die einfachen Richtlinien, in denen das Webdesign im Überfluss vorhanden ist, sind das perfekte Vehikel für die universelle Kommunikation.
Manchmal versuchen Designer jedoch, kompliziertere Konzepte in die Ikonografie zu integrieren, und der Effekt ist eher verwirrend als klärend. Unter diesen Umständen ist es gut, einen Schritt zurückzutreten und wirklich zu versuchen, den Inhalt auf seine grundlegende Essenz zu reduzieren. Wenn dies nicht möglich ist, bedeutet dies, dass ein Symbol nicht die richtige Lösung für diesen Inhalt ist. Eine der besten Ressourcen, um eine clevere Ikonografie zu finden, die die Grenzen der Bildkommunikation überschreitet, ist das Infografik-Design, bei dem es häufig darum geht, aus jeder Information ein Symbol zu machen.
Wenn das Webdesign exponentiell wächst und reift, wächst auch das Icon-Design. Konzepte, die mit Ikonografie nicht mehr einmal dargestellt werden konnten, werden rasch zu einer Standardisierung und werden zu den Kommunikationswerkzeugen des Webdesigners hinzugefügt. Mit diesem Streben nach Universalität ist es eine sichere Voraussage, dass Icons zu einem noch wichtigeren Teil des Designs werden, als sie bereits sind. Wenn Sie sich an diese grundlegenden Verwendungsmethoden halten, können Sie sie mit der ganzen Kunstfertigkeit und Klarheit aufnehmen, die für die Erstellung schöner, funktionaler und effektiver Designs für jedes Projekt erforderlich ist.