Atomic Design and Sketch - Ein Leitfaden zur Verbesserung des Arbeitsablaufs

Sketch und Atomic Design sind leistungsstarke Werkzeuge und Methoden, mit denen Designer Entwurfssysteme erstellen können, die Standardisierung und einen effizienteren Arbeitsablauf ermöglichen.

Design Systems: Eine Grundierung

Ein Design-System ist ein Satz wiederverwendbarer Komponenten und Richtlinien, mit deren Hilfe sich Teams während der Erstellung und des Lebens eines Produkts in einer gemeinsamen Sprache zusammenfinden.

In den meisten Fällen bestehen Entwurfssysteme aus einem Style Guide und einer Komponentenbibliothek. Sie können auch Elemente wie Stimme und Ton sowie Markenwerte enthalten. Der Sinn eines Design-Systems besteht darin, eine Reihe von Standards zu schaffen, die für ein Produkt oder eine Marke als einzige Wahrheit dienen.

Das Material Design von Google ist ein strukturiertes Designsystem, das wiederverwendbare Muster und Richtlinien für die Benutzeroberfläche enthält.

Das Material Design von Google ist ein Beispiel für ein strukturiertes UI-Design-System. Material Design wurde bereits 2014 eingeführt, um zusammenhängende Android-Apps zu entwerfen und zu entwickeln.

Ein anderes Beispiel ist Mailchimps Voice and Tone. Es beschreibt, wie die eigene Stimme immer gleich ist, der Ton sich jedoch je nach Kontext ändert. Wenn Sie sich dessen bewusst sind, können Sie den Inhalt stärken und der Marke Persönlichkeit verleihen.

Zwar gibt es viele verschiedene Methoden, mit denen ein Entwurfssystem erstellt werden kann, es ist jedoch eine gute Idee, einen Rahmen zu wählen, der es dem Team ermöglicht, sich um eine gemeinsame Sprache und Standards zu vereinheitlichen. Atomic Design ist ein hervorragendes Beispiel für ein Framework, das diese beiden Ziele erreicht.

Atomic Design: Gebäudeplanungssysteme

Atomic Design, eine von Brad Frost im Jahr 2013 eingeführte Methodik, basiert auf der Idee, dass jedes Designsystem als eine Reihe von Bausteinen definiert werden kann, die nebeneinander existieren.

Hier ist ein kurzer Überblick über die Komponenten von Atomic Design:

  • Atome Repräsentieren Sie die Grundbausteine ​​eines Entwurfssystems. Ein Beispiel ist eine Schaltfläche oder ein Textstil.
  • Moleküle. Eine Gruppe von Atomen, die als Einheit zusammenarbeiten. Moleküle sind greifbare UI-Elemente. Zum Beispiel können eine Schaltfläche und ein Textfeld gruppiert werden, um ein Suchformular zu erstellen.
  • Organismen Atome und Moleküle arbeiten in einer komplexen Struktur zusammen. Ein mit einer Navigationsleiste gruppiertes Suchfeld bildet einen Header-Organismus auf einer Website.
  • Vorlagen. Objekte auf Seitenebene platzieren Komponenten in einem Layout, das die Inhaltsstruktur definiert. Nehmen Sie zum Beispiel einen Kopforganismus und platzieren Sie ihn in einer Homepagevorlage.
  • Seiten. Instanzen von Vorlagen, die das Endprodukt darstellen.
Ein großartiger Rahmen und eine gute Methodik für ein Design-System ist Atomic Design, das wiederverwendbare Design-Komponenten und Elemente der Benutzeroberfläche enthält.

„Wir haben die Aufgabe, Schnittstellen für mehr Benutzer in mehr Kontexten zu erstellen, indem mehr Browser auf mehr Geräten mit mehr Bildschirmgrößen und mehr Funktionen als je zuvor verwendet werden. Das ist in der Tat eine gewaltige Aufgabe. Zum Glück helfen Design-Systeme hier. “- Brad Frost als Einführung in Atomic Design und Design-Systeme.

Durch die Verwendung von Atomic Design zur Erstellung und Pflege eines Entwurfssystems können Designer effizienter arbeiten und in ihren Teams besser kommunizieren. Es gibt eine Vielzahl von Werkzeugen und Methoden zum Erstellen und Warten von Entwurfssystemen, aber oft sind die besten Werkzeuge die, die wir am besten kennen.

So verwenden Sie Atomic Design mit Sketch

Um ein Entwurfssystem mit Atomic Design zu entwickeln, ist Sketch ein hervorragendes (und bereits bekanntes) Werkzeug. Es bietet uns eine Leinwand, aus der Atome, Moleküle und Organismen entstehen können: die Elemente, die den Kern eines Designsystems definieren.

Atome erstellen

Zunächst erstellen wir drei Arten von Atomen in Sketch: Symbole, Ebenenstile und Textstile.

Symbole. Symbole sind nichts weiter als wiederverwendbare Komponenten. Sie werden einmal definiert, da sie im gesamten Produkt instanziiert werden können. Zum Beispiel kann ein Pfeilsymbol (Atom) mit Eigenschaften wie Rahmenfarbe, Größe usw. definiert werden. Dieses Symbol kann dann wiederverwendet werden, ohne dass es jedes Mal neu erstellt werden muss.

Ebenenstile. Ebenenstile sind wiederverwendbare visuelle Stilelemente, die über alle Ebenen hinweg konsistent bleiben. Zum Beispiel die Füllfarbe des zuvor definierten Pfeils.

Textstile. Textstile sind, ähnlich wie Ebenenstile, wiederverwendbare Elemente, die die Konsistenz ähnlicher Textobjekte gewährleisten. B. die Schriftgröße und -farbe eines h1-Elements festlegen. Es funktioniert ähnlich wie Textstile in Google Docs oder Microsoft Word.

Wenn Sie Symbole, Ebenenstile und Textstile definieren, kann Sketch sie in ihren Symbolen und Textstilenmenüs mit Hilfe eines "/" (Schrägstrich) in hierarchische Kategorien unterteilen. Wenn Sie sich an Namenskonventionen halten und eine gut definierte Gruppe von Hauptkategorien verwenden, erhalten Dateien eine organisierte Struktur, die Verwirrung und Inkonsistenzen verringert.

In Sketch können Sie das Menü

Hier finden Sie einige Möglichkeiten, hierarchische Kategorien für Symbole, Text und Ebenenstile in Sketch zu erstellen.

Wir können Symbole unter Verwendung der folgenden vorgeschlagenen Namenskonvention unter Atoms / darstellen:

  • Vermögenswerte
  • Tasten
  • Eingabesteuerungen
  • Bilder
  • Navigation
  • Information
In Sketch können Sie schnell und einfach Symbolatome erstellen, die die Grundlage für ein Entwurfssystem mit Atomic Design bilden.

In Sketch können Sie schnell und einfach Symbolatome erstellen, die die Grundlage für ein Entwurfssystem mit Atomic Design bilden.

Ebenenstile werden nicht in Symbole konvertiert, daher reicht es aus, sie anhand ihrer semantischen Gruppe zu identifizieren. Wieder mit den Atoms /:

  • Füllt
  • Grenzen
  • Schatten
  • Farbverläufe
In Sketch können Schichtatome definiert werden, die im gesamten Entwurfssystem verwendet werden.

In Sketch können Schichtatome definiert werden, die im gesamten Entwurfssystem verwendet werden.

Ähnlich wie bei Ebenenstilen können Sie Textstile erstellen:

  • Überschriften
  • Karosserie
  • Bildbeschriftung
  • Etiketten
  • Links
Textstilatome in Sketch helfen mit der Atomic Design-Methode, die Grundlage eines Entwurfssystems zu schaffen.
Eine vereinheitlichte Designsprache sollte nicht nur aus statischen Regeln und einzelnen Atomen bestehen. Es sollte ein sich entwickelndes Ökosystem sein.
-Airbnb zum Erstellen einer visuellen Sprache.

Moleküle erzeugen

Atome definieren den grundlegenden Teil der Design-Richtlinien eines Produkts, sind aber allein nicht Um etwas Funktionalität abzuleiten, verbinden wir Atome miteinander und erzeugen Moleküle.

Das Verbinden eines Labels (Atoms) mit einer Eingabeschaltfläche (Atom) zum Erstellen einer Suchfunktion ist ein gutes Beispiel für ein häufig verwendetes Molekülelement.

Atome in Sketch zu funktionellen Molekülen verbinden.

Ein Wort der Vorsicht, da hier etwas Grauzone sein kann. Eine Schaltfläche auf Codeebene wird als Atom betrachtet, eine Schaltfläche auf Designebene wird jedoch als Molekül betrachtet, da wir einen Ebenenstil und ein Textstilatom gruppieren. Um Verwirrungen zu vermeiden, ist es ratsam, nur über die Elemente der Codeebene nachzudenken.

Die Hauptkategorien, die unter Moleküle / fallen, sind:

  • Information
  • Navigation
  • Eingabesteuerungen

Da Moleküle anfangen, unsere Produkte interaktiv zu gestalten, ist es eine gute Idee, die oben genannten Kategorien weiter zu definieren. In diesem Fall definieren wir eine Reihe von Unterkategorien, die eine Musterbibliothek darstellen:

  • Dropdown-Listen
  • Schaltet um
  • Schieberegler
  • Tabs
  • Seitennummerierung
  • Fortschrittsanzeigen
  • Datumsfelder
  • Textfelder
  • Ankreuzfelder
  • Radio Knöpfe
  • Module
Atome in Sketch zu funktionellen Molekülen zusammenfügen.

Organismen schaffen

Organismen sind Gruppen von Atomen und Molekülen. Sie können auch ein Teil anderer Organismen sein.

Im Gegensatz zu Atomen und Molekülen enthalten Organismen keinen abstrakten Einschluss in die Produkte, die wir entwerfen. Es handelt sich um konkrete, wiederverwendbare Komponenten, die mit bestimmten Aktionen leicht identifiziert werden können. Ihre Struktur ist komplexer als ein Atom oder Molekül.

Wenn das zuvor definierte Suchfeld mit anderen Komponenten wie einer Navigationsleiste (Molekül) und einem Logo (Atom) gruppiert ist, wird ein Organismus erstellt. Ein Beispiel ist eine Navigationsleiste oder ein Kalender.

Organismen können wie Moleküle in die gleichen Kategorien und Unterkategorien passen:

Hier sind die Hauptkategorien, die wir für Organismen / erstellen werden:

  • Information
  • Navigation
  • Eingabesteuerungen
In Sketch können Atomic Design-Organismen durch Kombination von Atomen und Molekülen erstellt werden. Von links nach rechts haben wir einen Chat-Organismus, einen Header-Organismus und zwei Beispiele für mobile Navigationsorganismen.

Wie bei Molekülen werden wir auch Unterkategorien für die Organismen erstellen:

  • Dropdown-Listen
  • Schaltet um
  • Schieberegler
  • Tabs
  • Seitennummerierung
  • Fortschrittsanzeigen
  • Datumsfelder

Bis zu diesem Punkt wurde der größte Teil der Benutzeroberfläche bereits entworfen, sodass es jetzt so einfach ist, die Instanzen unserer Komponenten aufzurufen, wenn sie für das Design benötigt werden.

Es ist einfach, jede dieser Komponenten anhand ihrer semantischen Gruppen zu finden. Sie können entweder direkt über das Einfügungsfeld in der Skizzensymbolleiste nach ihnen suchen. Dort finden Sie eine gut organisierte Gruppe von 3 Hauptkategorien oder mithilfe eines Plugins Läufer für die Skizze.

Atomic Design-Komponenten in Sketch können über das Einfügen-Bedienfeld in der Skizzensymbolleiste gefunden werden. Dadurch können Entwickler die Komponenten während des gesamten Designs schnell und einfach verwenden.

Runner for Sketch optimiert den Workflow eines Designers, indem es eine Reihe von Tastaturbefehlen bereitstellt, die verwendet werden können, anstatt in endlosen Menüs nach Gegenständen zu suchen. Sie können beispielsweise das Wort einfügen, die Tabulatortaste drücken und nach den benötigten Komponenten suchen.

Wenn Sie Atome eingeben, werden in einer Dropdown-Liste alle Elemente angezeigt, die unter diese Kategorie fallen. Wenn Atome und Moleküle gemeinsame Kategorien haben, werden nur Atome sichtbar und alle Moleküle werden ignoriert.

Plugins wie Runner for Sketch bieten eine Möglichkeit, Tastenkombinationen zum Suchen nach Komponenten zu verwenden, anstatt durch endlose Menüs zu blättern.

Verpacken

Sketch und Atomic Design sind leistungsstarke Tools, die zusammen verwendet werden können, um die Arbeitsabläufe im Design zu verbessern und ein effektives Design-System-Framework zu ermöglichen.

Atomic Design nutzt das Konzept der Atome, Moleküle und Organismen als Komponentengrundlage und hilft Konstrukteuren dabei, sich während der Entstehung und des Lebens eines Produkts um eine gemeinsame Sprache zu vereinen.

Entwickler können Tools wie Sketch verwenden, um Atomic Design zu implementieren, was einen effizienteren Arbeitsablauf und eine Reihe von Standards ermöglicht, die von allen Mitarbeitern des Designteams, einschließlich der Entwickler, in der Endphase des Projekts angenommen werden.

Ursprünglich auf https://www.toptal.com veröffentlicht.