Verwenden von Atomic Design in der modernen Webentwicklung
Wenn es etwas gibt, was ich gelernt habe, für ein Tech-Unternehmen zu arbeiten, ist es, dass eine Vielzahl von verschiedenen Talenten und Elementen zusammenkommen und in Harmonie arbeiten müssen, um eine Website zu erstellen - eine wirklich erstaunliche, schöne und funktionierende Website. Manchmal kann es sich anfühlen, als würde man am Turm von Babel arbeiten: Eine Person durchsucht eine Palette von Hex-Codes, die Jungs auf der anderen Seite rattern an einer Alphabet-Suppe mit verschiedenen Kodierungs-Akronymen, und der Account-Manager steht neben mir am Telefon Erklären, wie man ein Content-Management-System für einen Kunden verwendet, während ich versuche, diesen Artikel in einfachem Englisch zu schreiben.
All diese Elemente brauchen eine Möglichkeit, zusammenzukommen, ohne dass etwas in der Kakophonie verloren geht, und es gibt ein relativ neues Konzept, das uns wirklich geholfen hat, als Team besser zu funktionieren: Designer, Entwickler, Tester ... alle.
Es heißt Atomdesign .
Was ist Atomdesign?
Die Komponenten von Atomic Design wurden vom Designer abgeleitet Brad Frost Faszination für Chemie; Atome sind die kleinste Einheit, sie verbinden sich zu Molekülen, die wiederum komplexere Organismen bilden und schließlich alle Materie im Universum erschaffen.
Also, wenn wir in der Internationalen Raumstation sind und das ganze Projekt als Ganzes betrachten, hier ist die fertige Homepage-Kunst für ein Projekt, bei dem wir Atomic Design angewendet haben, Route 93 Pizza Mühle :
Die Homepage von Route 93 Pizza besteht aus allen unseren Elementen als einheitliche, funktionale Website. Wenn wir die Stelle nun unter ein Mikroskop stellen, können wir ihre granularen Komponenten sehen:
Atome: Unten sind die Atome für die Website der Route 93 Pizza Mill. Die Atome sind die Grundbausteine wie Tags, Formularbezeichnungen, Schaltflächen, Farbpalette und Schriftarten. Obwohl Atome alleine nicht sehr nützlich sind, sind sie dein vorläufiger Bezugspunkt - die Anfänge deiner Schöpfung.
Moleküle: Moleküle sind dort, wo Atome zum Einsatz kommen - wo sich das fertige Website-Design spürbar anfühlt. In den Molekülen für Route 93 sehen Sie die Farbpalette, Schriftarten und Ikonografie in Formfeldern, Bildüberlagerungen und Schaltflächen. Sie sind, wie Frost es ausdrückt, Ihr Werkzeug, "eine Sache zu tun und es gut zu machen".
Organismen: Wenn wir zu Organismen kommen, können wir die gesamte Fußzeile für die Route 93 erstellen. Sie kombiniert alle oben genannten Komponenten zu einer funktionierenden, ästhetischen Website.
Das Schnittstellen-Inventar: Jetzt, wo wir alle Zutaten haben, brauchen wir ein greifbares Menü, auf dem wir sie zu etwas Bekömmlichem zusammenstellen können; ein Dokument, das alle oben genannten Elemente als eine lesbare, verwendbare Ressource enthält - ein Schnittstelleninventar.
Während einige Organisationen dies als Pattern Library oder Style Guide bezeichnen und Interface Inventory verwenden, um sich auf ein Audit zu beziehen, das sie auf einer bestehenden Website durchgeführt haben, verwenden wir den Begriff Interface Inventory für unsere eigenen Projekte (sowie für Audits anderer Sites) Teil eines kontinuierlichen Evaluierungsprozesses.
Da der Arbeitsablauf von Atomic Design ein Dilemma nach Art eines Huhns oder Eies nachahmt, nimmt das Interface-Inventar nach der Erstellung der Homepage und einer anderen Seite der Website normalerweise eine gewisse organische Form an, aber nicht allzu lange danach. Wenn diese beiden ersten Seiten Gestalt annehmen, stellt der Designer sicher, dass die Elemente auf beiden konsistent sind. Für alle nachfolgenden Seiten haben sie dann die Möglichkeit, aus dem Inventar zu ziehen. Dies erzeugt eine kanonische Quelle dafür, wie visuelle Stile im gesamten Projekt angewendet werden sollen, eine literale gemeinsame Sprache, in einfachem Englisch, von Hex-Codes, Schaltflächenstilen, Auffüllbreiten usw., auf die sich Entwickler und das gesamte Team beziehen können.
Indem wir ein Interface Inventory mit dem Atomic Design-Prozess entwerfen, können wir mit primitiven Modulen beginnen und sie zu fertigen Elementen zusammensetzen. Dieser Prozess verbessert die Effizienz, die Kommunikation zwischen Teammitgliedern und erzeugt insgesamt eine schönere Website.
Was Atomic Design für uns tut
Atomic Design hilft uns, solide "Wahrheiten" über das Design des Projekts, an dem wir arbeiten, zu entdecken, und schafft ein gemeinsames Vokabular zwischen seinen künstlerischen und technischen Aspekten. Es fördert insgesamt ein robusteres System, das UX verbessert, und bietet eine Methodik, mit der Entwickler die komponentenbasierten Richtlinien der Entwickler einhalten und gleichzeitig die Kreativität beibehalten können.
Natürlich programmieren Entwickler von Grund auf, während der Ansatz eines Künstlers üblicherweise in einer nebulöseren Form beginnt, die sich nach einer Formgebung zu einer funktionalen Webseite verfestigt. Atomic Design ermutigt - und fordert von den Entwicklern, auch von Grund auf zu arbeiten, um alle Komponenten der Schnittstelle auf möglichst niedrigem Niveau konsistent und zielgerichtet zu machen.
Die Etablierung dieser gemeinsamen Sprache, repräsentiert durch das Interface Inventory, stellt sicher, dass Designer und Entwickler keine neuen Lösungen für bereits gelöste Probleme entwickeln. Wenn zum Beispiel ein neues Kontaktformular zu einem Projekt hinzugefügt wird, sind die zum Erstellen dieses Formulars erforderlichen Stile bereits vorhanden und können problemlos zum Erstellen der Seite verwendet werden, da es für den Designer als unnötig erachtet wird, zusätzlichen Aufwand zu erzeugen. Es nimmt dem Designer nicht unbedingt die Arbeit ab, sondern erleichtert Entwicklern das schnelle Erstellen von Lösungen, anstatt dass der Designer zuerst jede Seite oder jeden Organismus nachbilden muss. Die Rolle des Designers wird dann nach der Erstellung der Seiten in eine eher künstlerische Richtung verlagert. Diese greifbaren "Wahrheiten" beseitigen auch die Notwendigkeit, den Designer als Schiedsrichter zu verwenden. Fragen wie "Ist diese Designwahl beabsichtigt?" Oder "Welche Farbe sollten wir für dieses spezielle Element verwenden?" Sowie Änderungen oder Ergänzungen in letzter Minute auf einer Seite werden vom Interface Inventory beantwortet.
Die gemeinsame Sprache setzt sich auch in der Qualitätssicherung fort. Wenn ich eine Webseite sowohl auf Inhalt als auch auf Funktionalität überprüfe, ziehe ich das Interface-Inventar als Anleitung auf meinen Bildschirm. Obwohl es sich in erster Linie um ein Designerwerkzeug und zweitens um ein Entwicklertool handelt, ermöglicht es jedem im Team, sich vertrauensvoll an Gesprächen über Design und Konsistenz zu beteiligen, da wir sicherstellen, dass unsere Websites einwandfrei sind und dem Kunden übergeben werden können.
Fazit
Um die ordnungsgemäße Durchführung eines Projekts, insbesondere einiger der größeren, die wir oft in Angriff nehmen, sicherzustellen, ist Kommunikation der Schlüssel; Wenn Sie eine Reihe verschiedener Ideen im Raum herumschreien, wird nichts Machbares jemals daraus entstehen. Atomic Design hilft, als Übersetzer für diese verschiedenen Abteilungen und die "Sprachen", die mit ihnen zusammenhängen, um Konsistenz im Design zu halten. Es stellt eine modulare Ressource für das Team dar, die Kohärenz ermöglicht und zu einem effizienten Turnaround, weniger Fehlern und einem ausgefeilteren Endprodukt führt.