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.
Technologische Veränderungen sorgen immer noch für Chaos auf dem Planeten. Rechnen Sie mit weiteren strategischen und revolutionären Fortschritten im Jahr 2023, wenn diese neueren Schritte an Fahrt gewinnen und intensiver werden. Sie können neue Technologien in der Anfangsphase zu Ihrem Vorteil nutzen und sich einen Wettbewerbsvorteil verschaffen, indem Sie sie früher nutzen. Obwohl es immer noch schwierig ist, vorherzusagen, wie sich Trends entwickeln werden, scheinen mehrere Technologien im Frühstadium auf dem richtigen Weg zu sein. Diese gewinnen an Dynamik, sind schon früh vielversprechend und helfen Unternehmen vielleicht dabei, ihren Weg in Richtung Innovation und Expansion einzuschlagen. Hier finden Sie unsere Auswahl der angesagtesten neuen Technologien für 2023 sowie eine kurze Zusammenfassung ihres Potenzials. Lasst uns anfangen, sie zu analysieren.
Read More
Was genau sind Qualitätssicherungstests (QA)? Warum ist es ein wichtiges Element im Softwareerstellungsprozess? Lassen Sie uns in diese Themen eintauchen und die verschiedenen Arten von QA-Tests, ihre gegenseitigen Prozesse und die besten Praktiken untersuchen, die zu einer reibungslosen Projektabwicklung beitragen. Unterwegs werden wir auch die gemeinsamen Herausforderungen in diesem Bereich erörtern.
Read More
Wenn Sie dachten, dass es bei der digitalen Transformation in der Fertigung nur um die Einführung neuer Technologien und die Vereinfachung des Herstellungsprozesses geht, denken Sie noch einmal darüber nach — es geht darum, zu überdenken, wie Sie Ihren Kunden einen Mehrwert bieten. Im Grunde genommen ist sie die Brücke in die Zukunft und bietet Herstellern einen Plan, um in einem zunehmend wettbewerbsintensiven Markt innovativ zu sein, zu optimieren, zu überleben und erfolgreich zu sein.
Read More
