So wählen Sie Symbole und Grafiken aus, ohne dass eine Website generisch aussieht

Verwenden Sie Symbole für eine definierte Aufgabe

Ein Symbol kann eine bekannte Aktion kennzeichnen, wiederholte Kategorien unterscheiden oder eine kurze Bezeichnung verstärken. Ein einzigartiges abstraktes Symbol neben jedem Absatz erleichtert die Interpretation, ohne die Navigation zu erleichtern.

Entfernen Sie das Symbol und prüfen Sie, ob die Bedeutung verloren geht. Behalten Sie es nur, wenn es die Erkennung oder den Vergleich verbessert.

Beginnen Sie mit den Aufgaben, die die Symbole ausführen müssen. Für Navigationssymbole, Statusanzeigen, Funktionsabbildungen und dekorative Markierungen gelten unterschiedliche Anforderungen. Verwenden Sie bekannte Formen für häufige Aktionen und fügen Sie Text hinzu, wenn die Bedeutung mehrdeutig sein könnte. Ein Symbol soll den Leseaufwand verringern und kein kleines Rätsel erzeugen. Testen Sie es ohne Farbe und in der endgültigen Größe; Dünne Details, die in einer Designdatei raffiniert aussehen, können auf einem Telefon verschwinden.

Halten Sie Geometrie und Gewicht konsistent

Strichstärke, Eckenform, Perspektive und ausgefüllte Flächen erzeugen eine Familienähnlichkeit. Durch die Kombination dünner Umrisssymbole mit stark ausgefüllten Symbolen wirkt ein Serviceraster wie aus nicht zusammenhängenden Bausätzen zusammengesetzt.

Vergleichen Sie Symbole in ihrer tatsächlichen Anzeigegröße und definieren Sie Raster-, Strich- und optische Korrekturregeln.

Konsistenz entsteht durch ein kontrolliertes Zeichnungssystem. Definieren Sie Raster, Strich, Eckenbehandlung, optische Größe und den gefüllten oder umrissenen Stil. Überprüfen Sie die Symbole nebeneinander in der Größe, die in Schaltflächen und Listen verwendet wird. Das Mischen mehrerer Bibliotheken führt häufig zu nicht übereinstimmenden Gewichten und Proportionen. Wenn eine Bibliothek die meisten Anforderungen abdeckt, zeichnen Sie die wenigen fehlenden Symbole entsprechend neu, anstatt eine zweite, nicht verwandte visuelle Sprache hinzuzufügen.

Verlassen Sie sich nicht nur auf Symbole

Unbekannte Symbole benötigen sichtbare Beschriftungen und interaktive Steuerelemente benötigen verständliche Namen. Ein mobiles Menü mit mehrdeutigen Symbolen kann Besucher blockieren, die die Interpretation des Designers nicht teilen.

Testen Sie mit Beschriftungen, Fokuszuständen, Kontrast und der Semantik unterstützender Technologien.

Grafiken sollten Informationen enthalten, die die umgebende Kopie nicht bereits bereitstellt. Ein Arbeitsablaufdiagramm kann Reihenfolge und Verantwortung darstellen; eine Vergleichsgrafik kann Unterschiede aufzeigen; Ein Produktdetail kann die Aufmerksamkeit auf eine Funktion lenken. Generische schwebende Formen erhöhen das Dateigewicht, ohne das Verständnis zu verbessern. Schreiben Sie die beabsichtigte Erkenntnis auf, bevor Sie das Asset erstellen, und entfernen Sie dann Etiketten oder Dekorationen, die nicht zu dieser Erklärung beitragen.

Planen Sie Eigentum und Dateibereitstellung

Ein verwendbares Symbolsystem umfasst Quelldateien, Exportgrößen und Regeln zum Hinzufügen neuer Symbole. Ohne Besitzer ändern sich spätere Ergänzungen im Stil oder werden aus inkompatiblen Bibliotheken kopiert.

Die Übergabe umfasst zugängliche Namen, Exportgrößen und Quelleneigentum. Dekorative Symbole sollten vor unterstützender Technologie verborgen bleiben, während interaktive Steuerelemente Beschriftungen benötigen, die die Aktion beschreiben. Stellen Sie SVG bereit, wo es angemessen ist, aber überprüfen Sie den Code und das Ansichtsfeld vor der Veröffentlichung. Behalten Sie bearbeitbare Quelldateien und einen Nutzungsindex bei, damit spätere Ergänzungen demselben System folgen, anstatt den Symbolstil auf jeder Seite neu zu starten.