Style Guides

csm_ux-designer02_da0362dcf3

Um Konsistenz innerhalb einer Anwendung zu erreichen, ist ein Style Guide unabdingbar. In ihm sind alle Definitionen zu Interface Design (Look) und Interaction Design (Feel) dokumentiert:

  • Zu Grunde liegendes Raster für ein oder mehrere Displaygrößen (statisch, fluide, responsive)
  • Funktionsbereiche, Dialoge, Seitentypen
  • Bemaßungen, Abstände
  • Interaktive Elemente
  • Interaktionszustände (initial, während und nach Interaktion, bei Fehler, usw.)
  • Animationen & Transitions
  • Icons
  • Schmuck- und Interaktionsfarben
  • Schriftarten, -größen, -schnitte

Der richtige Style Guide:

Je nach Art der Applikation und Team-Zusammensetzung sind unterschiedliche Typen von Style Guides sinnvoll:

  • Klassischer Style Guide in PDF-Form zur Dokumentation von Grundlagen
  • Online Style Guide zur kollaborativen, schrittweisen Entwicklung. Nützlich, wenn mehrere Entwickler-Teams Zugriff haben sollen
  • Interaktiv nutzbarer Demo Style Guide (Pattern Library). Sinnvoll bei hochgradig interaktiven Elementen, für eigen-entwickelte Komponenten und bei komplexen Animationen
  • CSS-Demo-Template bei webbasierten Applikationen