Blog

Living Styleguide

Living Styleguide: Anleitung für ein zeitgemäßes Design

Für große Marken ist er die Bibel, für Designer ist er tägliches Arbeitsmittel: Der Styleguide. Er dient Art Direktoren und Grafikern zur Dokumentation und externen Dienstleistern als Referenz für den Einsatz von Logos, Typografie, Farben, Formelementen und gibt Spielräume für die Gestaltung von Kommunikation. Kurz: Er erleichtert jedem Designer die tägliche Arbeit, indem er Standards setzt und den Marken-Look klar definiert.

 

Moderne Arten von Styleguides

 

Früher setzte man in Styleguides auf feste Vorgaben – mit genormten Bild- und Farbwerten und den Anspruch, das Ganze pixelgenau zu realisieren. In der digitalen Praxis hat sich ein solch starres System als wenig praktikabel erwiesen. Schließlich ist das Web keine unveränderliche Leinwand, sondern ein dynamisches Medium mit responsiven Webseiten und schnell drehenden Trends. Zeitgemäßer sind da sogenannte Living Styleguides. Mit ihnen lässt sich die Dokumentation direkt in den Workflow integrieren, ohne Zeit zu verlieren. Hier einige Vorteile, die für einen Living Styleguide sprechen:

 

1. Bessere Übersichtlichkeit

 

Sowohl Dokumentation als Spezifikation befinden sich am selben Ort und sind digital verfügbar.

 

2. Hohe Aktualität

 

Es gibt immer nur eine Version des Styleguides. Sie lässt sich von jedem Designer über die Projektlaufzeit hinweg erweitern und je nach Anforderungsänderung bedarfsgerecht anpassen.

 

3. Verbesserte Effizienz

 

Der Living Styleguide ist direkt in den Entwicklungsprozess integriert und nicht mehr separates Dokument. Dadurch entfallen die teilweise hohen Aufwände zur Synchronisierung und Anpassung des Styleguides.

 

4. Praktische Synergien

 

Der Living Styleguide dient Designern und Entwicklern als gemeinsame Basis. Hier entstehen viele Synergien durch enge Abstimmungen über die technischen Möglichkeiten der Umsetzung des Designs. Änderungen am Design lassen sich so direkt im Frontend einfach und schnell anpassen.

 

5. Keine Redundanzen

 

Alle wiederkehrenden Elemente, Segmente und Module einer Applikation sind in einer Pattern Library festgelegt. Sie können zentral nachgeschlagen und geändert werden.

 

6. Mehr Konsistenz

 

Der erstellende Designer legt jedes Element einmalig in all seinen Ausprägungen für das Projekt an. Später wird dann nur noch genau dieses Element wiederverwendet. Look & Feel und die Bezeichnungen der Module bleiben einheitlich.

 

7. Erleichterte Kommunikation

 

Layout und Designstandards lassen sich mit dem Living Styleguide einfach und auf allen Endgeräten der Projektbeteiligten ausspielen. Schöner Nebeneffekt: Diskussionsgrundlagen lassen sich schneller erstellen und Entscheidungen zügiger treffen. Dafür sorgt die codebasierte Umsetzung, die dem fertigen Produkt schon sehr nah kommt.

 

8. Erhöhte Wertschöpfung

 

Der Living Styleguide lässt sich als Grundlage für weitere Projekte verwenden. Teilweise kann man sich so die Entwicklung einzelner Elemente oder ganzer Module sparen. Dieses lebendige Verständnis eines Styleguides ist nachhaltiger und produktiver als die bisher eingesetzte Dokumentation.

DIY: Living Styleguide

 

Diese Vorteile klingen wie ein Traum in Ihren Ohren? Sie können bei der Erstellung mit einem der vielen Generatoren arbeiten. Die integrieren sich mal mehr oder weniger gut in Ihr Projekt. Meist baut sich die Dokumentation darin direkt aus den Modul-Templates, dem dazugehörigen CSS und den dort hinterlegten Kommentaren zusammen. Viel Individualität können Sie sich hier nicht erwarten. Es sind, wie der Name schon sagt, eben Generatoren. Der Vorteil: schneller Einstieg, meist solide Grundlage für den Start.

 

Unser Best-of für Styleguide-Generatoren

 

Eines vorweg: Es ist eine bunte Mischung. Manche dieser Generatoren schreiben alle Informationen zur Erstellung in die CSS-Datei, andere ziehen die Informationen aus CSS-, JS- und HTML-Dateien und bauen sie dann zusammen.

 

Atomic Docs ist der Styleguide-Generator der bei vielen unserer Designer gut ankommt. Alternativen:

 

 

Wenn Generatoren keine Option sind

 

Projektstruktur mit integrierter Dokumentation

Falls Ihnen Generatoren nicht zusagen oder Ihre Projektstruktur sie schlicht nicht zulässt, bauen Sie sich einfach Ihren eigenen Styleguide individuell zusammen. Wir empfehlen, neben dem Verzeichnis für die eigentlichen Sourcen, eines für die Dokumentation anzulegen und die verschiedenen Module dort auf einer jeweils eigenen Seite einzubinden.

Hier lassen sich dann weitere Kommentare zu Farbgebung und Funktion ebenfalls einfach hinterlegen. Notizen für Entwickler hinzufügen, den Pfad zur Quelldatei oder die Codeausgabe – alles ohne großen Aufwand machbar.

Module implementation und Dokumentation

Harmonisierter Arbeitsprozess: Anpassungen bei Design und Dokumentation lassen sich bei einem Living Styleguide im selben System vornehmen. Moduländerungen sind so direkt dokumentierbar. Kleiner Tipp: Durch den Einsatz von Git können Sie die Versionierung Ihrer Dokumentation jederzeit nachvollziehen und aktuell halten.

 

 

Living Guide kills the Photoshop Guide

 

Ob fertiger Styleguide oder individuell erstelltes Konstrukt – moderne Styleguides sind ein zeitgemäßes Arbeitsmittel für alle, die agil gestalten und zügig dokumentieren möchten. Sie sind eine gute Lösung, um die Dokumentation von Designprojekten ohne allzu großen Aufwand und möglichst fehlerfrei zu betreiben. Gleichzeitig beenden sie das Zeitalter des statischen und heute wenig praktikablen Photoshop Styleguides.

 

Sie möchten Ihre Markenplattform neugestalten und zeitgemäß dokumentieren? Lassen Sie uns darüber reden.



Diese Website nutzt Cookies, um Ihnen bestmögliche Funktionalitäten bieten zu können. Durch die weitere Nutzung der Seite stimmen Sie der Verwendung zu. Mehr Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen