Atomares Design und Skizze – Ein Leitfaden zur Verbesserung des Arbeitsablaufs

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

Designsysteme: Eine Einführung

Ein Designsystem ist eine Reihe wiederverwendbarer Komponenten und Richtlinien, die Teams dabei helfen, sich während der Erstellung und Lebensdauer eines Produkts auf eine gemeinsame Sprache zu einigen.

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

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

Ein weiteres Beispiel ist Voice and Tone von Mailchimp. Es beschreibt, wie die eigene Stimme immer gleich ist, aber der Ton sich je nach Kontext ändert. Sich dessen bewusst zu sein, hilft dabei, den Inhalt zu stärken und der Marke Persönlichkeit zu verleihen.

Obwohl es viele verschiedene Methoden gibt, die zum Erstellen eines Designsystems verwendet werden können, ist es eine gute Idee, ein Framework auszuwählen, das es dem Team ermöglicht, sich um eine gemeinsame Sprache und einen Satz von Standards zu vereinheitlichen. Atomic Design ist ein großartiges Beispiel für ein Framework, das diese beiden Ziele erreicht.

Atomic Design: Gebäudedesignsysteme

Atomic Design, eine 2013 von Brad Frost eingeführte Methodik, basiert auf der Idee, dass jedes Designsystem als eine Reihe nebeneinander bestehender Bausteine ​​definiert werden kann.

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

• Atome . Repräsentieren die Grundbausteine ​​eines Designsystems. 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. Beispielsweise können eine Schaltfläche und ein Textfeld gruppiert werden, um ein Suchformular zu erstellen.
• Organismen . Atome und Moleküle, die in einer komplexen Struktur zusammenarbeiten. Ein mit einer Navigationsleiste gruppiertes Suchfeld bildet einen Header-Organismus auf einer Website.
• Vorlagen. Objekte auf Seitenebene, die Komponenten in einem Layout platzieren, das die Inhaltsstruktur definiert. Nehmen Sie zum Beispiel einen Header-Organismus und platzieren Sie ihn auf einer Homepage-Vorlage.
• Seiten. Instanzen von Vorlagen, die das Endprodukt darstellen.

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

Die Verwendung von Atomic Design zur Erstellung und Pflege eines Designsystems hilft Designern dabei, effizienter zu arbeiten und innerhalb ihrer Teams besser zu kommunizieren. Es gibt eine Fülle von Tools und Methoden zum Erstellen und Pflegen von Designsystemen, aber oft sind die besten Tools diejenigen, mit denen wir am vertrautesten sind.

So verwenden Sie Atomic Design mit Sketch

Um ein Designsystem mit Atomic Design zu entwickeln, ist Sketch ein großartiges (und bereits bekanntes) Werkzeug. Es bietet uns eine Leinwand, um Atome, Moleküle und Organismen zu erschaffen: die Elemente, die benötigt werden, um den Kern eines Designsystems zu definieren.

Atome erschaffen

Wir beginnen damit, drei Arten von Atomen in Sketch zu erstellen: Symbole, Ebenenstile und Textstile.

Symbole. Symbole sind nichts anderes als wiederverwendbare Komponenten. Sie werden einmal definiert, da sie im gesamten Produkt instanziiert werden können. Beispielsweise kann ein Pfeilsymbol (Atom) mit Eigenschaften wie Rahmenfarbe, Größe usw. definiert werden. Wir können dieses Symbol dann wiederverwenden, ohne es jedes Mal neu erstellen zu müssen.

Ebenenstile . Ebenenstile sind die wiederverwendbaren visuellen Stilelemente, die auf allen Ebenen konsistent bleiben. Beispielsweise die Füllfarbe des zuvor definierten Pfeils.

Textstile. Textstile sind, ähnlich wie Ebenenstile, wiederverwendbare Elemente, die für Konsistenz bei ähnlichen Textobjekten sorgen. Beispielsweise die Definition von Schriftgröße und Farbe eines h1-Elements. Es funktioniert ähnlich wie Textstile in Google Docs oder Microsoft Word.

Wenn wir Symbole, Ebenenstile und Textstile definieren, kann Sketch sie in seinen Menüs für Symbole und Textstile mit einem „/“ (Schrägstrich) in hierarchische Kategorien unterteilen. Das Befolgen von Namenskonventionen und ein gut definierter Satz von Hauptkategorien geben Dateien eine organisierte Struktur, wodurch Verwirrung und Inkonsistenzen reduziert werden.

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

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

• Vermögenswerte
• Tasten
• Eingabesteuerung
• Bilder
• Navigation
• Information

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

• Füllt
• Grenzen
• Schatten
• Farbverläufe

Ähnlich wie bei Ebenenstilen können wir hier Textstile unter Atoms / erstellen:

• Überschriften
• Körper
• Bildbeschriftung
• Etiketten
• Verknüpfungen

Eine einheitliche Designsprache sollte nicht nur aus einer Reihe statischer Regeln und einzelner Atome bestehen; es sollte ein sich entwickelndes Ökosystem sein. – Airbnb über den Aufbau einer visuellen Sprache.

Moleküle erschaffen

Atome definieren den grundlegenden Teil der Designrichtlinien eines Produkts, sind jedoch für sich genommen nicht vollständig nützlich. Um eine gewisse Funktionalität abzuleiten, fügen wir Atome zusammen und erzeugen Moleküle.

Das Verbinden einer Bezeichnung (Atom) mit einer Eingabeschaltfläche (Atom), um eine Suchfunktion zu erstellen, ist ein gutes Beispiel für ein häufig verwendetes Molekülelement.

Ein Wort der Vorsicht, da es hier eine gewisse Grauzone geben kann. Eine Schaltfläche auf Codeebene wird als Atom betrachtet, aber eine Schaltfläche auf Designebene wird als Molekül betrachtet, da wir ein Ebenenstil- und ein Textstil-Atom gruppieren. Um Verwirrung zu vermeiden, ist es eine gute Idee, nur an die Elemente auf Codeebene zu denken.

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

• Information
• Navigation
• Eingabesteuerung

Da Moleküle anfangen werden, unsere Produkte auf interaktive Weise zu formen, 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
• Registerkarten
• Seitennummerierung
• Fortschrittsindikatoren
• Datumsfelder
• Textfelder
• Kontrollkästchen
• Radio Knöpfe
• Module

Organismen erschaffen

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

Im Gegensatz zu Atomen und Molekülen haben Organismen keine abstrakte Einbeziehung in die Produkte, die wir entwerfen; sie sind konkrete, wiederverwendbare Komponenten, die leicht mit bestimmten Aktionen identifiziert werden können. Ihre Struktur ist komplexer als ein Atom oder Molekül.

Gruppiert man das zuvor definierte Suchfeld mit weiteren Komponenten, wie einer Navigationsleiste (Molekül) und einem Logo (Atom), entsteht ein Organismus. 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
• Eingabesteuerung

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

• Dropdown-Listen
• Schaltet um
• Schieberegler
• Registerkarten
• Seitennummerierung
• Fortschrittsindikatoren
• 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, entweder indem Sie direkt über das Einfügefeld in der Sketch-Symbolleiste nach ihnen suchen, wo wir einen gut organisierten Satz von 3 Hauptkategorien finden, oder indem Sie ein Plugin wie verwenden Läufer für Skizze.

Runner for Sketch optimiert den Arbeitsablauf eines Designers, indem es eine Reihe von Tastaturbefehlen bereitstellt, die sie verwenden können, anstatt Dinge in endlosen Menüs zu finden. Sie können beispielsweise das Wort einfügen eingeben , die Tabulatortaste drücken und nach den benötigten Komponenten suchen.

Wenn Sie Atome eingeben, zeigt uns eine Dropdown-Liste alle Elemente, die unter diese Kategorie fallen. Wenn Atome und Moleküle gemeinsame Kategorien haben, werden nur Atome gesehen und alle Moleküle werden ignoriert.

Verpacken

Sketch und Atomic Design sind leistungsstarke Tools, die zusammen verwendet werden können, um Design-Workflows zu verbessern und ein effektives Designsystem-Framework zu ermöglichen.

Unter Verwendung des Konzepts von Atomen , Molekülen und Organismen als Komponentengrundlage hilft Atomic Design Designern, sich während der Erstellung und Lebensdauer eines Produkts um eine gemeinsame Sprache zu vereinheitlichen.

Designer können Tools wie Sketch verwenden, um Atomic Design zu implementieren, was einen effizienteren Arbeitsablauf und eine Reihe von Standards bietet, die von allen Mitgliedern des Designteams, einschließlich Entwicklern, in den letzten Phasen des Projekts angenommen werden.

Weiterführende Literatur im Toptal Design Blog:

• So erstellen Sie ein effektives Design-Framework
• Verständnis von Designsystemen und -mustern
• So erstellen Sie einen Sketch-Styleguide, eine Bibliothek und ein UI-Kit
• Warum Startups einen Styleguide brauchen
• Zeplin Sketch Plugin – Die Workflow-Brücke zwischen Design und Engineering