Vorheriger Artikel Nächster Artikel

Pattern Lab: Fantastische Tools für Webdesigner

Mit Atomic werden Web-Projekte in kleinstmögliche Komponenten zerlegt, um anschließend zu größeren Einheiten bis hin zu kompletten Seiten zu werden. Um bei diesen Prozess nicht den Überblick zu verlieren, wurde Pattern Lab ins Leben gerufen. Wir stellen euch das Tool und den dahinterstehenden Atomic-Design-Ansatz vor.

Pattern Lab: Fantastische Tools für Webdesigner

Atomic Design

Jeder Webworker, der sich schon mal in größeren Projekte einarbeiten musste, kennt die Problematik: Es vergehen oft Stunden, bis man sich halbwegs in den Code eingelesen hat und sich zurechtfindet. Manchmal findet man einen Styleguide oder eine andere Form der Dokumentation für das Projekt vor, die aber in der Regel erst nach der Erschaffung des Projekts entstanden und entsprechend unübersichtlich, abstrakt und unvollständig sind. Mit Atomic Design soll sich das ändern. Bei diesem Entwicklungsansatz werden Projektbestandteile in Atome und Moleküle beziehungsweise Module, Organismen, Templates und Seiten zerlegt.

atomic_design

  • Atome sind HTML-Elemente und Blöcke, aus denen ein Interface besteht. Sie können nicht weiter zusammengebrochen werden und sind in alleine zu nichts fähig.
  • Moleküle sind komplexer als Atome und verfolgen eine „Mach-eine-Sache-und-mach-sie-gut“-Strategie. Sie dienen oft als Teil eines komplexen Systems.
  • Organismen sind Snippets wie Header, Footer und Navigation. Sie sind eine Gruppe von zusammengefassten Molekülen, die einen funktionierenden Abschnitt der Seite formieren und sollen als eigenständige und wiederverwertbare Komponenten dienen.
  • Templates beginnen als Wireframes und entwickeln sich mit der Zeit weiter. Sie bestehen aus einer Gruppierung von Organismen und bilden bereits einen sehr konkreten Teil des Projektes ab.
  • Seiten sind Instanzen von Templates, in denen die Platzhalter des Templates durch richtige beziehungsweise Musterinhalte ersetzt werden. Sie dienen als Anschauungsmaterial für die meisten Beteiligten.

Der Vorteil der Atomic-Design-Herangehensweise: Der Kunde sieht schon in einem frühen Stadium etwas und die an der Herstellung Beteiligten können strukturiert arbeiten.

Atomic Design mit Pattern Lab

So gut der Atomic-Design-Ansatz klingen mag, er bringt einiges an organisatorischen Problemen mit. Probleme, die Pattern Lab lösen will:

Pattern Lab ist eine Sammlung von Tools, die dich bei der Erstellung und Wartung von Atomic-Web-Design-Systemen unterstützen sollen. Sie bestehen aus einer Komponenten-Bibliothek, in der du schnell auf alle Bestandteile deines Projekts in einer isolierten Umgebung zugreifen kannst. Das beigefügte „Starter Kit“ soll die Orientierung im Pattern Lab vereinfachen und die Einarbeitungszeit verkürzen.

pattern_lab
Screenshot: Pattern Lab.

Für die Dokumentation von Projektbestandteilen stellt Pattern Lab eine Anmerkungsfunktion zur Verfügung. Für den schnellen Einsatz von Atomen oder Organismen kann das Tool den HTML-Code zum jeweils betrachteten Teil ausgeben. Für die Entwicklung von Projekten mit stellt das Tool einen eigenen Viewport-Resizer zur Verfügung.

Tipp für die Watchlist

Atomic Design ist ein wirklich interessanter Ansatz für die Entwicklung von Web-Projekten und die Idee hinter Pattern Lab ist wirklich gut. Der aktuelle Version des Tools mangelt es derzeit leider an Dokumentation, sodass weniger versierte Anwender etwas mehr Zeit als eigentlich nötig für die Einarbeitung brauchen werden. Dennoch sollte man das auf PHP basierende Tool auf der Watchlist behalten.

Wer bereits jetzt einen Sprung ins kalte Wasser wagen will, kann das im Github Repo von Pattern Lab tun. Auf der Webseite des Autors Brad Frost findet ihr zudem eine Live-Demo von Pattern Lab.

Weiterführende Links zum Thema „Atomic Design“

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von marc am 22.07.2013 (11:41 Uhr)

    Hi,

    auf der beyond tellerrand hat Brad Frost sein "Atomic Design" das erste mal vorgestellt und somit quasi "gelauncht". Hier gibt es den kompletten Talk kostenlos im Netz: https://vimeo.com/67476280

    /marc

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Entwicklung & Design
Grid – Eine einfache Einführung in Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign

Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem. » weiterlesen

t3n-Blogperlen: Die 10 besten deutschsprachigen Blogs für Entwickler
t3n-Blogperlen: Die 10 besten deutschsprachigen Blogs für Entwickler

In der neuen Rubrik „t3n-Blogperlen“ beschäftigen wir uns heute mit zehn lesenswerten deutschsprachigen Blogs für Webworker und Entwickler. Wählt euren Favoriten! » weiterlesen

t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen