UX Styleguides
Gestaltungsvorschrift für stabiles Design
Übergabe in die Entwicklung
Styleguides helfen, die Übergabe in die Implementierung klar zu strukturieren und kontinuierlich lösungsorientierte Gestaltungs-Patterns zu erfassen. So entsteht für Sie eine stetig wachsende, lebendige Dokumentation, welche hilft, Ihre Gestaltungsregeln zu verwalten und konsistent zu halten.
Die Festlegungen in einem Styleguide können von reinen Gestaltungsregeln wie etwa Mindestabständen, Größen und Farben über die bevorzugte Zusammenstellung zu funktionierenden und erprobten Design-Patterns bis hin zur Dokumentation von Interaktionsverhalten reichen. Sie werden als Richtlinie für die Ausgestaltung des gesamten Systems verwendet und wachsen bei neuen Anforderungen ans System mit.
Spezielle Formen von Styleguides sind heutzutage gängig, entweder als gut gepflegtes Wiki oder eine entsprechende Plattform, welche auch Code-Snippets von erprobten Design-Patterns zur Verfügung stellen kann. Auch Usability-Erkenntnisse und Vorgaben können hier Ihren Niederschlag finden.
Sprechen Sie mich an für ein individuelles Angebot
Holger Schlemper
Diplom Designer
UXQB Certified Professional for User Experience
(CPUX-F, UT)
Usability Testing, UX-Beratung
Usability Methoden, User Requirements
<link team holger-schlemper.html button_form_style>Kontaktieren Sie mich

Interface Styleguide
Ein Styleguide dokumentiert alle Interface-Komponenten. Eine exakte Bemaßung aller Elemente, Erfassung der Farbgebung und Positionierung auf der Oberflache sind hier festgehalten.
In erster Linie gilt: Was nicht im Styleguide steht ist erstmal nicht zulässig. Aber ein Styleguide ist, ähnlich wie ein Backlog ein "lebendiges" Dokument. Haben Sie zum Beispiel über eine Test herausgefungen, dass eine Regel in ihrem Styleguide zu Usability-Problemen führt, sollte sie schnellstmöglich verändert, abgestimmt und in den Styleguide aufgenommen werden.
Interaction Styleguide
Nicht nur das starre Aussehen eines Interaktions-Elements sollte in einem Styleguide erfasst werden. Immer häufiger haben Buttons nicht nur einfach verschiedene Zustände wie Hover, OnKlick und ähnliche, sondern verändern auch Ihre Form und Funktion. Animierte und benutzerführende Zustände helfen zu verstehen wie mit einer Software umzugehen ist und sollten ebenfalls erfasst und in einem Styleguide einsehbar sein. Oft sind sie als animated Gifs hinterlegt, welche die, oft auch komplexen Änderungen bei der Interaktion verdeutlichen.
Design Pattern
Eine wiederverwendbare Lösung für ein Gestaltungsproblem innerhalb eines Kontextes. Ein Design Pattern beschreibt ein Gestaltungsproblem, eine Lösung und wo sich diese Lösung als funktionierend herausgestellt hat. Dies können typische Zusammenstellungen von Interaktionselemente und deren Platzierung sein. Es gibt eine Reihe von Webseiten, welche freien Zugang zu einer großen Auswahl an Design Patterns bieten, im speziellen Fall sollte man aber eigene, differenzierte Patterns erstellen. EIne Pattern-Library hilft dabei, schnell auf existierende Kombinationen zugreifen zu können. Dies kann bishin zur Bereitstellung von Code für die Implementierung reichen. Repräsentationen der Interfaceelemente und die entsprechenden Code Snippets können so zur Verfügung gestellt werden um die Implementierung mit vorher entwickelten Design-Patterns zu unterstützen.

INTERFACE STYLEGUIDE

INTERACTION STYLEGUIDE

DESIGN PATTERN
Implementierung und Umsetzung
Ein Styleguide dokumentiert alle Interface-Komponenten. Eine exakte Bemaßung aller Elemente, Erfassung der Farbgebung und Positionierung auf der Oberflache sind hier festgehalten.
In erster Linie gilt: Was nicht im Styleguide steht ist erstmal nicht zulässig. Aber ein Styleguide ist, ähnlich wie ein Backlog ein "lebendiges" Dokument. Haben Sie zum Beispiel über eine Test herausgefungen, dass eine Regel in ihrem Styleguide zu Usability-Problemen führt, sollte sie schnellstmöglich verändert, abgestimmt und in den Styleguide aufgenommen werden.
Wiki Styleguide
Nicht nur das starre Aussehen eines Interaktions-Elements sollte in einem Styleguide erfasst werden. Immer häufiger haben Buttons nicht nur einfach verschiedene Zustände wie Hover, OnKlick und ähnliche, sondern verändern auch Ihre Form und Funktion. Animierte und benutzerführende Zustände helfen zu verstehen wie mit einer Software umzugehen ist und sollten ebenfalls erfasst und in einem Styleguide einsehbar sein. Oft sind sie als animated Gifs hinterlegt, welche die, oft auch komplexen Änderungen bei der Interaktion verdeutlichen.
User Journey
Eine wiederverwendbare Lösung für ein Gestaltungsproblem innerhalb eines Kontextes. Ein Design Pattern beschreibt ein Gestaltungsproblem, eine Lösung und wo sich diese Lösung als funktionierend herausgestellt hat. Dies können typische Zusammenstellungen von Interaktionselemente und deren Platzierung sein. Es gibt eine Reihe von Webseiten, welche freien Zugang zu einer großen Auswahl an Design Patterns bieten, im speziellen Fall sollte man aber eigene, differenzierte Patterns erstellen. EIne Pattern-Library hilft dabei, schnell auf existierende Kombinationen zugreifen zu können. Dies kann bishin zur Bereitstellung von Code für die Implementierung reichen. Repräsentationen der Interfaceelemente und die entsprechenden Code Snippets können so zur Verfügung gestellt werden um die Implementierung mit vorher entwickelten Design-Patterns zu unterstützen.

Vom Styleguide zum Code
Das Frontend bildet die Schnittstelle zwischen Nutzer und System. Eine gute Optik reicht dabei nicht, das Frontend muss auch nutzerfreundlich sein - ein Anwender soll sich schließlich schnell und intuitiv zurechtfinden. Deshalb konzipieren unsere Usability-Experten das Design und unsere Software-Entwickler setzen dies in Code um.