Frontend development has long been the cuckoo’s nest of the Internet community. Neither mother design nor father development really knew how best to deal with this scion, who needed its own language and rules. The main point of contention in education is “Does technology determine design or design determine technology?”
Die Lösung des Problems liegt, wie so oft, in einem Wechsel der Perspektive: Brad Frost hat sich darauf spezialisiert, im Spannungsfeld zwischen Design und Backend-Entwicklung zu vermitteln. Der Webdesigner aus Pittsburgh ist Mitbegründer der Software Patternlab und ideologischer Vater des Atomic Design, mit dem Frost eine neue Art der Web-Entwicklung in der Multi-Device Landschaft des Web 2.0 etablieren möchte.
Der Kern der Methode Atomic Design besteht darin, ein Webprodukt nicht als Ansammlung einzelner Seiten, sondern als Design-System zu verstehen. Hierzu empfiehlt Frost, jedes Interface in seine kleinsten Bestandteile aufzuspalten. Bei dieser Formulierung schwingen nicht zufällig Assoziationen aus der Chemie mit. Genau hierher nimmt Frost die Analogie seiner Methode.
Die kleinste Einheit, die Atome, sind schlichte HTML Tags, wie beispielsweise ein Eingabefeld oder ein Button, eine Schriftgröße oder eine Farbe. Sie sind jeweils an nur einer Stelle veränderbar und können dadurch vielfältig miteinander kombiniert werden. Die Verbindung mehrerer Atome bildet ein Molekül. Die Verbindung aus unserem Button-Atom und dem Eingabefeld-Atom ergibt so zum Beispiel ein simples Formular. Durch die Kombination diverser Moleküle entsteht ein Organismus, der über ein wesentlich komplexeres Interface verfügt. Eine Ebene höher stehen die Templates, die mit konkreten Inhalten gefüllt und so zu vollständige Seiten transformiert werden können.
Das Atomic Design bildet die Grundlage, auf der alle Beteiligten die Sprache und die Regeln unseres metaphorischen Kuckuckskinds, der Frontend-Entwicklung, verstehen können. Dies beginnt schon in der Konzeptphase und zieht sich über Design, Frontend- und Backend-Entwicklung durch den gesamten Prozess. Der Ansatz ermöglicht so einerseits strukturelle Vorteile, die den Workflow erleichtern können: Begrifflichkeiten werden abteilungsübergreifend vereinheitlicht, bereits designte Komponenten können wiederverwendet werden und paralleles Arbeiten wird enorm erleichtert. Andererseits werden die Gesamtwirkung und die Pflegbarkeit des Produkts verbessert. Die Wiederverwertbarkeit der Atome, Moleküle und Co ermöglicht es, einen einheitlichen Stil selbst dann einzuhalten, wenn ein Projekt mal über diverse Schreibtische wandert. So werden ein einheitliches Aussehen sowie eine konsistente Code-Basis geschaffen, die von Designänderungen, personellen Übergaben und parallelem Arbeiten unberührt bleiben. Das alles wirkt sich maßgeblich auf die Effizienz eines Projekts aus!
The solution to the problem lies, as so often, in a change of perspective: Brad Frost specialises in mediating between design and backend development. The web designer from Pittsburgh is co-founder of the Patternlab software and ideological father of Atomic Design, with which Frost wants to establish a new method of web development in the multi-device landscape of Web 2.0.
The core of the Atomic Design method is to understand a web product not as a collection of individual pages, but as a design system. For this purpose, Frost recommends splitting each interface into its smallest components. This formulation does not coincidentally resonate with associations from chemistry. This is exactly where Frost takes the analogy of his method.
The smallest unit, the atoms, are simple HTML tags, such as an input field or a button, a font size, or a colour. They can only be changed in one place at a time and can, therefore, be combined in many ways. The combination of several atoms forms a molecule. For example, the combination of our button atom and the input field atom results in a simple form. The combination of various molecules creates an organism with a much more complex interface. One level higher are the templates, which can be filled with concrete content and thus transformed into complete pages.
The Atomic Design forms the basis on which all participants can understand the language and rules of our metaphorical cuckoo’s nest, front-end development. This begins in the concept phase and continues through design, front-end and back-end development throughout the entire process. On the one hand, this approach provides structural advantages that can facilitate the workflow: terms are standardised across departments, components that have already been designed can be reused, and parallel work is made much easier. On the other hand, the overall effect and maintainability of the product are improved. The reusability of atoms, molecules and co. makes it possible to maintain a uniform style, even if a project moves across different desks. This creates a uniform look and a consistent code base that is unaffected by design changes, personnel transfers, and parallel work. All this has a significant impact on the efficiency of a project!
Grundvoraussetzungen sind eine sorgfältige Dokumentation und Sortierung der einzelnen Design-Atome sowie zeitgemäße Tools wie Sketch, Zeplin und Invision, die es im Gegensatz zum Bildbearbeitungs-Tool Photoshop unterstützen, Webseiten unabhängig vom Ausspielmedium zu planen und umzusetzen.
Bei Tallence nutzen wir das Tool Patternlab zur Pflege einer Pattern-Library. Diese räumt uns im statischen Frontend viele Vorteile ein:
- Schnelle Orientierung: Die übersichtliche Pattern Library ermöglicht neuen Kollegen, unverzüglich in ein Projekt einzusteigen. Bestehende Teammitglieder können beendete Projekte leicht rekapitulieren. Stakeholder, Redakteure und Entwickler erhalten einen schnellen Überblick über Bestehendes.
- Keine Code-Dubletten: In der Pattern Library kommt jede Komponente nur einmal vor. Gleiche Komponenten mit nur geringfügig anderer Ausprägung werden gelöscht, um zusätzlichen Code zu vermeiden.
- Weniger Einarbeitung: DasHTML kann modular behandelt werden, ohne dass sich Frontend-Entwickler mit Backend-Template-Technologien (JSP, Freemarker etc.) für etwaige CMS auseinandersetzen müssen.
- Mehr Konsistenz: Durch das Wiederverwenden derselben Module wird der Styleguide mühelos eingehalten, auch dann, wenn mehrere Entwickler übergreifend am Projekt arbeiten. Abweichungen vom Konzept können auch in späteren Phasen schnell festgestellt und behoben werden.
- Einfache Skalierbarkeit: Das System lässt sich strukturiert um neue „Atome“ erweitern. Komponenten können nachträglich in der Pattern-Library erstellt, gewartet und getestet werden.
Bei Tallence ist Atomic Design unerlässlich geworden. Im Teamwork gibt es uns die beruhigende Sicherheit, schnell und effizient zu arbeiten, indem neue Teammitglieder gedanklich schneller ins Projekt einsteigen können, Komponenten nicht unnötig mehrfach erstellt werden und das Arbeiten im Frontend alles in allem ungemein vereinfacht wird. Zwar bedeutet die Erstellung und Planung einzelner Atome anfangs einen größeren Zeitaufwand. Das Baukastenprinzip ermöglicht es jedoch, die Atome im Prozess schnell und einfach zusammenzusetzen, wodurch die Zeit um ein Vielfaches reingeholt wird.
Für uns ist Atomic Design daher die konstruktivste Methode, Spaghetti-Code und Code-Dubletten zu vermeiden.
The basic requirements are a careful documentation and sorting of the individual design atoms as well as contemporary tools such as Sketch, Zeplin and Invision, which, in contrast to the image editing tool Photoshop, support the planning and implementation of websites independent of the output medium.
At TALLENCE we use the Patternlab tool to maintain a pattern library. This gives us many advantages in the static frontend:
- Quick orientation: the clearly arranged pattern library enables new colleagues to immediately get into a project. Existing team members can easily recapitulate completed projects. Stakeholders, editors, and developers get a quick overview of what’s going on.
- No code duplicates: in the Pattern Library, each component occurs only once. Identical components with only slightly different characteristics are deleted to avoid additional code.
- Less training: the HTML can be handled modularly without frontend developers having to deal with backend template technologies (JSP, Freemarker, etc.) for any CMS.
- More consistency: by reusing the same modules, the style guide is easily adhered to, even if several developers are working on the project across different departments. Deviations from the concept can also be quickly identified and corrected in later phases.
- Easy scalability: the system can be expanded in a structured way by new “atoms”. Components can be subsequently created, maintained, and tested in the pattern library.
With Tallence AG, Atomic Design has become essential. In teamwork it gives us the reassuring certainty of working quickly and efficiently, as new team members can mentally get into the project more quickly, components are not unnecessarily created multiple times, and working in the frontend is all in all incredibly simplified. The creation and planning of individual atoms initially requires a lot of time. However, the modular principle makes it possible to quickly and easily assemble the atoms within the process, which saves time many times over.
For us, Atomic Design is therefore the most constructive way to avoid spaghetti code and code duplication.