Styleguides und Design Systeme im Agenturprozess
Das Projekt von Holger zum MyInnovationDay:
Die Motivation für meinen ersten myInnovationDay bei 4c media bestand in erster Linie darin, das interdisziplinäre Teamwork weiter auszubauen um so die Innovationsfähigkeit weiter zu fördern. Um im Agenturalltag mehr agieren statt reagieren zu können, ist es wichtig, Prozesse „einzuüben“, diese zu etablieren und kontinuierlich zu verbessern. So schaffen wir mehr Transparenz und Planbarkeit im Designprozess.
Überlegungen
Mir kam der Gedanke, dass der Begriff „Styleguide“, wie wir ihn bisher verwenden, nicht weit genug greift. Besser wäre es, den Styleguide als Stufe im Design-Prozess, oder als Teil eines Design-Systems zu verstehen:
- Design-Prinzipien
- Styleguide
- Pattern-Library
Diese Begriffe werden, auch in vielen Fachartikeln, oft nicht trennscharf voneinander verwendet. Hier der Versuch einer Abgrenzung die im Agentur-Kontext gut funktionieren kann:
1. Design-Prinzipien
Hier werden die grundlegenden Eigenschaften des Designs beschrieben. Im Idealfall lassen sich diese aus den Zielen des Projekts, bzw. den Rahmenbedingungen ableiten.
- Gut als Teil des Rebriefings geeignet.
- Können aus einem allgemeinen und einem projektspezifischen Teil bestehen.
Beispiele
Facebook Design Principles
http://www.facebook.com/note.php?note_id=118951047792
Google Philosophy
https://www.google.com/about/company/philosophy/
2. Styleguide
Abgeleitet aus den Design-Prinzipien werden hier die grafischen Grundlagen im Detail definiert und im Idealfall bereits in SCSS-Variablen des Frontend-Frameworks gespeichert:
- Farbe
- Typografie
- Proportion
- Animation
3. Pattern Library
Hier werden Aussehen und Verhalten aller relevanten Elemente und Blöcke definiert. Diese werden, inspiriert von “Atomic Design”, unterschieden in:
- Atome (Textlink, Button, Absatz, ...),
- Moleküle (Suchfeld, Navbar, Text-Bild-Element, …),
- Organismen (Header, Sidebar, Footer, …) und
- Templates (Portal, Blog, Produkt-Detail, …).
Dies ist das Herz des Frontend-Frameworks. Die im Styleguide definierten Variablen bilden zusammen mit (modifizierten) Standard-Komponenten das Theme.
Ausgewählte Beispiele
Marvel
https://marvelapp.com/styleguide/overview/introduction
- gut strukturiert
- übersichtlich gestaltet
Fontshop
https://www.fontshop.com/styleguide/
- sehr umfassend
- ansprechend gestaltet
Futurelearn
https://www.futurelearn.com/pattern-library
- angelehnt an Atomic Design
- stylish aber etwas unübersichtlich
Weitere
Sipgate: https://www.sipgate.de/design/pattern-library#atoms_headings
MailChimp: https://ux.mailchimp.com/patterns
Barricade: https://styleguide.barricade.io/styles.html
Homify: https://www.homify.de/assets/atoms.html
Technische Ansätze
A frontend styleguide for the pragmatic ;-)
http://www.poormansstyleguide.com/
An overview of Pattern Library Generators
https://github.com/davidhund/styleguide-generators
A style guide generator and component manager hot
http://atomicdocs.io/
Create atomic design systems with Pattern Lab.
http://patternlab.io/
Fazit
Die Herausforderungen bei der Umsetzung des Design-Systems sind in erster Linie der Initialaufwand, die Dokumentation, sowie die Kontinuität mit der das Projekt vorangetrieben wird.
Nächste Schritte
- Allgemeine Design-Prinzipien definieren
- Styleguide-Vorlage schaffen
- Komponenten-Workshop
- Evaluation style guide generator
- Entwicklung erster, ausgewählter Blöcke für Library