← zurück

STYLE GUIDES

Vor allem bei komplexen Anwendungen ist Konsistenz das A und O intuitiver Bedienung. Eine in den Abläufen konsistente Applikation führt zu effizienter Nutzung und einer schnellen Erlernbarkeit durch den Anwender. Gleich aussehende Icons lösen gleiche Aktionen aus, Tabellen verhalten sich nach dem gleichen Prinzip und konsistent eingesetzte Farben unterscheiden interaktive Bereiche von nicht interaktiven.

Senior Developer René Kann und Senior Interface Designerin Susi Augustin bei der Erstellung eines Konzeptes.

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


← zurück