Designer müssen komplizierte Benutzeroberflächen erstellen, die in einer Vielzahl von Bildschirmgrößen und Kontexten gut funktionieren. Dies hat die Art und Weise verändert, wie Designer an den Designprozess herangehen.
Atomic Design ist eine Technik zum Erstellen von Seiten, mit der erfolgreiche Benutzeroberflächen von Grund auf erstellt werden können. Diese Technik wurde von der Naturwissenschaft inspiriert — Atome sind die grundlegenden Bausteine aller Materie, und zwei oder mehr Atome verbinden sich zu Molekülen.
Anstatt Sammlungen von Webseiten zu entwickeln, beginnt Atomic Design mit den grundlegenden Benutzeroberflächenkomponenten, den sogenannten Atomen (Schaltflächen, Menüelemente usw.), und erstellt schrittweise die gesamte Benutzeroberfläche.
Atomic Design ist ein Ansatz für visuelle Identitätssysteme, der Atome, Moleküle, Kreaturen, Vorlagen und Seiten verwendet, um den gesamten Prozess der Erstellung visueller Systeme strukturierter zu unterteilen.
Ein Suchsymbol und ein Eingabefeld sind beispielsweise zwei verschiedene Atome. Setze sie zusammen, um ein Suchfeld zu bilden, und du hast ein Molekül. Sie haben gerade eine Vorlage erstellt, indem Sie Platzhalter für Blockinhalte unter dem Suchfeld eingefügt haben. Füllen Sie die Lücken mit Inhaltstext und Fotos aus, um eine ganze Seite zu erstellen.
Der Designer Brad Frost entwickelte den Atomic Design-Prozess, um Designer bei der Entwicklung wiederverwendbarer UI-Systeme zu unterstützen. Er arbeitet als Webdesigner, Redner, Autor und Berater. In seinem Buch „Atomic Design“ wird der Prozess zur Entwicklung und Aufrechterhaltung effektiver visueller Identitätssysteme vorgestellt.
Atomic Design beginnt, wie Wissenschaft, mit der kleinsten Instanz einer beliebigen Online-Seite:
1. Atome
Atome sind die kleinsten Bestandteile einer Webseiten-Seite. Atome sind grundlegende HTML-Komponenten, die die kleinsten Einheiten einer Webseite, wie Schaltflächen, Beschriftungen und Eingabefelder, in atomarem Design darstellen. Schriften, Farbpaletten und Animationen sind allesamt Atome.
2. Moleküle
Atome werden zu Molekülen zusammengefügt, die die zweitkleinste Gruppierung auf einer Webseite sind. Ein Blog-Abonnementfeld, das aus einer Feldbezeichnung, einem Eingabefeld und einer Schaltfläche besteht, ist ein Beispiel für ein Molekül.
3. Organismen
Organismen sind Ansammlungen von Molekülen, die zusammenkommen, um komplexere Organismen zu erzeugen. Der Organismus ist jede Designsequenz, die auf Internetseiten in Bezug auf die Benutzeroberfläche vorkommt.
Kopf- und Fußzeile einer Webseite bestehen aus zwei oder mehr Molekülen, was sie zu Kreaturen macht. Die Suchleiste ist ein Beispiel für ein Molekül, das zur Erstellung einer Header-Komponente verwendet werden kann.
4. Vorlagen
Im vierten Schritt der Atomtechnik nehmen Webseiten Gestalt an. Vorlagen sind Sammlungen von Kreaturen, die zusammenarbeiten, um die Struktur einer Seite aufzubauen.
Wenn wir uns eine Homepage ansehen, können wir die Header- und Footer-Organismen sehen, mit denen wir begonnen haben. Diese Arten bilden zusammen mit anderen die Homepage-Vorlage, wie in der Abbildung oben dargestellt.
Vorlagen sind nützlich, da sie garantieren, dass die Komponenten eines visuellen Identitätssystems ordnungsgemäß angezeigt werden und funktionieren. Atomic-Designvorlagen können als Grundgerüst einer Seite betrachtet werden.
5. Seiten
Nach den ersten vier Phasen haben Designer alle Teile, die sie benötigen, um Seiten für die Benutzeroberfläche einer Website zu erstellen.
Wenn die vorherigen vier Schritte erfolgreich durchgeführt wurden, können Designer im letzten Schritt Fotos, Text und andere Elemente hinzufügen, um ein Gefühl dafür zu bekommen, wie die Benutzeroberfläche aussehen wird.
Das endgültige Aussehen der Seiten bestimmt, ob die Website bereit ist, live zu gehen, oder ob der Entwickler zurückgehen und Anpassungen an früheren Designkomponenten vornehmen muss.
Der atomare Designprozess hilft dabei, eine kohärente Markenidentität auf möglichst gemeinsame und effiziente Weise zu schaffen.
Ja, alternative Methoden können verwendet werden, um ein visuelles Identitätssystem zu erstellen. Die Atomtechnik bedeutet jedoch keinen nennenswerten Arbeitsaufwand für die anderen internen Teams des Systems.
Ein Benutzeroberflächensystem ist ein visuelles Identitätssystem, das oft als Designsystem bezeichnet wird. Es ist nicht nur Aufgabe von Designern und Entwicklern, enger und auf gut dokumentierte Weise zusammenzuarbeiten; es ist auch Aufgabe der Teams, enger und auf gut dokumentierte Weise zusammenzuarbeiten.
Es bietet Designern und Entwicklern Zugriff auf visuelle Styleguides, Typografiesysteme, Farbsysteme, Tokens, Vorlagen, Komponentenbibliotheken mit dokumentierten und codierten Teilen, die wiederverwendet werden können, Designmuster, Sprach- und Tonrichtlinien und vieles mehr.
Das Konstruktionssystem, das aus der Atommethode hervorgeht, umfasst alle verwendeten Komponenten sowie die zugehörigen Codes. Sowohl Designer als auch Entwickler können von diesem Tool profitieren.
Es ist an und für sich effizient, große Projekte in Vorlagen, Organismen und Moleküle zu zerlegen. Atomic Design hilft dem Designer, sich auf kleine Details zu konzentrieren und gleichzeitig das Gesamtbild zu sehen — die Benutzeroberfläche der Webanwendung. Auf diese Weise können Designer vermeiden, dieselbe Komponente zweimal zu erstellen, was Zeit spart und eine Kultur der Wiederverwendbarkeit fördert.
Die atomare Methode bietet Entwicklern die Grenzen, die sie benötigen, um bestehende Komponenten korrekt zu implementieren.
Entwickler haben eine einheitliche Sprache und Struktur, da Designkomponenten einem Ansatz wie Atomic Design folgen.
Atomic Design ist auch für jeden Entwickler von Vorteil, der mit einem neuen Projekt beauftragt wurde. Entwicklungsteams können einfach zwischen den einzelnen Designkomponenten unterscheiden, da sie alle strukturiert sind und allen Mockups für neue Webseiten entsprechen sollten.
Atomic Design ist ein Prozess zur Erstellung skalierbarer, verständlicher und effizienter visueller Identitätssysteme. Am Ende des Tages entwickelt sich eine Kultur der Konsistenz, die vielen Websites heute fehlt, wenn man eine Quelle der Wahrheit für alle kreativen Bemühungen für neue Webseiten hat.
Mehrere UX/UI-Designer im Team von SnapStack sind bestrebt, die besten Lösungen anzubieten. Bitte kontaktieren Sie uns unter contact@snapstack.cz oder über unsere sozialen Medien, wenn Sie solche Materialien benötigen.
Hab einen wunderbaren Rest deiner Woche.
Ohne eine klare Roadmap, die Ihren Bemühungen Gestalt verleiht, können Sie die Herausforderungen der digitalen Transformation, mit denen Sie garantiert irgendwann konfrontiert werden, nicht bewältigen. Es ist keine Überraschung, dass mehr als ein Drittel der Führungskräfte der Meinung sind, dass eine mangelnde Strategie für die digitale Transformation Unternehmen daran hindert, ihr volles digitales Potenzial auszuschöpfen. Es ist offensichtlich, was Sie tun müssen, aber Sie wissen möglicherweise nicht, wie Sie eine Strategie für die digitale Transformation entwickeln können.
Read More
Als Softwareingenieur ist es wichtig, dass Sie über Updates aus der Softwarebranche auf dem Laufenden bleiben. In diesem Beitrag werden wir 8 neue Entwicklungen besprechen, die die Softwarebranche im Jahr 2022 erleben wird. Hallo an Sie alle! Ich bin Jordan von SnapStack Solutions, und wie jede Woche werde ich mit Ihnen abhängen und über die wichtigsten Themen der IT-Branche sprechen.
Read More
Die Anwendungen des IoT sind weitreichend und verändern verschiedene Branchen, und der Einzelhandel ist da keine Ausnahme. Die Integration von IoT in den Einzelhandel schafft ein dynamisches Ökosystem, in dem sowohl Einzelhändler als auch Verbraucher davon profitieren. Diese Innovationen gehen über Verbesserungen auf oberflächlicher Ebene hinaus — sie verändern die Art und Weise, wie Geschäfte funktionieren, grundlegend. Ganz gleich, ob Sie ein Einzelhandelsmanager, ein aufstrebender Unternehmer oder einfach nur neugierig auf technologische Trends sind, wenn Sie die Auswirkungen des IoT auf den Einzelhandel verstehen, können Sie wertvolle Einblicke in die Zukunft des Einkaufens gewinnen.
Read More
