coastdigitalgroup/coastai-skills

Iconsystem

Zweck

Das Skill „Iconography System“ bietet eine Methodik zur Auswahl, Größenbestimmung und Implementierung von Icons als funktionale UI-Elemente. Es geht über das "Aussuchen hübscher Bilder“ hinaus und schafft ein strukturiertes System, das sicherstellt, dass Icons konsistent verwendet werden, um die kognitive Belastung zu reduzieren, die Markenidentität zu stärken und für alle Benutzer vollständig zugänglich zu sein. Ein robustes Iconsystem stellt sicher, dass Icons als klare Wegweiser und nicht als visuelles Durcheinander dienen.

Anwendungsfälle

• Definition des Icon-Stils (Outline, Filled, Duo-Tone) für eine neue Website.
• Festlegen standardisierter Größen- und Abstandsskalen für Icons in verschiedenen Kontexten (Buttons, Navigation, Feature-Grids).
• Überprüfen einer Website auf „Icon-Bloat“ oder inkonsistente visuelle Metaphern.
• Implementieren eines barrierefreien SVG- oder Icon-Font-Workflows für Entwickler.
• Auswählen von Icons, die zu bestimmten Markenattributen passen (z. B. „freundliche“ abgerundete Icons vs. „technische“ scharfkantige Icons).

Wann NICHT zu verwenden

• Illustrationen und Hero-Grafiken: Große, komplexe narrative Bilder, die eine Geschichte erzählen und nicht ein einzelnes funktionales Konzept. Verwenden Sie stattdessen allgemeine Layout- oder Hero-Optimierungs-Skills.
• Logos und Branding: Die primäre Markenidentität hat in der Regel eigene, nicht verhandelbare Regeln; Icons unterstützen die UI, sie ersetzen nicht das Markenlogo.
• Rein dekorative Hintergrundmuster: Wenn Icons als Tapete ohne semantische Bedeutung verwendet werden.

Eingaben

1. Markenstimme & -stil: Ist die Marke minimalistisch, technisch, verspielt oder corporate?
2. Technische Umgebung: Wird die Site mit einem Framework erstellt, das SVG-Komponenten, Sprites oder Icon-Fonts bevorzugt?
3. Verwendungskontexte: Wo werden Icons erscheinen? (z. B. Primäre Navigation, CTA-Buttons, Feature-Listen, Dashboard-Status).
4. Vorhandene Design-Tokens: Fluide Abstands- und Farbsysteme, um die Abstimmung sicherzustellen.

Ausgaben

1. Icon-Styleguide: Definierte Regeln für Strichstärke, Radius und Fülltypen.
2. Icon-Größenskala: Ein Satz von Tokens (z. B. icon-sm, icon-md, icon-lg), die auf bestimmte Pixel- oder Rem-Werte abgebildet werden.
3. Semantische Bibliothek: Ein kuratierter Satz von Icons, die bestimmten Aktionen oder Konzepten zugeordnet sind (z. B. „Chevron-down“ für Dropdowns).
4. Barrierefreiheitsspezifikation: Regeln für ARIA-Labels, role="img" und aria-hidden-Attribute.

Workflow

1. Visuelle Metapher festlegen

Wählen Sie Icons, die allgemein verständliche Symbole verwenden.

• Suche: Lupe.
• Einstellungen: Zahnrad oder Schieberegler.
• Benutzer: Silhouette oder Kreis-Benutzer. Vermeiden Sie „raffinierte“ Metaphern, die Benutzer dazu zwingen, die Bedeutung des Icons zu erraten.

2. Visuellen Stil definieren

Stellen Sie sicher, dass alle Icons im System die gleiche DNA haben:

• Strichstärke: Verwenden Sie eine konsistente Linienstärke (z. B. 2px für alle 24px-Icons).
• Eckenbehandlung: Abgerundete Ecken wirken zugänglicher; scharfe Ecken wirken technischer/präziser.
• Detailgrad: Vereinfachen Sie Icons, wenn sie kleiner werden, um die Lesbarkeit zu erhalten.

3. Größen- und Abstandsskala aufbauen

Wenden Sie das fluid-spacing-system auf Icon-Container an:

• Small (16px): Inline mit Text, Breadcrumbs.
• Medium (24px): Standard-Buttons, primäre Navigation.
• Large (48px+): Feature-Karten, Hero-Highlights.
• Optische Zentrierung: Passen Sie Icons manuell an, die aufgrund ihrer Form außermittig wirken (z. B. ein „Play“-Dreieck).

4. Farb- und Zustandslogik implementieren

Verknüpfen Sie Icons mit dem interactive-state-system:

• Aktiv/Hover: Icons sollten zusammen mit ihrem übergeordneten Element die Farbe oder Stärke ändern.
• Semantische Farbe: Verwenden Sie Rot für Löschen/Fehler-Icons, Grün für Erfolg.
• Kontrast: Icons müssen WCAG AA (3:1 für grafische Objekte) erfüllen.

5. Technische Auslieferung und Barrierefreiheit

• SVG vs. Icon-Font: Bevorzugen Sie SVGs aufgrund besserer Leistung, Barrierefreiheit und Renderqualität.
• Aria-Rollen:
  • Bei dekorativen Icons: Verwenden Sie aria-hidden="true".
  • Bei funktionalen Icons (z. B. ein Icon-Only-Button): Verwenden Sie role="img" und ein klares aria-label.

Entscheidungsregeln

• Die „Label-First“-Regel: Icons sollten fast immer von Textlabels begleitet werden. Verwenden Sie „eigenständige“ Icons nur für allgemein bekannte Aktionen (Suche, Schließen, Menü) und nur, wenn sie zugängliche Labels haben.
• Konsistenz vor Vielfalt: Verwenden Sie eine einzige Icon-Bibliothek (z. B. Lucide, Heroicons), anstatt Stile aus mehreren Quellen zu mischen.
• Strichstärken-Skalierung: Wenn ein Icon vergrößert wird, sollte seine Strichstärke idealerweise proportional zu seiner Größe bleiben, um das visuelle „Gewicht“ im Layout zu erhalten.
• Optisches Gleichgewicht: Nicht alle Icons sind gleich geschaffen. Ein quadratisches Icon wirkt größer als ein kreisförmiges mit derselben Breite. Verwenden Sie einen „Bounding-Box“-Ansatz, passen Sie die visuelle Größe aber manuell für das Gleichgewicht an.

Einschränkungen

• Barrierefreiheit: Icons, die als Links oder Buttons verwendet werden, MÜSSEN eine Textalternative für Screenreader haben.
• Touch-Ziele: Icons in Buttons dürfen die Trefferfläche nicht unter 24x24px reduzieren (WCAG 2.2 SC 2.5.8 Minimum); 44x44px wird für primäre Icon-Only-Aktionen bevorzugt.
• Responsiveness: Auf kleinen Bildschirmen müssen Icons möglicherweise vereinfacht oder entfernt werden, wenn sie den Text bedrängen, auch wenn sie oft beim mobilen Scannen helfen.

Häufige Fehlermuster

• Das „Mystery Meat“-Icon: Verwenden eines Icons ohne Label, das Benutzer nicht erkennen.
• Inkonsistente Strichstärken: Mischen eines 1px Outline-Icons mit einem 3px Bold-Icon in derselben Zeile.
• Übermäßige Komplexität: Verwenden von Icons mit zu vielen feinen Linien, die auf Bildschirmen mit niedriger Auflösung oder in kleinen Größen „verschwimmen“ oder verschwinden.
• Fehlende Barrierefreiheit: Verwenden von SVG-Icons ohne Titel oder ARIA-Labels, sodass Screenreader-Benutzer die Aktion nicht erkennen können.
• Gebrochene optische Ausrichtung: Ein „Play“-Button, der aussieht, als würde er von der linken Seite seines Kreises rutschen, weil er mathematisch zentriert, aber nicht optisch zentriert ist.

Validierungskriterien

• Alle Icons gehören einem einzigen, zusammenhängenden visuellen Stil an.
• Icons haben eine definierte Größenskala (z. B. 16, 24, 32, 48).
• Eigenständige Icons (falls vorhanden) haben aria-label oder gleichwertige Textalternativen.
• Dekorative Icons sind mit aria-hidden="true" gekennzeichnet.
• Icons behalten ein Kontrastverhältnis von 3:1 zu ihrem Hintergrund.
• Icon-Only-Interaktionselemente erfüllen das WCAG-2.2-Touch-Target-Minimum von 24x24px (44x44px bevorzugt).
• Visuelle Metaphern sind klar und standardisiert (kein „Raten“).