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.
Technologie entwickelt sich rasend schnell, und um heute die Nase vorn zu haben, müssen Sie nicht nur über die neuesten Geräte oder Software verfügen — es geht auch darum, die Struktur Ihres Unternehmens zu verändern.
Read More
In der heutigen Wettbewerbslandschaft hat die weltweit steigende Nachfrage nach Technologieexperten die Rekrutierung der richtigen Talente schwieriger denn je gemacht. Qualifizierte Fachkräfte zu finden, die den individuellen Bedürfnissen eines Unternehmens entsprechen, fühlt sich oft wie ein harter Kampf an. Wie können Unternehmen diese Herausforderungen also bewältigen, ohne Verluste oder Verzögerungen zu erleiden?
Read More
Hallo zusammen! Jordan von SnapStack Solutions ist zurück bei Ihnen, um über eine Vielzahl von Themen zu sprechen. An diesem Freitag werde ich versuchen, Sie näher an die häufigsten Cyberrisiken heranzuführen, damit Sie rechtzeitig informiert und vorbereitet sind. Ich bin mir nicht sicher, warum, aber mir ist etwas eingefallen, und ich habe die letzte Woche damit verbracht, verschiedene Artikel darüber zu lesen, also dachte ich, ich teile mit Ihnen, was ich gelernt habe.
Read More
