Eine Einführung in Atomic Design für Webdesigner / UI / UX

Modularität, Wiederverwendbarkeit, und Skalierbarkeit sind nicht nur Codierungskonzepte, Sie können sie auch zum Erstellen verwenden besser optimierte Auslegungssysteme. Atomic Design ist eine neue Methodik für effektive UIs erstellen von unten nach oben, unter Verwendung einer chemischen Analogie.

Anstatt Sammlungen von Webseiten zu entwerfen, Atomic Design beginnt mit den einfachsten genannten UI-Komponenten Atome (Schaltflächen, Menüpunkte usw.) und baut die gesamte Benutzeroberfläche über vier weitere Stufen auf: Moleküle, Organismen, Vorlagen, und Seiten.

Das Buch

Die Methodik wurde vom Designer Brad Frost mit dem Ziel erstellt “Erstellung erfolgreicher UI-Designsysteme”. Atomic Design war als Buch veröffentlicht dass Sie online kostenlos lesen können oder als Taschenbuch (20,00 $) oder E-Book (10,00 $) bestellen können.

Atomic Design betrachtet das Design der Benutzeroberfläche aus einer neuen Perspektive, die hoffentlich so ist Schütteln Sie die Webdesign-Landschaft auf ein bisschen. Dieser Artikel beabsichtigt dies geben Sie ein Intro In diese Methodik geht das Buch jedoch viel weiter in die Erklärung ein. Lesen Sie es, wenn Sie können, es lohnt sich.

Atomic Design-Hierarchie

Atomic Design ist im Grunde ein mentales Modell Das lässt Designer Web-Seiten als ein Hierarchie wiederverwendbarer Komponenten. Die Hierarchie des atomaren Designs ist aufgebaut aus fünf Stufen; Jede Stufe besteht aus einer Gruppe von Komponenten aus der vorherigen Stufe. Die fünf Stufen ergeben ein klares und logisches Interface Design System. Sie sind wie folgt:

1. Atome

Genau wie in der Chemie, Atome sind die kleinsten Bausteine kann nicht weiter zerlegt werden. Daher sind Atome die grundlegende HTML-Elemente, B. Schaltflächen, Beschriftungen und Eingabefelder bieten die kleinsten Einheiten einer Webseite.

Na sicher, Nicht alle HTML-Elemente sind Atome, zum Beispiel Trennelemente (

, usw.) sind nicht die kleinsten Einheiten einer Webseite.

Atome sind nicht einfach die HTML-Elemente, sondern auch ihre zugehörigen Stile: Schriftarten, Farben, Bemaßungen und andere CSS-Stilregeln. Mit Brads eigenen Worten, Atomen “Zeigen Sie alle Ihre Grundstile auf einen Blick”.

Atome - Beispiel

Hier ist ein Beispiel von unserer Website. Die Schlagzeilen der empfohlenen Beiträge können berücksichtigt werden eine Art von Atom; sie benutzen die gleicher HTML- und CSS-Code und kann sein leicht zu unterscheiden vom Rest des Inhalts.

Beachten Sie, dass Hongkiat.com nicht für atomares Design konzipiert wurde. Hier wird nur verwendet zu Demonstrationszwecken.

Das Wesen des Atomdesigns ist zu Gestalten Sie die Benutzeroberfläche mit diesen fünf Schritten von unten nach oben, die atomaren Designkomponenten danach nicht zu identifizieren.

2. Moleküle

EIN Molekül gebildet durch eine Gruppe von Atomen. Moleküle bilden die nächste Stufe in der atomaren Entwurfshierarchie. Denken Sie an einfachere Elemente der Benutzeroberfläche, die bereits vorhanden sind besteht aus mehreren HTML-Elementen, B. ein Suchformular oder einen empfohlenen Beitrag in der Seitenleiste.

In einem Molekül organisiert sein gibt einen Zweck zu jedem Atom. In einer größeren Gruppe (Molekül) müssen Atome unterstützen und ergänzen einander müssen sie gut zusammenarbeiten um ein brauchbares Design zu erstellen.

Zum Beispiel muss der Titel (ein Atom) sein mehr hervorheben (größere Schriftarten, mehr Gewicht usw.) als der Name des Autors (ein anderes Atom) im empfohlenen Post-Block. Auf diese Weise sind die beiden Atome “gemeint” zu arbeitet als ein Team das beste ergebnis erzielen.

Moleküle - Beispiel

Anhand unseres vorherigen Beispiels können Sie sehen, dass in der Seitenleiste von Hongkiat ein Block empfohlener Posts als Molekül angesehen werden kann. Ein empfohlenes Post-Molekül ist aufgebaut aus drei Atomen: Miniaturbild, Titel und Name des Autors.

3. Organismen

Organismen bestehen aus a Gruppe von Molekülen, Atomen (und manchmal andere Organismen). Im Webdesign sind Organismen komplexere UI-Komponenten das repräsentieren definitive Abschnitte der Seite, z. B. eine Kopfzeile, eine Fußzeile oder eine Seitenleiste.

Organismen können entweder bestehen verschiedene Arten von Molekülen, Eine Seitenleiste kann beispielsweise aus einer Suchleiste und verschiedenen Arten von Widgets oder aus das gleiche Molekül wiederholt sich mehrmals, zum Beispiel eine Handvoll verwandter Postblöcke untereinander. Und es kann die Kombination dieser beiden sein.

Organismen - Beispiel

Auf der Website von Hongkiat könnte die Seitenleiste ein Organismus sein. Es besteht aus einem Suchleiste (eine Art Molekül, nur einmal angezeigt) und mehrere empfohlene Beiträge (eine andere Art von Molekül, oft angezeigt).

Der Sidebar-Organismus kann jedoch auch als Zusammensetzung von a gesehen werden Molekül (die Suchleiste) und ein anderer Organismus (das empfohlene Post-Widget mit mehreren empfohlenen Posts). Atomic Design ist ein flexibles Modell, Die Regeln sind nicht sehr streng, daher können wir in diesem Fall denselben Baustein sowohl als Molekül als auch als Organismus definieren.

4. Vorlagen

Die nächste Stufe in der atomaren Entwurfshierarchie ist Vorlagen. Wie Sie sehen können, ist dies das atomare Design hört auf, die chemische Analogie zu verwenden. Brad verzichtet zu diesem Zeitpunkt auf die Terminologie, wie er denkt weniger verständlich für Kunden und andere Stakeholder, und es sind im Wesentlichen die beiden letzten Stufen (Vorlagen und Seiten), die Designer verkaufen müssen.

Vorlagen sind aus Organismen aufgebaut. Sie sind Objekte auf Seitenebene aber ohne den endgültigen Inhalt. Der Zweck von Vorlagen ist zu repräsentieren die Struktur des zugrunde liegenden Inhalts.

Vorlagen zeigen, wie verschiedene Atome, Moleküle, Organismen “zusammen im Rahmen eines Layouts arbeiten”. Sie repräsentieren im Wesentlichen die Skelett einer Seite.

Vorlagen - Beispiel

Denken Sie als Beispiel an ein Homepagevorlage mit Platzhalterbildern und Lorem ipsum-Textblöcken.

Unten sehen Sie ein Beispiel aus dem Atomic Design-Buch. Es ist die Homepagevorlage des TimeInc-Magazins. Atome, Moleküle und Organismen sind alle an ihrer Stelle, aber nur mit schematischem Inhalt.

5. Seiten

Seiten repräsentieren die letzte Stufe der atomaren Entwurfshierarchie. Seiten sind die “bestimmte Instanzen von Vorlagen”. In der Seitenphase erhalten Vorlagen mit echten Inhalten bevölkert (Kopie, Mikrokopie, Bilder, Videos usw.), so wie sie in der realen Benutzeroberfläche angezeigt werden.

Seiten können Designer sehen, wie die Endbenutzererfahrung wird aussehen, bis Testen Sie das Design mit echten Benutzern und zu Messen Sie, wie gut es funktioniert in Bezug auf Benutzerfreundlichkeit, Konvertierung, Zugänglichkeit und andere Metriken.

Seiten & Vorlagenvariationen

Das andere Ziel der Seitenphase ist es, zu machen Vorlagenvariationen möglich. Wir sprechen über Template-Variationen beim zugrunde liegenden Vorlage ist das gleiche aber das bevölkern Inhalt ist (etwas) unterschiedlich. Zum Beispiel, wenn Sie verschiedenen Benutzergruppen unterschiedliche Inhalte anzeigen möchten (z. B. für Besucher im Vergleich zu angemeldeten Benutzern) oder wenn eine Überschrift viel länger ist als die anderen.

Die Verwendung von Vorlagenvarianten ist entscheidend, wenn wir erstellen möchten konsequent und belastbar Benutzeroberflächen. Kleinere Komponenten (Atome, Moleküle, Organismen) müssen funktionieren gut in verschiedenen szenarien.

Zum Beispiel muss eine Schaltfläche mit anklickbar aussehen was auch immer umliegende Elemente herum. Wenn es in einer bestimmten Variation nicht umsetzbar erscheint, müssen Sie das Schaltflächenatom bis zu diesem Zeitpunkt neu entwerfen passt für alle Anwendungsfälle.

Seiten - Beispiel

Unten sehen Sie den Seitenstadium der vorherigen TimeInc-Homepagevorlage. Sieht anders aus, oder? Das ist nur eine Vorlagenvariante, obwohl. Um eine effektive Benutzeroberfläche zu haben, muss das Designteam intensiv darüber nachdenken was kann sich ändern in der realen Site. Dann müssen sie auch das Design für diese Vorlagenvariante (Seite) testen.