Styleguide:
Unsere Software für Frontend-Entwicklung

Internetdesign erfolgt mit Photoshop, Illustrator und vergleichbarer Software. Und natürlich vor allem auch mit spezialisierten Softwarelösungen wie Sketch oder Adobe XD.

Nach dem Design steht die technische Entwicklung des Frontends: also die Umsetzung mittels HTML, CSS und JavaScript. LfdA nutzt dafür eine eigens entwickelte Software. Mit dieser Software erstellen wir einen testbaren Styleguide für Ihre Website.

Sie können also das tatsächlich (technisch umgesetzte) Design Ihrer Internetseite sehen und auf Desktop-Computern oder Mobilgeräten testen, bevor es im CMS implementiert wird.

LfdA Arbeiten mit den Styleguide: Buttons

Der LfdA-Styleguide: Ansicht von verschiedenen Buttondesigns bei unserem Kunden Sutorbank

LfdA-Styleguide Ansicht einer Seite

Ansicht einer fertigen Seite aus Einzelelementen mit dem LfdA-Styleguide

Wozu benutzt man den Styleguide?

Bei der Software "Styleguide", die in die Kategorie der "Pattern Libraries" fällt, wird das Design in einzelne Komponenten unterteilt. Die Komponenten können später flexibel zu Modulen und diese zu Seiten zusammengesetzt werden.

Wir unterscheiden dabei Atome, Moleküle und Seitenvorlagen. Atome sind kleinste Bausteine, wie z. B. Buttons, Textformatierungen, Listen und Bilder. Moleküle sind zusammengesetzte Inhaltselemente aus mehreren Atomen, z. B. ein News-Teaser mit Bild, Überschrift, Teaser-Text und Link oder ein "Text-Media-Element". Diese Inhaltselemente können später im CMS gepflegt werden.

Aus den Molekülen können Vorlagen für Seiten zusammengesetzt werden. Am wichtigsten sind dabei die Homepage und eine Standard-Folgeseite. Oft gibt es noch spezielle Seite wie z. B. FAQs, Suchergebnisse, Download-Bereiche usw.

Der Styleguide dient als Basis für die Entwicklung mit einem Content-Management-System. Im Grunde erzeugt die Software CSS und JavaScript sowie eine HTML-Volage für die Backend-Entwickler.

Der Workflow mit dem LfdA-Styleguide

Der Workflow mit unserer Software unterscheidet sich insbesondere im Punkt der technischen Umsetzung des Designs. Die Vorteile liegen darin, dass Kunden das technisch umgesetzte Design betrachten und abnehmen können. An dieser Stelle wird das Design nicht mehr berührt, was die sogenannte Integration des Designs ins CMS beschleunigt.

  1. Ein Designer erstellt das Design mit Sketch, Adobe XD oder einer Grafiksoftware.
  2. Der Frontend-Entwickler analysiert das Design und zerlegt es in wiederkehrende Patterns (Muster).
  3. Der Frontend-Entwickler baut HTML, CSS und JavaScript für die Patterns.
  4. Der Kunde erhält mit dem Styleguide Sicht auf das tatsächliche Design der späteren Website: Im Webbrowser und responsive für Mobilgeräte. In diesem Schritt können Korrekturen vorgenommen werden.
  5. Der Backend-Entwickler nutzt das HTML, CSS und JavaScript des Styleguides als Vorlage für die CMS-Templates.
LfdA Styleguide, Pattern-Library

Der Arbeitsprozess mit dem LfdA-Styleguide

Den Styleguide selbst in Ihrer Firma nutzen …

Der Styleguide ist unter dem Namen Pangolin als Open-Source-Software verfügbar.

Die Dokumentation finden Sie unter pangolinjs.org.

Die Software ist immer dann geeignet, wenn Sie Website-Designs strukturiert in ein Frontend überführen möchten. Die Software ist für Frontend-Entwickler in Internetagenturen interessant.