Haupt / Rat

10 goldene Regeln für digitale Symbole

Die Ikonographie erweitert ein wachsendes Portfolio an Interaktionen um unschätzbare Vermögenswerte. Während sich das Icon-Design an die Prinzipien guten Designs hält, spielt es nach seinen eigenen Regeln. Hier sind 10, um Ihnen den Einstieg zu erleichtern.

01. Design mit Absicht

Symbole müssen wie alle Elemente eines guten Designs einen klaren Zweck haben. Bevor Sie überhaupt darüber nachdenken, welche Art von Symbolen Sie möchten, müssen Sie sich fragen: Warum? Wenn Ihre Antwort 'weil sie hübsch sind' lautet, sollten Sie zweimal überlegen, bevor Sie weitermachen. In einer visuell überfüllten digitalen Welt verlieren selbst die schönsten Symbole bald ihren Glanz ohne Sinn und Zweck.

Wir beginnen mit der Navigation. Facebook und Twitter sind großartige Beispiele für die sehr einfache und praktische Verwendung von Symbolen für die Navigation. Text neben den Symbolen ist für Benutzer von entscheidender Bedeutung. Es gibt viel zu viele Fälle, in denen abstrakte Symbole mit oder ohne Text inkonsistent verwendet werden oder Konventionen nicht berücksichtigt werden, was dazu führt, dass Benutzer nicht leicht finden können, wonach sie suchen. In der Skype iPhone-App gibt es beispielsweise drei verschiedene Symbole, mit denen Personen gefunden werden können. Das Symbol in der unteren Navigationsleiste ist eine geänderte Version des Miniaturbildsymbols für iOS-Kontakte. Das Symbol zum Auffinden Ihrer Kontakte bei Verwendung des Wähltastenfelds ist ein Notizbuch mit einem # in der Mitte. Das Symbol zum Auffinden von Skype-Benutzern, die nicht in Ihren Kontakten enthalten sind, ist ein Kopf, Schultern und ein +. Eh?

Wenn es um das Design von Benutzeroberflächen geht, können Symbole Ihrem Design Zusammenhalt und Bedeutung verleihen, unabhängig davon, ob Sie eine Benutzeroberfläche von Grund auf neu erstellen oder eine vorhandene ändern. Wenn Sie eine E-Commerce-Website entwerfen, ist es selbstverständlich, dass Sie an einer prominenten Stelle oben rechts auf dem Bildschirm ein Checkout-Symbol haben, nicht nur einen Link. Sie können es als Kasse, Warenkorb, Ihre Artikel oder Warenkorb bezeichnen, aber gemäß dem Konsistenzprinzip sollte das verwendete Symbol den Namen widerspiegeln.

Skype schickt Benutzer auf eine wilde Gänsejagd, indem es drei verschiedene Symbole zum Auffinden von Personen bereitstellt

Amazonas nennt es einen Korb und verwendet ein hybrides Korb- und Wagensymbol. Majestätische Weine Der Einkaufswagen verfügt über eine Kaufrichtlinie von mindestens sechs Flaschen. Mit jeder hinzugefügten Flasche ändert eine der sechs ausgegrauten Weinflaschen ihre Farbe, um Sie darüber zu informieren, wann Sie die Mindestanforderung erfüllt haben. Süss. ASOS widerspricht der Konvention und verwendet kein Symbol, daher müssen Benutzer etwas genauer hinschauen, um ihre Produkte zu kaufen.

Das Gesamtbild von UX profitiert von dieser Liebe zum Detail ebenso wie von der richtigen Balance im Zusammenspiel zwischen Symbolen und anderen grafischen Elementen. Gehen Sie zu subtil und Symbole können verloren gehen. Beispielsweise sind Navigationssymbole auf der The Witcher-Website am unteren Rand der Seite versteckt und vom Design völlig überfordert. Aber machen Sie Symbole zu prominent und sie überfüllen Ihr Design, wie es bei der der Fall ist Brauerei Ommegang Webseite; Es wurde so viel Zeit und Aufmerksamkeit in die Interaktion mit Symbolen gesteckt, aber es braucht nicht so viel. Hier setzt sich die Philosophie „weniger ist mehr“ durch.

Obwohl der Gedanke an Tabellen dazu führen kann, dass Sie in die Berge rennen möchten, kann die Verwendung von Symbolen und einer klaren Legende innerhalb einer tabellarischen Struktur unhandlichen Informationen Ordnung verleihen. Die zusammenfassende fünftägige BBC-Wettervorhersage ist das unmittelbarste und bekannteste Merkmal auf der BBC-Wetterseite. Mit Konventionen, die auf der ganzen Welt verstanden werden, wird sogar die Notwendigkeit einer Legende umgangen.

Mit begrenzten Immobilien und noch begrenzteren Aufmerksamkeitsspannen könnte die Ikonographie im digitalen Bereich leicht zu einer eigenständigen Sprache werden, aber dies wäre ein gefährliches Spiel. Um Text zum Leben zu erwecken, werden jetzt einfache Symbole anstelle von Bildern oder anderen grafischen Elementen verwendet. Das Symbolikons Die Website zeigt eine unterhaltsame Möglichkeit, eine Geschichte mit einer Mischung aus Text und Symbolen zu erzählen. Die Veggie-Symbole sind warm und einladend.

Unabhängig davon, ob es sich um ein digitales oder ein gedrucktes Format handelt, sorgen reine Textanweisungen für anstrengendes Lesen. Ein solcher Text ist durch die Aufnahme von Symbolen mit schnellem Tempo leichter zu verstehen. Die richtige Menge an Leerraum ist Teil der Gleichung, aber strategisch platzierte Symbole dienen sowohl zum Zusammenfassen als auch zum Verbessern. Bewerte My Shizzle's Anleitungssymbole fließen mit der Kopie und bieten ergänzenden Text und grafische Routen für den Erfolg von Shizzle.

Emoticons kommen in den Sinn, wenn Stimmung und Emotionen erwähnt werden. Das Beeinflussen von Gefühlen ist jedoch viel subtiler als das Verwenden von Emoticons, was es schwierig macht, das Richtige zu finden. Angenommen, Sie haben Ihre Farbtheorie in Schach gehalten, dreht sich alles um Metaphern. Wenn die falsche Bedeutung vermittelt wird, können die Dinge furchtbar schief gehen. Die Symbole von eHarmony sollen den Wunsch nach einem Datum wecken, sind jedoch zu klinisch und lassen die Benutzer sich kalt fühlen.

02. Kennen Sie Ihr Publikum

Um zu verstehen, wie Ihre Benutzer Ihre Symbole interpretieren, müssen Sie einige Unterregeln beachten.

Nimm nicht an : Wir alle wissen, was passiert, wenn wir uns ass.
Fünf Ws und ein H. : Sie müssen wissen, wer Ihre Benutzer sind und warum, was, wie, wo und wann sie Ihren Dienst nutzen.
Metaphern sinnvoll machen: Sie können nicht immer allen Menschen gefallen, aber wenn Ihre Metaphern einer großen Mehrheit Ihrer Benutzer nicht dieselbe Bedeutung vermitteln, suchen Sie neue.
Betrachten Sie kulturelle Normen: In den meisten Ländern der Welt wird Daumen hoch als Zeichen der Akzeptanz verstanden. Aber in Thailand ist es das Äquivalent dazu, jemandem die Zunge herauszustrecken.
Verwenden Sie die entsprechende Sprache : Wenn Sie nur ein Land bedienen oder Ihren Dienst lokalisieren können, sollten Sie Sprachvariationen berücksichtigen. Wenn Ihr Service global ist, eignen sich geeignete Symbole hervorragend zur Überwindung von Sprachbarrieren.

Die Website der Ommegang-Brauerei enthält mehr Symbole, als sie wirklich benötigt

03. Planung ist wichtig

Das Erstellen und Integrieren von Symbolen in Ihr Gesamtdesign erfordert sorgfältige Planung und Liebe zum Detail.

Sie müssen Folgendes berücksichtigen:

Wo Symbole benötigt werden . Ordnen Sie zu, wo in Ihrem Design Symbole verwendet werden sollen. Überlegen Sie, wie wichtig sie für Ihr Design sind. Möchten Sie sie nur in globalen Abschnitten wie der Fußzeile verwenden oder möchten Sie sie zeitweise mit bestimmten Inhaltstypen verwenden, z. B. auf Produktseiten einer E-Commerce-Website?
Wie oft werden Symbole verwendet? . Überlegen Sie, wie viele Symbole mehrmals verwendet werden oder wie viele Variationen eines einzelnen Symbols erforderlich sind. Denken Sie an die verschiedenen Anwendungen der Symbole. Angenommen, Sie verwenden ein responsives Design-Framework für Ihre Website und entwerfen auch eine iPhone-App. Möglicherweise können Sie dieselben Symbole auf der Website und in der App verwenden, oder es ist am besten, diese Plattformen separat bereitzustellen.
Wie Symbole im Gesamtdesign sitzen . In Bezug auf das Erscheinungsbild müssen die Symbole innerhalb der gesamten Benutzeroberfläche funktionieren. Ebenso wichtig sind Entscheidungen über Standort, Größe und Anzahl der zu verwendenden. Dazu gehört, wie Ihre Symbole zusammen mit anderen grafischen Elementen funktionieren.
Wird Text ausreichen? Wenn Sie das Detail berücksichtigt haben, treten Sie zurück und fragen Sie sich, ob der Text ausreicht. Wenn Text die Arbeit erledigt, lassen Sie es. Das Internet ist so voll wie es ist.

Bevor Sie fortfahren, müssen Sie sich mit den wichtigsten Aspekten der Planung und des Workflows vertraut machen.

Stufe 1: Planen

Schieben Sie die kleinen Dinge aus dem Weg und machen Sie dann kreativ. Stellen Sie sich die folgenden Fragen, um bei der Planung zu helfen.

Was ist die Botschaft zu vermitteln? Wenn Sie so weit gekommen sind, hat jedes Symbol, das Sie erstellen möchten, einen Zweck. Jetzt müssen Sie unbedingt wissen, wie Sie diesen Zweck kommunizieren möchten. Ihr Symbol kann wörtlich oder metaphorisch sein, aber Sie müssen sicherstellen, dass Sie die richtige Bedeutung haben.
Gibt es eine Konvention? Ob wörtlich oder metaphorisch, wenn eine Konvention bereits existiert, sollten Sie sie befolgen. Wenn es keine Konvention gibt, fahren Sie mit dem nächsten Schritt fort.
Was ist der Kontext? Der Kontext ist wie Klebstoff. Wenn Ihre Symbole richtig sind, bleiben sie dabei. Wenn nicht, ragen sie heraus wie ein schmerzender Daumen. Sie kennen wahrscheinlich das Sicherheitszeichen auf Baustellen, das darauf hinweist, dass Schutzhelme getragen werden müssen. Wenn Sie dies aus dem Zusammenhang nehmen und es neben die Garderobe in einem Restaurant stellen, wird den Besuchern möglicherweise vergeben, dass sie ihre Hüte abgeben sollten. Obwohl eine Konvention existiert, hängt sie vom Kontext ab.
Macht das Sinn? Dies ist reine Logik, aber wenn Sie in die Kleinigkeiten geraten, verlieren Sie möglicherweise die Perspektive. Es ist hilfreich zu hinterfragen, ob Zweck, Botschaft, Design und Kontext einer Website kohärent sind.
Existiert es schon? Nach all dem stellen Sie möglicherweise fest, dass dasselbe oder ein ähnliches Symbol bereits an einer anderen Stelle in Ihrem Design verwendet wird. Überprüfen und überprüfen.
Können Sie sich von anderswo inspirieren lassen? Surfen Sie im Internet, schauen Sie sich Bücher an und sehen Sie, was aktuell ist, was veraltet ist und was andere Leute tun. Ich schlage nicht vor, dass Sie die Arbeit anderer kopieren. Ich schlage vor, Sie lassen sich inspirieren, wo immer Sie es finden können.

Stufe 2: Design

Unabhängig davon, ob Sie ein 16-Pixel-Symbol oder ein Haus mit 16 Räumen entwerfen, ist das Herausholen eines Skizzenblocks ein wesentlicher Bestandteil des kreativen Prozesses. Sobald Sie mit der Maus klicken, beschränken Sie Ihre Kreativität auf die verfügbare Hardware und Software. Ohne Hardware und Software wäre das Entwerfen für Mobil- und Webplattformen natürlich nicht möglich, aber beginnen Sie nicht digital.

Schriftarten, Symbole, Farben und Stile müssen innerhalb ihrer eigenen Familie konsistent und innerhalb ihrer erweiterten Familie harmonisch sein. Wenn alle Elemente auf einer Plattform funktionieren, muss dieselbe Balance repliziert werden, damit auch alle Designs für die einzelnen Plattformen eine harmonische Familie bilden. Farbverläufe, Schatten und Perspektiven müssen ebenfalls konsistent sein.

Hier gehen Symbole im Design am Ende der Seite verloren

Denken Sie hierarchisch und berücksichtigen Sie alle Elemente in der Reihenfolge ihrer Wichtigkeit. Gehen Sie so vor, wie Sie Header in HTML verschachteln, und wenden Sie die richtigen Größen, Schattierungen und Deckkraft auf wichtige Ebenen an.

04. Größe ist wirklich wichtig

Das Versprechen aufkommender Technologien wie SVG- und Symbolschriftarten muss erst noch verwirklicht werden. Daher müssen wir zunächst über Größe und Skalierbarkeit nachdenken. Die meisten Symbole werden als PNG-Dateien ausgegeben, die eine Pixelperfektion ermöglichen und eine erhebliche Verbesserung gegenüber ihrem Vorgänger, dem GIF, darstellen.

Die PNG-Datei wird jedoch nicht skaliert, sodass Sie nicht einfach ein einzelnes Symbol entwerfen und dessen Größe ändern können. Dies führt nicht nur zu Pixelbildung beim Vergrößern und Unschärfe beim Verkleinern, sondern beeinträchtigt auch die Kreativität und verringert die Qualität des gesamten Designs. Kleinere Symbole erfordern weniger Details, während größere Symbole ein tieferes und umfassenderes Design erfordern. Unabhängig von der Größe müssen Symbole aus einem einzigen Design bestehen und für jede Größeniteration subtil angepasst werden.

Sie müssen für bestimmte Ziele und Kontexte entwerfen. Die verschiedenen Mobil-, Tablet- und Desktop-Plattformen geben Größen für die Konsistenz innerhalb jeder Plattform an, es gibt jedoch keine Konsistenz zwischen den Plattformen. Favicons haben jedoch im Allgemeinen eine Größe von 16 Pixeln, und beim Entwerfen von Symbolen für die Verwendung in situ herrscht gesunder Menschenverstand vor.

Es gibt verschiedene Denkrichtungen, wie man sich dem Icon-Design nähert. Der Top-Down-Ansatz besteht darin, die größte Bildschirmgröße (höchstwahrscheinlich Desktop) bis ins kleinste Detail zu entwerfen und für jede Iteration auf der Skala zu verfeinern, um das schärfste Symbol in der kleinsten Größe zu erzielen.

Es gibt auch den Mobile-First-Ansatz, bei dem zuerst das kleinste Symbol entworfen und dann beim Skalieren Details hinzugefügt werden. Beide haben ihre Vorzüge, aber wenn Sie kein erfahrener Icon-Designer sind, ist es wahrscheinlich am besten, von oben nach unten zu arbeiten, da es einfacher ist, Details zu verfeinern und zu entfernen, als sie hinzuzufügen.

05. Verwenden Sie eine einzelne Symbolfamilie

Es ist wichtig, das richtige Gleichgewicht zwischen den Symbolfamilien zu finden, um zu verhindern, dass das Gesamtdesign einheitlich, flach und langweilig wird. Harmonie herrscht vor, wenn es darum geht, Symbole mit der Benutzeroberfläche und anderen grafischen Elementen zu verbinden. Zum Beispiel, Luhse Tees Navigationssymbole sind zusammenhängend. Sie sehen, fühlen und erzählen die gleiche Geschichte. Im Gegensatz dazu ist die Beziehung zwischen JIB's Symbole sind ein Rätsel, obwohl sie den gleichen Designstil haben.

Bei Apps wurden bereits viele Entscheidungen über Stil und Größe getroffen, aber es ist wichtig, die gleichen Argumente anzuwenden, die hinter den verschiedenen SDK-Richtlinien stehen. Richten Sie den Zweck an Größe und Stil aus. Wenn Sie beispielsweise Symbole für die Navigation verwenden, stellen Sie sicher, dass Größe, Stil und Farben den Benutzer darüber informieren, dass es sich um Navigationssymbole handelt. Verwenden Sie in anderen Fällen nicht dieselben Symbole. Dies ist verwirrend. Machen Sie es Benutzern einfach, den Fokus Ihrer Website zu identifizieren. Wenn die Navigation in Ihrem Design weniger wichtig ist als die Suche, stellen Sie sicher, dass Navigationssymbole in Stil, Größe und Gewicht weniger hervorgehoben sind, damit Benutzer sich für die Suche interessieren. Zum Beispiel auf der GOV.UK Website, die Verwendung und Positionierung der Elemente schafft einen klaren Fokus auf die Suche. Auf der anderen Seite die Verwendung eines Pfeils als dekoratives und interaktives Element auf dem Innovationsradar Website stört den Fluss.

06. Das Rad nicht neu erfinden

Ähnlich wie bei der Einhaltung von Konventionen ist es wahrscheinlich die beste Wahl, wenn es eine Open-Source- oder Standard-Symbolfamilie gibt, die Ihren Anforderungen entspricht (oder sogar fast Ihren Anforderungen entspricht und nur ein wenig Optimierung erfordert). Nur wenn Sie für einen Internetgiganten arbeiten, ist dies am besten maßgeschneidert. Gleiche Augen ist eine Android-App, mit der Smartphones für Blinde, Sehbehinderte und ältere Menschen zugänglicher gemacht werden können. Es verwendet Open Source Font Awesome Familie, die ideal für ihre Zielgruppe und Plattform ist und ein gutes Beispiel dafür ist, wenn Standardanzüge verwendet werden.

Rate My Shizzle macht das Befolgen von Anweisungen zu einem Kinderspiel, da die Symbole in der Kopie fließen, um ergänzenden Text und grafische Routen bereitzustellen

Während es wichtig ist, sich an Konventionen zu halten, können und sollten Sie den Dingen Ihren eigenen Stempel aufdrücken: nur nicht bis zur Abstraktion. Alexander Bickovs Kampagne, um Weihnachtsbäume vor dem Aussterben zu retten mag gut gemeint sein, verfehlt aber den Punkt, indem Pfeile anstelle von Bäumen verwendet werden. Und denken Sie daran, dass alles, was Sie erstellen, unter der Kontrolle der Markenrichtlinien stehen muss.

07. Machen Sie sich mit Formaten vertraut

Obwohl .png das am häufigsten verwendete Bildformat ist, insbesondere für das Design auf mehreren Plattformen, ist es eine bewährte Methode, verschiedene Formate zu verstehen und ihre Vorzüge im Hinblick auf die Anforderungen Ihres Projekts beurteilen zu können. Hier ist eine kurze Übersicht:

GIF: Graphics Interchange Format . Der Urvater der Bildformate. Bei nur 256 Farben ist Qualität ein Problem. GIFs skalieren nicht, unterstützen nur eine einzige Transparenz und sollten vorzeitig in den Ruhestand gehen.
PNG: Tragbare Netzwerkgrafiken . Der Nachfolger des GIF ist eine höhere Qualität mit Millionen von Farben und unterstützt Alpha-Transparentfolien. Wie das GIF sind PNGs jedoch nicht skalierbar. In Ermangelung vollständig unterstützter Alternativen sind PNGs das beste Format.
SVG: Skalierbare Vektorgrafiken . Universelle und skalierbare Vektorgrafiken sind ideal. Dieses Format wird jedoch von älteren Browsern nicht vollständig unterstützt, leidet unter Anti-Aliasing und trotz seiner Skalierbarkeit passt eine Größe immer noch nicht für alle.

Symbolschriftarten

Aufgrund der browserübergreifenden Kompatibilität und der vollständigen Skalierbarkeit scheinen Symbolschriftarten eine praktikable Lösung zu sein. Die mangelnde Pixelgenauigkeit, die lästigen Rendering-Prozesse und das daraus resultierende semantisch inkorrekte Markup machen diese jedoch zu einem No-Go.

Das Pixel ist eine einzelne Maßeinheit und immer noch die kleinste Einheit auf einem Bildschirm. Es werden jedoch nicht alle Pixel gleich behandelt. Die Vielzahl unterschiedlicher Bildschirmgrößen in Verbindung mit höherwertigen Bildschirmtechnologien wie dem Retina-Display haben die Lebensdauer des Pixels verändert. Die Bildschirmauflösungen entsprechen nicht mehr der Größe eines Geräts, da die PPI-Einstellung (Pixel pro Zoll) jetzt genauso wichtig ist wie die Anzahl der Pixel.

Um die Sache noch komplizierter zu machen, hat Android DP oder DIP (dichteunabhängiges Pixel) eingeführt, um von dem guten, altmodischen Pixel abzuweichen. Die Zeit wird jedoch zeigen, ob es weiterhin besteht.

08. Lassen Sie andere Marken in Ruhe

Im interaktiven Universum ist es üblich, dass Designer die Symbole und Logos anderer Marken verwenden, um sie an ihr eigenes Design anzupassen. Tu es nicht.

Es gibt zu viele Fälle, in denen Social-Media-Grafiken in Vergessenheit geraten, um diesen Vermarkter davon zu überzeugen. Das Twitter- und Facebook-Logo-Mashup auf der Experiment mit verlorenem Telefon ist Beweis positiv.

Die Innovationsradar-Website verwendet ein Symbol für zwei Zwecke. Das Pfeilsymbol als dekoratives und interaktives Element stört den Benutzerfluss

09. Halten Sie die Symbole an ihrem Platz

Nur weil überall im Internet Symbolsätze auftauchen, heißt das nicht, dass Sie verpflichtet sind, diese zu verwenden. Symbole werden tristen Inhalt zum Leben erwecken, aber sie sollten kein Eigenleben führen. Stattdessen sollten sie eine unterstützende Rolle spielen. In der Regel sollten sie niemals im Mittelpunkt stehen; Das ist der Identität einer Marke vorbehalten.

Die aufkommenden Best Practices für das Icon-Design auf digitalen Plattformen basieren auf allgemein anerkannten Designprinzipien, und der Platzierung von Icons wird besondere Aufmerksamkeit gewidmet.

Hintergründe . Die Entwicklung vom GIF zum PNG hat die Flexibilität bei Folien erhöht. Bei GIFs ist dies wie bei einem Ein- / Ausschalter, da Sie nur eine Farbe auswählen können, um transparent zu sein. Mit dem PNG-Format wurde der Alphakanal eingeführt, der Farbverläufe, Deckkraft und Anti-Aliasing ermöglicht, sodass Hintergründe für eine größere Wirkung innerhalb des Symbols selbst und im Hinblick auf die Integration in Ihr gesamtes Design bearbeitet werden können.
Positionierung . Wo Symbole sitzen, ist eine Sache, aber beim Konzept der Positionierung geht es genauso um Perspektive, Schärfentiefe, Schatten und Dimensionen.
Kontrast . Es ist wichtig, frühzeitig einige Regeln für den Kontrast festzulegen. Wenn Sie berücksichtigen, wie viel Aufmerksamkeit jedes Symbol oder jede Gruppe von Symbolen zu Beginn haben wird, erhält Ihr Gesamtdesign ein Gefühl von ausgewogenem Raum. Wenn Sie dies nicht immer tun, kommt es zu Engpässen und Ihr Design fühlt sich unpassend an.

10. Form und Funktion ausbalancieren

Form und Funktion im Design sind ein Bereich, über den häufig diskutiert wird, mit etwas Hintergrundform über Funktion und umgekehrt. Die Realität ist, dass keiner wichtiger ist als der andere. Das Entwerfen großartiger Ikonen ist ein ständiger Balanceakt, bei dem sich Form und Funktion in einer scheinbar mühelosen Verbindung treffen.

Nachdem alles gesagt und getan ist, werden Ihre Symbole ein Erfolg sein, wenn sie einfach, symbolisch und ikonisch sind.

Wörter: Sandi Wassmer

Sandi Wassmer ist ein digitaler Technologe, inklusive Designradikaler, Vermarkter, Schriftsteller, Redner, Regierungsberater und gelegentlicher Schläfer. Ihr Eifer für UX ist inspiriert von gutem Design, insbesondere Industriedesign und Architektur.

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 247.