Ü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.

UX-icon

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

Ergänzungen zu Styleguides

IMPLEMENTIEUNG UND UMSETZUNG

WIKI STYLEGUIDE

USER JOURNEY

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.

Get in Touch

Ihr Ansprechpartner