Heutzutage haben wir eine Vielzahl von Geräten, die es gibt. Smartphone, Tablet, Computer, Fernseher… Die Liste ist lang (wirklich lang). Es ist daher notwendig, Schnittstellen zu schaffen, die sich an all diese Geräte anpassen. Designer müssen sich daher diesen Herausforderungen stellen.
Auf unserem wunderschönen blauen Planeten gibt es einige wirklich erstaunliche Menschen, und Brad Frost ist einer von ihnen. Er sagt dir nichts? Er ist weitgehend derjenige, der dieses Konzept erfunden hat, und wir werden in diesem Artikel die verschiedenen Prinzipien des Atomdesigns sehen.
Der Anfang
Seit einigen Jahren erstellen wir verschiedene Dinge (Moodboard, Styleguide), die es uns ermöglichen, das Verständnis unserer Designs für Designer zu erleichtern. Gleiches gilt für Entwickler, die Tools wie Bootstrap oder Tailwind haben, die ihnen die Arbeit bei der Entwicklung digitaler Produkte erleichtern. Das Problem tritt jedoch auf, wenn Designer und Entwickler zusammenarbeiten müssen (z. B. wenn die Designer die Modelle an den Entwickler weitergeben). Stellen Sie die Verbindung zwischen dem Designteil und dem technischen Teil her.
Was also tun? 🤔
Meine Damen und Herren, hier kommt Atomic Design ins Spiel!
Illustration – Atomares Design
Sie erinnern sich, wir haben vorhin über Brad Frost gesprochen. Tatsächlich hat Letzteres dieses Konzept von Molekülen (im Design) erfunden, ein bisschen wie das, was wir in der Chemie sehen können. Es gibt also keine in Stein gemeißelte Definition für Atomic Design, aber wenn wir eine Definition geben könnten, wäre es die folgende:
Atomares Design bezieht sich auf die Tatsache, ein System von Teilen zu schaffen, die miteinander zusammengesetzt werden können, um Modelle zu erstellen, die wir für unser Projekt endlos wiederverwenden können. Dank dieser Methode wird es uns gelingen, ein sogenanntes Designsystem zu schaffen, das daher alle in unseren Schnittstellen verwendeten Elemente zusammenführt.
Es ist nicht klar ? Okay, nehmen wir ein Beispiel mit Lego. Sie bestehen aus verschiedenen Teilen. Sie haben alle unterschiedliche Größen und unterschiedliche Farben. Aber wenn man sie zusammenfügt, können sie Elemente bilden, die wir alle kennen (na ja, denke ich), wie Häuser, Schiffe, Autos oder sogar Roboter.
Ein weiteres Beispiel sind russische Puppen, bei denen es sich um eine Reihe abnehmender Puppen handelt, eine in der anderen.
Der Einfallsreichtum unseres lieben Brad besteht darin, die Elemente in 5 Hauptkategorien einzuteilen, und sie werden nach ihrem Typ und ihrer Komplexität klassifiziert.
Die 5 Hauptkategorien
Die 5 Hauptkategorien von Atomic Design
Atome
Dies ist das einfachste Element. Atome sind die Grundlage dieses ganzen Systems. Typografie, Farben oder sogar Symbole… Es ist ein Element, das nicht geteilt werden kann (und ja, 1 geteilt durch 1, das ist immer noch 1, und zum Glück für diese Angelegenheit).
Illustration – Atome
Moleküle
Es fängt an interessant zu werden. Tatsächlich stellen die Moleküle die Gruppe von Atomen dar, die es uns ermöglichen wird, eine erste funktionelle Einheit zu erhalten. Schaltflächen, Textfelder oder auch Links werden als Moleküle betrachtet.
Illustration – Moleküle
Die Organismen
Sie werden vielleicht allmählich verstehen, warum wir vorhin Chemie erwähnt haben. Organismen werden daher durch eine Gruppe von Molekülen repräsentiert. An diesem Punkt können wir bereits sehen, wie die Schnittstelle Gestalt annimmt. Eine Artikelkarte oder eine Suchleiste. Seien Sie also vorsichtig, es kann Besonderheiten bei den Organisationen geben (natürlich ist es nicht sehr lustig, wenn es keine Ausnahmen gibt). In einigen Fällen kann eine Organisation aus anderen Organisationen bestehen.
In einigen Fällen werden Sie es mir sagen?
GIF – Kermit: Was?
Ich verstehe, wenn du wie Kermit reagierst, keine Panik, ich erkläre es dir. Nehmen wir zum Beispiel einen Strom von Artikeln, kann letzterer sowohl Artikel als auch Anzeigen enthalten, die daher selbst mehrere Moleküle zusammenfassen. Ich weiß, Ihr Gehirn rast, aber keine Sorge, das ist eine Ausnahme.
Illustration – Organisationen
Vorlagen
Und wenn wir die Organismen kombinieren … Es gibt uns Vorlagen. Tatsächlich sind sie die Matrix der Seite, weil sie eine Reihe von Organismen enthalten. Die Vorlage gibt an, wo die verschiedenen Organismen platziert sind, aber ihr Status hängt vom Kontext des Benutzers ab, das heißt, wo er sich auf den Schnittstellen befindet. Die Vorlage kann daher je nach Kontext variieren.
die Seiten
Hier sind wir. Die letzte Kategorie sind die Seiten, und sie stellen je nach Nutzungskontext eine Vorlage dar. Unser lieber Brad, spricht von „Vorlageninstanz“. Wir können sagen, dass sie einzigartig ist. Die Twitter-Startseite, auf Ihrem Smartphone, in der mobilen App, in der mobilen App nach Erhalt einer Benachrichtigung. Sie sehen, es ändert sich je nach Kontext.
Die Anwendung des Prinzips
Ich gebe es zu, ich sprach von Designern und Entwicklern. Aber es muss gesagt werden, dass wir heute in digitalen Projekten eine große Anzahl von Beteiligten haben: UX-Designer, UI-Designer, Product Owner, Produktmanager, Projektmanager, Entwickler ... Die Idee ist, dass Atomic Design für alle Projekte von Vorteil ist Stakeholder, weil sie diejenigen sind, die unser Designsystem verwenden werden.
Daher werden wir durch die Verwendung der Atomic Design-Methode unsere Schnittstellen standardisieren und Komponenten haben, die miteinander konsistent sind, und gleichzeitig ein gut aufgebautes Design-System haben.
Befolgen Sie diese 3 Schritte, die im Diagramm unten dargestellt sind, es sollte Ihnen helfen.
Illustration – Die 3 Schritte
1 – Bestandsaufnahme: Das Kennenlernen des Projekts ist wichtig. Tatsächlich können wir alle Komponenten beobachten und nach Typ sortieren. Texte, Symbole, Schaltflächen, Eingaben…
Dadurch erscheinen die 5 Hauptkategorien (Atome, Moleküle, Organismen, Vorlagen und Seiten).
2 – Standardisieren: 6 Größenstufen für Fließtext? Standardisieren! Schaltflächen mit unterschiedlichen Rändern? Standardisieren! Sie verstehen, Ihre Atome müssen alle einheitlich sein, um kohärente Moleküle zu haben und so weiter.
3 – Dokumentieren/Kommunizieren: Zögern Sie nicht, Ihre Bibliothek mit Kommentaren zu erweitern und die verschiedenen Nutzungsarten zu erläutern. Je mehr Sie Ihre Bibliothek dokumentieren, desto besser verstehen Projektbeteiligte. Benachrichtigen Sie auch über Änderungen (z. B. geänderte Komponenten) und informieren Sie die Beteiligten über die Schritte, die Sie im Designsystem unternehmen.
Meine letzten Worte: Atomic Design und Design System sind miteinander verbunden
Komplementarität. Tatsächlich haben wir es durch den Artikel gesehen. Das atomare Design und das Designsystem sind miteinander verknüpft. Indem wir Elemente und molekulare Modelle erstellen (und reproduzierbare, ich weiß, das sind viele „und“), beschleunigen wir unseren Designprozess. Wir beschleunigen nicht nur den Prozess, sondern machen ihn auch effizient und konsistent.
Wie Sie verstanden haben, müssen wir meiner Meinung nach (und es liegt natürlich an mir) unsere Schnittstellen mithilfe von Komponenten entwerfen, die an „lebendig“ und „skalierbar“ denken, und die Methode des Atomic Design hilft uns dabei, dies effektiv zu tun.
Sie sind also von Atomic Design überzeugt? Brad Frost hat ein sehr interessantes Buch zu diesem Prinzip veröffentlicht: Atomdesign – Brad Frost. Ich lade Sie ein, es zu lesen, wenn Sie mehr darüber erfahren möchten.
Von den Enden des Universums grüße ich dich!
GIF – Auf Wiedersehen
Housmane KOITA, UI-UX-Designer @UX-Republic
