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:

  1. Design-Prinzipien
  2. Styleguide
  3. 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