matter of design
  • Design
  • Strategie
  • Technologie
  • Archiv
  • ÜBER UNS
No Result
View All Result
matter of design
  • Design
  • Strategie
  • Technologie
  • Archiv
  • ÜBER UNS
No Result
View All Result
matter of design
No Result
View All Result

Atomic Design – überbewertet oder sinnvoll?

21/10/2016
in Design, Webdesign
5.2k
VIEWS
Share on FacebookShare on Twitter

RelatedPosts

Streichpreise - eine Variante des Ankereffekts

Der Ankereffekt – wie er wirkt und wie Sie diesen nutzen können

10/03/2021
Heuristics and Biases

Behaviour Pattern – wie Verhaltensmuster uns beinflussen

09/02/2021

In der Designbranche und im Marketing sind kreative Wortschöpfungen und Buzzwords gängig. Im Webdesign trifft man seit 2013 dabei immer wieder auf den Begriff „Atomic Design“.

In Zeiten zunehmender Medien- und Gerätevielfalt, sind „Flexibilität“ und „Agilität“ entscheidende Erfolgskriterien für die Umsetzung einer Webseite oder einer Applikation. Responsives Design auf Basis eines agilen Projektmanagements mit kurzen, iterativen Sprints bildet inzwischen den Prozessstandard.

Responsives Webdesign ist in aller Munde

Reichte es früher dem Auftraggeber nur die Screenversion einer Webseite zu zeigen, gibt es bei der Entwicklung responsiver Webseiten unterschiedlichste Bildschirmgrößen zu berücksichtigen. Diese verändern sich jedoch – je nach technischem Entwicklungsstand der Endgeräte – ständig. De facto sollte ein modernen Webauftritt also auflösungsunabhängig und bestenfalls modular konzipiert werden.

2013 stellte der amerikanische Front-End-Designer Brad Frost seinen Gestaltungsansatz „Atomic Webdesign“ vor. Der Konzeptansatz hinter Atomic Design ist eigentlich banal (dazu später), aber der Kontext in den er sein Konzept stellt, ist intelligent.

Atomic Design orientiert sich an den Begriffen der Chemie. Jede Materie setzt sich aus Atomen und Molekülen zusammen.

Diesen Ansatz überträgt Frost in das Webdesign, denn auch dort werden komplexe Objekte (Bsp. Interactive Slider) in kleinste Bestandteile (HTML-Tag, Headlines, Buttons, Navigationselemente usw.) zerlegt und bauen aufeinander auf.

Einen Vorteil dieser Analogie: Das Prinzip ist auch für Stakeholder und Projectowner nachvollziehbar, die noch nicht mit agilen Entwicklungsmethoden vertraut sind und am liebsten direkt einen fertigen Entwurf sehen möchten.

Atomic Design fördert ein Mindset, bei dem sich sowohl Entwickler als auch Productowner zuerst um die Details und Spezifikationen kümmern, bevor der ganz große Designentwurf gestaltet und präsentiert wird.

Atomic Design – Das Konzept

Das Konzept unterscheidet zwischen fünf verschiedenen Phasen der Entwicklung (die nicht linear ablaufen müssen) bzw. Prozesskomponenten:

matter of design, Atomic Design, Principle

1) Atome

Sie bilden als kleinste Einheit die Grundbausteine einer Website. Dazu gehören die Farbpalette, Fonts und HTML-Tags, Formular- und Eingabefelder, Icons und Navigationselemente. Wie in der Chemie können diese nicht weiter zerlegt werden, sind aber auch erst einmal keiner spezifischen Funktion zugeordnet.

2) Moleküle

Moleküle sind eine Kombination verschiedener Atome und bilden grundlegende Funktionselemente einer Webseite. Kombiniert man zum Beispiel ein Eingabefeld mit einem Button und etwas Text, könnte daraus daraus eine Formularbox für eine Newsletter-Anmeldung oder ein Suchformular werden. Moleküle sind weniger komplex und erfüllen häufig wiederholende Aufgaben.

3) Organismen

Organismen wiederum setzen sich aus mehreren Molekülen zusammen und bilden somit verschiedene Funktionsabschnitte einer Website z.B. ein Hero-Parallax-Slider, ein News-Grid mit Filterfunktion oder eine Seitenleiste für Social Media-Kanäle. Organismen bilden also bestimmte Sektionen einer komplexen Seite ab und können in verschiedenen Umfelder eingesetzt und wiederverwendet werden.

Ab hier wird mit der Analogie zur Chemie gebrochen und mit designbezogenen Begriffen gearbeitet:

4) Templates

Templates vereinen mehrere Organismen zu einem ganzheitlichen Layout. Moleküle und Organismen stehen in einem inhaltlichen Kontext zueinander und ergeben das Gesamtdesign der Seite. Allerdings basieren Templates auf fiktiven Inhalten und Platzhaltern.

5) Seiten

Das letzte Stadium der Entwicklung beinhaltet die Seiten, auf denen nun die realen Inhalte eingesetzt werden und die der finalen Webseite oder Applikation entspricht. Hier wird auch noch einmal das Zusammenspiel der Komponenten geprüft und gegebenenfalls überarbeitet.

matter of design, Atomic Design. Principle and example

Das Ganze ist mehr als die Summe seiner Teile

Das ein Designprozess grundsätzlich – ausgehend von einer übergeordneten Konzeptidee – vom kleinsten zum größten Teil verlaufen sollte, dürfte jedem gelernten Kommunikationsdesigner geläufig sein – auch schon vor der Erfindung des WorldWideWeb.

Was hat ein Produktkatalog mit Atomic Design zu tun?

Betrachten wir die Prozesse bei der Konzeption und Gestaltung eines komplexeren Printmediums wie z.B. einem Katalog, werden wir eine vergleichbare Vorgehensweise vorfinden.

Zuerst erfolgt auf Basis des übergeordneten Kommunikationskonzeptes die Entwicklung des Rasters, die Definition der Schriftarten- und Schriftgrößen (Typografie), das Farbklima und die Bildsprache, ggf. noch Tonalität der Texte und die Definition von additiven Gestaltungselementen wie Linien, Flächen usw.

Im zweiten Schritt wird das „Framework“ definiert, also Paginierung, Rubrizierung, die Gestaltung von Titeln, Einleitungstexten, Tabellen, Bild- und Textplatzierungen.

Jetzt werden Seitentypen wie z. B. Produktseiten, Inhaltsangabe, Zwischentitel, Technische Daten, Glossar sowie Imageseiten definiert und mit den Inhaltselementen aus dem zweiten Schritt „befüllt“.

Zu guter Letzt werden die finalen Texte, Daten und Bilder eingefügt, das Gesamtlayout auf Funktionalität und Kommunikationszielsetzung geprüft und gegebenenfalls korrigiert.

Ist Atomic Design „Alter Wein in neuen Schläuchen“ und clevere Selbstvermarktung?

Im Grunde schon. Doch wie bereits weiter oben erwähnt, hilft die Analogie, das Verständnis für die effiziente Umsetzung eines Webprojektes zu verbessern. Da zuerst grobe Inhaltsblöcke und Spezifikationen definiert werden und das Projekt von unten nach oben durchdacht wird, verliert man sich nicht so schnell in Gestaltungsdetails und findet schneller zum Gesamtbild. Das hat auch Einfluß auf die Entwicklung der Code-Blöcke, da man bei deren Entwicklung eher darauf achten wird, dass diese wiederverwendbar und adaptierbar sind. Atomic Design hilft dabei den Überblick zu bewahren.

Weitere Gründe, die für Atomic Design sprechen hat Richard Bray in seinem Artikel „10 reasons you should be using Atomic Design“ vom Juni 2016 auf Creative Bloq zusammengefasst.

Brad Frost erklärt Atomic Design auf seiner eigenen Webseite unter http://atomicdesign.bradfrost.com

VERPASSEN SIE KEINE NEWS UND BLEIBEN SIE AUF DEM LAUFENDEN!
Thank you for subscribing.
Something went wrong.
I agree to have my personal information transfered to MailChimp ( more information )
Erhalten Sie mit dem Newsletter von matter of design aktuelle Nachrichten und Beiträge aus der Welt des Marketing, der Markensteuerung und Markenentwicklung.
Spam ist die reinste Pest! Ihre Email-Adresse wird streng vertraulich behandelt und garantiert nicht weitergegeben.
Tags: Atomic DesignDesignmethodenScreendesignUser Interface
Share63Tweet39Share11
Previous Post

Review: Wirtschaft verstehen

Next Post

Buzzword: Influencer Marketing

Helge Rieder

Helge Rieder

Helge Rieder ist Geschäftsführer und Gesellschafter der stay golden GmbH. Wenn er sich nicht mit den Themen Marke, Markenführung, Design und Typografie beschäftigt, fährt er leidenschaftlich gerne Mountainbike, studiert Wirtschaftspsychologie oder bereist ihm fremde Städte.

Next Post
matter of design, Influencer Marketing, Social Media

Buzzword: Influencer Marketing

matter of design, design thinking, denkmethode

Design Thinking – das andere Arbeiten

  • Top Rated
  • Recent
ADVERTISEMENT
Growth Hacking, Marketing, Content Marketing, Digital Marketing, Data, Big Data, Buzz Word, Hacks, Strategie, Planung, Management, Kommunikation, Design, Matter of Design
Strategie

Was ist Growth Hacking und wie profitieren Unternehmen davon?

12/02/2019
matter of design, umfrage, content, digitalisierung, corporate design, corporate communications, kommunikation, digital, markenstrategie, strategie, blog, marketing, menschen, wissen
Positionierung

In eigener Sache: Umfrage 2019

09/01/2019
matter of design, digitalisierung, corporate design, corporate communications, kommunikation, digital, markenstrategie, strategie, blog, marketing, menschen, wissen
Technologie

Auftreten und Kommunikation im digitalen Wandel

04/12/2018

BELIEBTE THEMEN

  • Home
  • Strategie
  • Design
  • Technologie
  • Archiv
  • Über uns

NEUESTE POSTS

Die Bedeutung des regulatorischen Marken-Fit; Kaugummi Wrigleys Extra

Die Bedeutung des regulatorischen Marken-Fit

08/04/2021
Streichpreise - eine Variante des Ankereffekts

Der Ankereffekt – wie er wirkt und wie Sie diesen nutzen können

10/03/2021

MATTER OF DESIGN

matter of design ist ein Informations-Blog zu Marketing-relevanten Themen wie Markenbildung, Markensteuerung, Corporate Design, Webdesign, Unternehmenskommunikation, Technologie und Wirtschaft.
(*) In Reviews nutzen wir Affiliate Links (u.a. Amazon Partnerprogramm). Dadurch entstehen Ihnen als Nutzer keinerlei Nachteile. Weitere Informationen finden Sie in unseren Datenschutzbestimmungen.
  • About MoD
  • Datenschutzrichtlinien
  • Impressum

© 2021 matter of design – matter of design.com is a service by Helge Rieder & Carsten Prenger.

No Result
View All Result
  • Strategie
  • Design
  • Technologie
  • Archiv

© 2021 matter of design – matter of design.com is a service by Helge Rieder & Carsten Prenger.