Atomic Design: Aufblasen, was Sie über Webdesign zu wissen glaubten

Es ist ein weit verbreiteter Glaube, dass Flexibilität gleichbedeutend ist mit Hemmung, dass man auch ungezügelt sein muss, um kreativ zu sein. Um jedoch ein Projekt abzuschließen, insbesondere eines, das so kompliziert wie Webdesign ist, kann Ihnen das Erstellen einer Struktur tatsächlich mehr Flexibilität geben. Sie brauchen einen Rahmen – der ist nicht verhandelbar. Wenn Sie Ihre künstlerischen, kreativen Muskeln spielen lassen, wo Sie wirklich die Freiheit haben, werden Sie Designs erhalten, die ebenso inspiriert wie funktional und realistisch sind. Atomic Design ist ein sinnvoller, methodischer Ansatz für das Webdesign, der Ihnen dennoch die Möglichkeit gibt, innerhalb des Frameworks zu experimentieren.

Designsysteme

Designer erstellen nicht mehr einfach Webseiten; sie schaffen Designsysteme. Designsysteme umfassen:

• Farbe
• Gitter
• Textur
• Typografie
• Usw.

Ich finde es toll, wie Jack Strachan von UX Planet Designsysteme beschreibt: „Kurz gesagt, ein Designsystem ist eine Sammlung wiederverwendbarer Komponenten, die von klaren Standards geleitet werden und zu einer beliebigen Anzahl von Anwendungen zusammengebaut werden können. Designsysteme sind eine Methode, um ein konsistentes Erlebnis und eine einheitliche visuelle Sprache auf ein Produkt zu übertragen, wenn an verschiedenen Berührungspunkten gearbeitet wird.“

Designelemente können subjektiv sein, und sie können schnell überwältigend und chaotisch werden. Um sie zu kategorisieren, muss Design methodischer betrachtet werden. Das hat Webdesigner Brad Frost getan.

Die Geburt des Atomdesigns

So kam Brad auf das Atomdesign: „Auf der Suche nach Inspiration und Parallelen bin ich immer wieder zur Chemie zurückgekehrt. Der Gedanke ist, dass alle Materie (ob fest, flüssig, gasförmig, einfach, komplex usw.) aus Atomen besteht. Diese atomaren Einheiten verbinden sich zu Molekülen, die sich wiederum zu komplexeren Organismen verbinden, um letztendlich die gesamte Materie in unserem Universum zu erschaffen.“

Er erklärt weiter, dass Schnittstellen aus Komponenten bestehen, die sich in Bausteine ​​kategorisieren lassen. Hier ist die Reihenfolge vom kleinsten zum größten:

• Atome
• Moleküle
• Organismen
• Vorlagen
• Seiten

Quelle: BradFrost.com

Die Bausteine ​​des Atomic Designs

Der Hauptvorteil des atomaren Designs besteht darin, dass es Konsistenz fördert. Viele der von Ihnen erstellten Elemente können einfach repliziert, wiederverwendet oder skaliert werden. Und um den Überblick zu behalten, können Designer sich eine Bibliothek erstellen, in der sie alle ihre Elemente und Stile an einem Ort sehen können. Es gibt auch etwas Raum für Anpassungen, aber nur, wenn die Bausteine ​​komplexer und umfangreicher werden. Kommen wir zu den fünf Bausteinen:

1. Atome

So wie Atome in der natürlichen Welt wichtig sind, sind HTML-Tags für Webschnittstellen wichtig. Bedeutung: Alle Webinterfaces beginnen mit HTML-Tags oder grundlegenden Elementen (Animationen, Schaltflächen, Farbpaletten, Schriftarten, Formularbeschriftungen usw.). Obwohl diese Atome für das Webdesign alleine nicht von Vorteil sind, werden sie zum Erstellen der Webschnittstelle benötigt.

2. Moleküle

Moleküle sind komplexer als Atome, aber insgesamt sind sie nicht komplex. Wenn Sie weniger nützliche Atome gruppieren, haben Sie nützlichere Moleküle: Suchformularbezeichnung + Eingabe + Schaltfläche (Atome) = ausgefülltes Suchformular (Molekül)

3. Organismen

Wenn Sie Moleküle gruppieren, erhalten Sie Organismen, die komplexer sind als ihre Vorgänger: Logo + Navigation + Suchformular + Social-Media-Symbole (Moleküle) = ausgefülltes Impressum (Organismus)

Im Idealfall können Sie Organismen auf der Website oder auf verschiedenen Websites wiederverwenden, das allgemeine Layout beibehalten und es mit verschiedenen Texten und Bildern anpassen. Sie können beispielsweise auf allen von Ihnen gestalteten Websites dieselbe Art von Masthead verwenden oder einen produktspezifischen Organismus (Bild + Titel + Preis) erstellen, den Sie auf der Produktseite wiederholen.

Dies ist der Zeitpunkt, an dem sich die Weboberfläche auf einzigartige und maßgeschneiderte Weise entwickelt. Bisher ist Ihre Benutzeroberfläche nur eine Sammlung einfacher Elemente. Während der Organismenphase wird die Website visueller.

Wenn Sie Ihren Prozess mit einem Kunden teilen würden, wäre dies der Teil, in dem er sagte: "Oh, ich verstehe." Dies ist die Zeit, um mit dem Wireframing zu beginnen oder Mockups zusammenzustellen, damit der Kunde Ihnen Feedback geben kann, bevor Sie weitermachen.

4. Vorlagen

Wenn Sie Organismen gruppieren, haben Sie Vorlagen. Hier kommt das eigentliche Seitenlayout zusammen. Während Moleküle und Organismen ihre eigenen internen Layouts haben, beginnt man in der Template-Phase zu sehen, wie sie sich ergänzen und miteinander interagieren. wo sie zueinander stehen; und wie sie insgesamt fließen. Die Vorlage gibt den Molekülen und Organismen den Kontext. Beachten Sie, dass Vorlagen Platzhalterinhalte enthalten, keine benutzerdefinierten oder ursprünglichen Inhalte.

Quelle: BradFrost.com

5. Seiten

Seiten bringen Vorlagen auf die nächste Ebene, indem sie den Platzhalterinhalt durch tatsächlichen Inhalt ersetzen. Es wird wahrscheinlich nicht der endgültige Inhalt sein, aber er wird repräsentativer für das endgültige Design und den endgültigen Inhalt sein. Das Hinzufügen hochwertiger, permanenter Inhalte an dieser Stelle könnte eine Verschwendung sein, da die Website noch getestet, überprüft und optimiert werden muss. Das heißt, es ist möglich , dass Sie in der finalisierten Inhalt stecken wird - es hängt davon ab , wo Sie in diesem Prozess sind.

Dies ist die Phase, in der die Website am meisten geprüft wird. Abhängig von den Bewertungen und Rückmeldungen, die Sie erhalten, müssen möglicherweise Moleküle, Organismen und Vorlagen geändert werden. Dies ist auch ein guter Zeitpunkt, um Designvariationen zu testen.

Abschließende Gedanken

Die Sache mit atomarem Design ist, dass es nicht neu ist – die Redewendung ist, aber die Theorie ist es nicht. So werden Webseiten schon lange gestaltet. In Begriffen des atomaren Designs zu sprechen, macht Sie nicht automatisch zu einem großartigen Designer oder Entwickler; Es ist kein Ersatz für solide Arbeit.

Ein Vorteil, wenn man auf diese Weise darüber spricht und diese Art von Terminologie verwendet, um die Methodik zu verdeutlichen, ist, dass es für Nicht-Entwickler leichter zu verstehen ist – Sie können Ihren Kunden Ihren Prozess erklären. Und für den organisierten Entwickler ist es eine Möglichkeit, Designs aufzuteilen. Sie können einen Drilldown in eine Komponente oder eine kleine Gruppe von Elementen durchführen, die nicht funktionieren. Es kann dir helfen, den Wald vor lauter Bäumen zu sehen, anstatt zu sagen: "Das Ganze ist fehlerhaft."

Atomic Design ermöglicht es Ihnen, der Kreativität freien Lauf zu lassen, ohne sich darin zu verlieren. Es kombiniert grundlegende Elemente und Designsysteme so, dass Sie schneller mit einem Projekt beginnen können, sodass Sie Ihre Zeit dort verbringen können, wo Ihre Kunstfertigkeit und Fähigkeiten am meisten gebraucht werden – komplizierte Anpassungen vornehmen, Probleme lösen, Kundenbedürfnisse erfüllen und letztendlich eine Website erstellen, die funktioniert jenseits der Norm.

Behalten Sie diese Dynamik im Webdesign bei und lesen Sie 10 Regeln für gutes UI-Design, die Sie bei jedem Webdesign-Projekt befolgen sollten.

Ausgewähltes Bild über ShadeDesign / shutterstock.com