Atomic Design: 10 Gründe, warum Sie es verwenden sollten
Sie haben wahrscheinlich schon von Atomic Design gehört, wenn Sie eine Weile in der Front-End-Entwickler-Community waren. Atomic Design ist eine von der Chemie inspirierte Methode. So wie alle Materie aus Atomen besteht, die sich zu Molekülen verbinden, die wiederum komplexere Organismen bilden, besteht Atomic Design darin, eine Website in ihre Grundkomponenten zu zerlegen und von dort aus eine Website zu erstellen.
Die Verwendung von Atomic Design bietet viele Vorteile. Lesen Sie weiter und entdecken Sie 10 Gründe, warum es Ihnen das Leben leichter macht.
Wenn Sie allgemeine Ratschläge zum Erstellen von Websites wünschen, lesen Sie unseren Beitrag zum Erstellen der perfekten Website Website-Layout und unser Favorit Website-Ersteller .
01. Sie können Komponenten mischen und anpassen
Durch die Zerlegung von Komponenten in grundlegende Atome ist leicht zu erkennen, welche Teile der Stelle wiederverwendet werden können und wie sie gemischt und aufeinander abgestimmt werden können, um andere Moleküle und sogar Organismen zu bilden.
Angenommen, eine Site enthält nur fünf Atome: ein kleines Bild, ein großes Bild, einen Absatz, ein Listenelement und einen Link. Sie können eine sehr benutzerfreundliche Webseite erstellen, indem Sie diese Atome duplizieren und zu Molekülen kombinieren.
02. Das Erstellen eines Style Guides ist einfach
Wenn eine Site von Anfang an nach den Prinzipien des Atomic Design erstellt wird, können alle Atome und Moleküle, die vor der Erstellung der Site erstellt wurden, als grundlegende Stilrichtlinien dienen. Selbst für Websites, die nicht atomar erstellt wurden, ist es nicht schwierig, die Basiskomponenten zu extrapolieren und sie zusammenzusetzen, um mehr Seiten zu erstellen. Beachten Sie jedoch, dass es immer am besten ist, eine Site von Anfang an atomar zu erstellen, anstatt später zu versuchen, Atomic Design-Prinzipien in eine Site einzuführen.
03. Leicht verständliches Layout
Der Code einer atomar gestalteten Website ist in der Regel viel einfacher zu lesen als einer, der auf traditionellere Weise erstellt wurde. Dies gilt nicht nur während der Erstellungszeit, sondern auch in der Zukunft, wenn auf eine Site als Referenz oder für kleine Änderungen zurückgegriffen wird.
Aufgrund der Dokumentation darüber, welche Atome Moleküle und Organismen wo verwendet werden, ist es leicht zu erkennen, was jeder Teil des Codes darstellt. Ein weiterer Vorteil ist, dass es einfacher ist, einem neuen Entwickler die Codebasis zu erklären.
04. Code ist konsistenter
Mit Atomic Design verwenden Sie vordefinierte Atome, um das Site-Layout zu erstellen. Es ist leicht zu erkennen, welche Komponenten für verschiedene Teile der Site verwendet werden. Dies verringert die Wahrscheinlichkeit, doppelten Code zu schreiben.
Wenn beispielsweise jemand eine Site ohne Verwendung von Atomic Design erstellt und beispielsweise eine rote Schaltfläche benötigt, muss er die gesamte Site durchsuchen, um eine vorhandene Site zu finden. Wenn dies vorhanden wäre, müssten sie diesen Code kopieren und in die neue Instanz einfügen. Wenn es keine roten Knöpfe gäbe, müssten sie einen neuen erstellen. Mit Atomic Design ist es jedoch einfach, die Liste der Atome durchzugehen und genau diesen roten Knopf zu finden.
Dies wird ein viel einfacherer Prozess, wenn die Pattern Lab-Bibliothek beteiligt ist. Musterlabor ist eine Sammlung von Tools, die Atomic Design einfacher machen. In unserem Beispiel würde es eine Suchleiste für Atome bereitstellen, die es einfach macht, genau diesen roten Knopf zu suchen und zu finden.
05. Kein Fokus auf pixelgenaue Designs
Da die Idee hinter Atomic Design darin besteht, Atome als Bausteine für die Site-Erstellung zu verwenden, ist es weniger wahrscheinlich, dass ein Webentwickler viele Atome für eine ähnliche Sache erstellt. Stattdessen können sie einfach die Liste der vorhandenen Atome durchsehen und sie optimieren, um bei Bedarf neue Atome zu erstellen.
Ein gutes Beispiel hierfür wären Titel auf einer Site. Angenommen, ein Ersteller verfügt über eine Liste der für die Site verwendeten Titel, alle in Schwarz: eine Hauptüberschrift, eine Unterüberschrift und einen Absatztitel. Sie haben eine Weile nicht mehr auf der Site gearbeitet und müssen zur Site zurückkehren, um einen neuen blauen Titel hinzuzufügen. Sie könnten sich die bereits vorhandenen Titel ansehen und einen davon anpassen, um das gewünschte Ergebnis zu erzielen.
06. Schnelleres Prototyping
Wenn Sie vor Beginn der Site-Erstellung eine Liste mit Atomen haben, können Sie Seiten schnell und einfach nachbilden. Sie müssen lediglich die erforderlichen Elemente für die Seite auswählen und kombinieren. Das Modell kann dann angepasst und für die endgültige Site verfeinert werden.
07. Einfachere Aktualisierung und Entfernung von Teilen der Website
Da jeweils nur ein Atom, Molekül oder Organismus geändert wird, kann auf einfache Weise sichergestellt werden, dass Aktualisierungen einer Komponente auf alle anderen Instanzen auf der Website übertragen werden. Ebenso können unerwünschte Komponenten leicht entfernt werden.
08. Modularere Dateistruktur
Obwohl Atomic Design in Bezug auf Markup (HTML) sehr verbreitet ist, können diese Techniken meines Erachtens auch für CSS, JavaScript oder andere Sprachen verwendet werden, die zum Erstellen einer Site verwendet werden, um den Gesamtcode modularer und wiederverwendbarer zu machen.
Ich selbst verwende atomares CSS für von mir erstellte Websites und habe große Vorteile für diesen Ansatz gefunden. Ich glaube jedoch, dass es mit dem Eintreffen von Dingen wie HTML-Komponenten sinnvoll wäre, CSS und JavaScript, die für ein Atom spezifisch sind, zusammen mit HTML in einen eigenen Ordner zu trennen. Wenn also etwas aktualisiert oder gelöscht werden muss, wissen Sie genau, wohin und was Sie gehen müssen wechseln.
09. Insgesamt weniger Komponenten
Wenn einem Schöpfer vor Beginn der Site-Erstellung eine Liste von Atomen, Molekülen und Organismen präsentiert wird, verwendet er eher das, was bereits vorhanden ist, als neue Komponenten für kleine Variationen zu erstellen.
Wenn für ein Design ein Titel mit einer Schriftgröße von 4,5 em erforderlich ist, jedoch bereits ein Titel in 4em-Größe aus der Liste der Atome vorhanden ist, wählt ein Ersteller mit größerer Wahrscheinlichkeit den 4em-Titel aus, als einen vollständig neuen Titel zu erstellen. Dies führt dazu, dass insgesamt weniger Atome verwendet werden, was zu einer saubereren und schlankeren Website führt.
10. Erkunden Sie Pattern Lab
Dies ist nicht wirklich ein Vorteil von Atomic Design, sondern ein großartiges Tool von Brad Frost (der den Begriff Atomic Design geprägt hat) und Dave Olsen um mit dem Prozess zu helfen. Es handelt sich im Wesentlichen um einen statischen Site-Generator, der Schnurrbart für Vorlagen und einen JavaScript-Viewer für Interaktivität verwendet. Es wurde unter Berücksichtigung des Mobile-First-Designs erstellt und bietet Optionen zum Ändern der Seitengröße, Hinzufügen von Kommentaren zu Abschnitten der Website und Codeausschnitten.
Die Originalversion ist in PHP geschrieben, es gibt jedoch zwei Node-Versionen: eine für gulp und die andere für Grunt. Ich empfehle dringend, mit der Demo auf der Website herumzuspielen Musterlabor Website, um Ihnen ein besseres Verständnis der Funktionsweise und des Atomic Design im Allgemeinen zu geben.
Möchten Sie mehr wissen? Lesen Sie Brad Frosts Originalbeitrag über Atomic Design .
Zum Thema passende Artikel:
