{"id":4743,"date":"2021-11-02T13:23:00","date_gmt":"2021-11-02T12:23:00","guid":{"rendered":"https:\/\/www.sortlist.de\/blog\/?p=4743"},"modified":"2021-11-03T09:18:08","modified_gmt":"2021-11-03T08:18:08","slug":"atomic-design","status":"publish","type":"post","link":"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/","title":{"rendered":"Atomic Design \u2012 Was hat Chemie mit Webdesign zu tun?"},"content":{"rendered":"\n

Was haben Atome mit Design zu tun, m\u00f6gen Sie sich vielleicht denken? Die Entstehung des Begriffs Atomic<\/strong> Design<\/strong> geht darauf zur\u00fcck, dass der Aufbau beim Webdesign auf den kleinsten Bausteinen basiert<\/strong>. Genau wie chemische Elemente aus kleinsten Teilen bestehen, geht es nach Brad Forst auch beim Weblayout darum, von Grund auf zu starten.<\/p>\n\n\n\n

Auf den Punkt gebracht, handelt es sich bei Atomic Design um eine Vorgehensweise f\u00fcr das Gestalten von Websites. In diesem Artikel gehen wir ins Detail, was sich genau hinter dem Begriff verbirgt, wie es aufgebaut wird und f\u00fcr wen es von gro\u00dfer Bedeutung sein kann.<\/p>\n\n\n\n

Was ist Atomic Design?<\/h2>\n\n\n\n

Bei Atomic Design handelt es sich um ein Konzept des Webdesigns<\/strong>, welches 2013 von Brad Frost <\/a>entwickelt wurde. Der Begriff l\u00e4sst dabei bereits darauf schlie\u00dfen, dass Frost seine Inspiration im chemischen Bereich gefunden hat. Was aber hat Chemie mit Webdesign<\/a> zu tun?<\/p>\n\n\n\n

\"periodensystem<\/figure>\n\n\n\n

Versetzen wir uns f\u00fcr einen Moment zur\u00fcck in den Chemieunterricht unserer Schulzeit. Dort wurde uns beigebracht, dass jeder physikalische K\u00f6rper aus Molek\u00fclen besteht<\/strong>, welche wiederum aus Atomen zusammengesetzt sind. Brad Frost betrachtet auch Webprojekte als physikalische K\u00f6rper, die aus Atomen bestehen. Verf\u00fcgt man \u00fcber diese kleinsten Bausteine, k\u00f6nnen daraus komplexere Teile kombiniert werden, bis man schlie\u00dflich das Endprodukt erh\u00e4lt.<\/p>\n\n\n\n

Der Name Atomic Design soll auf diesen Zusammenhang des chemischen Aufbaus von Materie anspielen. Genau wie jede Materie aus verschiedenen Atomen besteht, kann auch ein Webprojekt aus kleinsten Bauteilen zusammengesetzt werden.<\/p>\n\n\n\n

Wenn Sie selbst eine Website in Auftrag geben m\u00f6chten, wenden Sie sich am Besten an eine Agentur f\u00fcr Webdesign<\/a>.<\/p>\n\n\n\n

Atomic Design: Aufbau in 5 Stufen<\/h2>\n\n\n\n

Von den Atomen bis zum fertigen Design-System gibt es noch einige Zwischenschritte. Das Webdesign-Konzept nach Brad Frost kann insgesamt in 5 Stufen gegliedert werden<\/strong>, die wir Ihnen im Folgenden vorstellen m\u00f6chten.<\/p>\n\n\n\n

1. Stufe: Atome<\/h3>\n\n\n\n

Die Atome bilden den Grundbaustein<\/strong> des Atomic Design Konzepts. Auf den Aufbau einer Website \u00fcbertragen, sind darunter unter anderem HTML-Tags<\/a> wie zum Beispiel Verlinkungen zu verstehen. Auch die Farb- und Schriftauswahl, Eingabefelder oder Buttons k\u00f6nnen in die erste Stufe gefasst werden. Alleinstehend haben diese „Atome“ noch keinen wirklichen Nutzen<\/strong>. Erst im Zusammenspiel mit den n\u00e4chsten Schritten entfalten sie ihre Wirkung.<\/p>\n\n\n\n

2. Stufe: Molek\u00fcle<\/h3>\n\n\n\n

Im chemischen Bereich sind Molek\u00fcle die Zusammensetzung<\/strong> vieler<\/strong> Atome<\/strong>. Gleiches gilt im Atomic Design f\u00fcr das Webprojekt. In dieser Stufe werden aus einzelnen HTML-Tags Gruppierungen gemacht. Es k\u00f6nnen zum Beispiel Teaser entstehen, die sich aus \u00dcberschriften, Texten und Links bilden. Bei Molek\u00fclen kann es sich beim Atomic Design um sehr komplexe Einheiten<\/strong> handeln.<\/p>\n\n\n\n

3. Stufe: Organismen<\/h3>\n\n\n\n

Wir zoomen noch ein wenig weiter hinaus: Aus mehreren Molek\u00fclen bilden wir im Atomic Design einen Organismus<\/strong>. Dieser kann die Basis verschiedener Unterseiten einer Webseite bilden und kann beispielsweise aus den Elementen Navigationsmen\u00fc, Suchleiste, Logo und Textfeldern bestehen.<\/p>\n\n\n\n

Hier beginnt die Frage, wie die Molek\u00fclgruppen angeordnet werden sollen. Es geht um die Funktionalit\u00e4t sowie das Erscheinungsbild<\/strong> der Website. Sind die Bausteine aus den ersten beiden Stufen vorhanden, k\u00f6nnen diese Elemente in der dritten Stufe schnell und einfach individuell<\/strong> angepasst<\/strong> werden.<\/p>\n\n\n\n

Hat ein Kunde spezielle Bed\u00fcrfnisse bez\u00fcglich der Gestaltung seiner Website, k\u00f6nnen die bereits erarbeiten Bausteine entsprechend angeordnet werden. <\/p>\n\n\n\n

4. Stufe: Templates<\/h3>\n\n\n\n

In der vierten Stufe treffen wir erstmals auf einen Begriff, den wir nicht aus der Chemie kennen. M\u00f6glicherweise sieht Frost von dem Bezug zur Naturwissenschaft hier ab, da im vierten Schritt ein f\u00fcr den Kunden fassbares Ergebnis des Webdesigns<\/strong> entsteht.<\/p>\n\n\n\n

Das Wort Templates ist sehr gel\u00e4ufig. Bei diesem Begriff handelt es sich um eine Vorlage im Webdesign. Der Aufbau der Website ist gegeben, in dem die Templates als Platzhalter f\u00fcr den zu f\u00fcllenden Inhalt <\/strong>dienen. W\u00e4hrend die Basisbausteine aus den ersten Schritten sehr abstrakt sind, ist das Ergebnis in Stufe vier deutlich sichtbar.<\/p>\n\n\n\n

5. Stufe: Page\/ Seite<\/h3>\n\n\n\n

In der letzten Stufe ist der Aufbau des Atomic Designs abgeschlossen. Die Webseite sieht so aus, wie der Endnutzer sie zu Gesicht bekommt. In Stufe 5 sind alle Atome zu Molek\u00fclen zusammengefasst<\/strong> worden, die wiederum einen Organismus bilden. Au\u00dferdem sind die Templates mit individuellem Inhalt gef\u00fcllt.<\/p>\n\n\n\n

Sollte das Endergebnis nicht zufriedenstellend f\u00fcr den Kunden sein, oder bedarf die Website nach einiger Zeit eine \u00dcberarbeitung, kann in den Stufen zur\u00fcckgegangen werden, um entsprechende<\/strong> Anpassungen<\/strong> vorzunehmen.<\/p>\n\n\n\n

Beispiel der f\u00fcnf Stufen<\/h2>\n\n\n\n
\"5<\/figure>\n\n\n\n

Um uns die f\u00fcnf Stufen bildlich vorstellen zu k\u00f6nnen, m\u00f6chten wir diese an einem kurzen Beispiel erl\u00e4utern. Wir nehmen daf\u00fcr ein Suchformular<\/strong> als<\/strong> Ausgangspunkt<\/strong>. Als Atome haben wir drei HTML-Tags: ein Lupensymbol, ein Eingabefeld und einen Button mit der Aufschrift „jetzt suchen“.<\/p>\n\n\n\n

Im zweiten Schritt werden diese drei Elemente zusammengef\u00fcgt. Jetzt befindet sich das Lupensymbol oberhalb des Eingabefeldes und rechts daneben wird der Suchen-Button platziert.<\/p>\n\n\n\n

Im dritten Schritt stellt der Organismus den K\u00f6rper der Webseite dar. Die Suchfunktion ist dabei lediglich ein Element, dass dort auftaucht. Dieses wird beispielsweise oben rechts eingef\u00fcgt, w\u00e4hrend f\u00fcr ein Navigationsmen\u00fc der linke Bereich der Website und f\u00fcr die Kontaktdaten der Schluss gew\u00e4hlt wird. Die<\/strong> Website<\/strong> nimmt<\/strong> Gestalt<\/strong> an<\/strong>.<\/p>\n\n\n\n

Im vierten Schritt wird diese Gestalt vollendet, das Layout<\/strong> entsteht. Wir sehen, wo Textbl\u00f6cken erscheinen, wo diese von Grafiken aufgelockert werden, Logos platziert oder Videos abgespielt werden.<\/p>\n\n\n\n

Im f\u00fcnften Schritt ist die Webseite mit allen Inhalten gef\u00fcllt und fertig f\u00fcr die Kundennutzung.<\/p>\n\n\n\n

Verschiedene Formen des Atomic Designs<\/h2>\n\n\n\n

Der ein oder andere Webdesigner mag sich fragen, was denn eigentlich das Besondere an Atomic Design ist. Kleine Bausteine zu gr\u00f6\u00dferen Elementen zusammenzusetzen, bis letztendlich eine fertige Website entsteht – das hat es doch auch schon vor dem Konzept von Frost<\/strong> gegeben.<\/p>\n\n\n\n

Tats\u00e4chlich wurde mit Atomic Design das Rad nicht komplett neu erfunden, doch schafft es ein Bewusstsein f\u00fcr Entwickler, sich mehr auf jeden einzelnen Schritt<\/strong> zu konzentrieren. In diesem Abschnitt werfen wir einen Blick auf zwei \u00e4hnliche Formen des Atomic Designs.<\/p>\n\n\n\n

Wireframing<\/h3>\n\n\n\n

Der Begriff Wireframing<\/a> kommt aus dem Englischen und bedeutet \u00fcbersetzt so viel wie Drahtmodell, ist aber auch unter dem Term Seitenschema<\/strong> bekannt. Das Wireframing stellt das Grundger\u00fcst<\/strong> einer<\/strong> Website<\/strong> optisch dar und bildet damit eine visuelle Veranschaulichung des Atomic Design Ansatzes.<\/p>\n\n\n\n

\"wireframe\"<\/figure>\n\n\n\n

Der schematische Entwurf beim Wireframing skizziert, wo welche Inhaltsbl\u00f6cke erscheinen. Neben der blo\u00dfen Struktur gibt das Drahtmodell au\u00dferdem Auskunft dar\u00fcber, welche Funktionsweisen vorhanden sind.<\/p>\n\n\n\n

Utility First CSS<\/h3>\n\n\n\n
\"css\"<\/figure><\/div>\n\n\n\n

Bei CSS (Cascading Style Sheets) handelt es sich genau wie bei Java und HTML um eine der Kernsprachen im Web. CSS wird unter Entwicklern immer popul\u00e4rer. Hierbei wird genau wie beim Atomic Design der Fokus auf die kleinsten<\/strong> Elemente<\/strong> gelegt, anstatt einfache Vorlagen f\u00fcr die Webgestaltung zu verwenden.<\/p>\n\n\n\n

Anstelle von Atomen wird bei Utility First CSS von Klassen<\/strong> gesprochen. Durch das Zusammenf\u00fcgen verschiedener Klassen k\u00f6nnen die Entwickler sehr flexible Layouts kreieren.<\/p>\n\n\n\n

Atomic Design – Vorteile & Nachteile<\/h2>\n\n\n\n

Das Designkonzept von Brad Frost bringt eine Reihe von Vorteilen mit sich, allerdings k\u00f6nnen auch Kritikpunkte angebracht werden. Wir widmen uns jedoch zun\u00e4chst den Vorz\u00fcgen des Design-Systems.<\/p>\n\n\n\n

Vorteile<\/h3>\n\n\n\n

Atome k\u00f6nnen immer wieder verwendet werden<\/strong>: Haben Sie als Entwickler erst einmal ein Atom bzw. eine Reihe von Atomen erstellt, k\u00f6nnen Sie diese immer wieder auch f\u00fcr andere Projekte <\/strong>verwenden. Diese Zeitersparnis<\/strong> kommt nicht nur Ihnen zugute, sondern m\u00f6glicherweise auch Ihren Kundinnen, da Sie durch die eingesparten Entwicklungskosten ein g\u00fcnstigeres Angebot bereiten k\u00f6nnen.<\/p>\n\n\n\n

Au\u00dferdem kann die Wiederverwendung von Atomen zu einer h\u00f6heren Kundenzufriedenheit<\/a> f\u00fchren, da das Ergebnis des fertigen Webprojekts auf diese Weise schneller erreicht werden kann.<\/p>\n\n\n\n

Reibungsloser Arbeitsablauf<\/strong>: In Designagenturen kam es vor der Nutzung von Atomic Design h\u00e4ufig vor, dass Entwickler Leerlauf hatten, wenn mit dem Kunden noch am Design gefeilt wurde. Erst wenn der endg\u00fcltige Entwurf vorlag, konnte mit der Arbeit begonnen werden.<\/p>\n\n\n\n

Dies ist mit Atomic Design nicht mehr so, da an Atomen, Molek\u00fclen und Organismen bereits gearbeitet werden kann, bevor der fertige Auftrag vorliegt<\/strong>. Anschlie\u00dfend ist es fast nur noch ein Puzzlespiel, die einzelnen Bausteine miteinander zu kombinieren.<\/p>\n\n\n\n

Einheitlichkeit im Designentwurf<\/strong>: Die Tatsache, dass stets dieselben Grundbausteine verwendet werden, sorgt f\u00fcr einen einheitlichen Aufbau des Design-Systems. Diese Einheitlichkeit<\/strong> ist vor allem bei komplexeren Arbeiten von immensem Vorteil, um den Aufwand gering zu halten.<\/p>\n\n\n\n

Ausbauf\u00e4hige Systeme<\/strong>: Einer der gewichtigsten Vorteile von Atomic Design liegt in der Ausbauf\u00e4higkeit fertiger Elemente. Sollen im Nachhinein zus\u00e4tzliche Atome oder Molek\u00fcle hinzugef\u00fcgt werden<\/strong> oder bestehende Elemente neu miteinander kombiniert werden, ist dies problemlos m\u00f6glich. Eine Neuprogrammierung der gesamten Struktur ist nicht erforderlich.<\/p>\n\n\n\n

Einfache Handhabung und Nachvollziehbarkeit<\/strong>: Durch den methodischen und strukturierten Aufbau einzelner Atome und Molek\u00fcle sind selbst vielschichtige Design-Systeme einfach zu verstehen. Die Codierung folgt einem logischen<\/strong> Aufbau<\/strong>, wodurch es leicht ist, \u00c4nderungen vorzunehmen.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nachteile<\/h3>\n\n\n\n

Die Kunst bei Atomic Design liegt im Detail<\/strong> und bedarf daher kleinschrittiger<\/strong> Arbeit<\/strong>. Steht lediglich ein kleines Projekt an, kann es durchaus sein, dass diese Art des Design-Systems nicht in der Balance mit dem Aufwand steht. So ist Atomic<\/strong> Design<\/strong> sicherlich nicht f\u00fcr jeden geeignet, worauf wir im n\u00e4chsten Abschnitt noch etwas vertiefter eingehen werden.<\/p>\n\n\n\n

Ein weiterer Punkt, der von Kritikerinnen nicht selten bem\u00e4ngelt wird, liegt darin, dass es sich bei Atomic Design um keine<\/strong> neue<\/strong> Erfindung<\/strong> handele. Der Aufbau von Websites bestehe immer aus Vorlagen und einzelnen Elementen, die beliebig zusammengef\u00fcgt werden k\u00f6nnen. Neu sei lediglich, den Bezug zu chemischen Begriffen zu verwenden.<\/p>\n\n\n\n

F\u00fcr wen ist Atomic Design geeignet?<\/h2>\n\n\n\n

Der Dreh- und Angelpunkt bei Atomic Design ist, dass von innen nach au\u00dfen gearbeitet<\/strong> wird<\/strong> und nicht andersherum. Erhalten Programmierer beispielsweise eine fertige Seite, die \u00c4nderung bedarf, muss diese Seite herk\u00f6mmlicherweise auf kleinere Elemente heruntergebrochen werden. Beim Atomic Design ist gegens\u00e4tzliches der Fall. Hier werden kleine Bausteine genutzt, um eine komplett neue Website zu kreieren.<\/p>\n\n\n\n

\"Frontend,<\/figure>\n\n\n\n

F\u00fcr jeden Webdesigner, Entwickler und Programmierer, der viel Zeit mit der Kreierung von Webprojekten verbringt, wiegen die Vorteile, die Atomic Design mit sich bringen, schwer. Der Aufbau und die Sammlung von Atomen und Molek\u00fclen ist zun\u00e4chst zeitintensiv, doch die M\u00fche zahlt sich schnell aus<\/strong>.<\/p>\n\n\n\n

Nachfolgende Auftr\u00e4ge k\u00f6nnen in k\u00fcrzerer Zeit und mit \u00e4u\u00dferster<\/strong> Pr\u00e4zision<\/strong> bearbeitet werden. Sowohl bei mehreren kleinen Auftr\u00e4gen als auch bei komplexen Sachverhalten ist die Anwendung von Atomic Design empfehlenswert<\/strong>.<\/p>\n\n\n\n

Fazit: Der Teufel steckt wirklich im Detail<\/h2>\n\n\n\n

Atomic Design bietet zahlreiche<\/strong> Vorteile<\/strong>, wenn es um Auftr\u00e4ge im Webdesign geht. Die Herangehensweise, mit kleinsten Bauteilen zu arbeiten, die Brad Frost bildlich als Atome bezeichnet, bietet bei der Entwicklung von Webprojekten \u00e4u\u00dferste Flexibilit\u00e4t. Anpassungen k\u00f6nnen einfach und unkompliziert<\/strong> erfolgen. Zudem erleichtert die Basis das Arbeiten an zuk\u00fcnftigen Projekten. Vielleicht steckt also nicht wirklich der Teufel im Detail, sondern vielmehr die Liebe.<\/p>\n","protected":false},"excerpt":{"rendered":"

Was haben Atome mit Design zu tun, m\u00f6gen Sie sich vielleicht denken? Die Entstehung des Begriffs Atomic Design geht darauf zur\u00fcck, dass der Aufbau beim Webdesign auf den kleinsten Bausteinen basiert. Genau wie chemische Elemente aus kleinsten Teilen bestehen, geht es nach Brad Forst auch beim Weblayout darum, von Grund auf zu starten. Auf den […]<\/p>\n","protected":false},"author":81,"featured_media":4744,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41,45],"class_list":["post-4743","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-webdesign"],"acf":[],"yoast_head":"\nAtomic Design \u2012 Was hat Chemie mit Webdesign zu tun? - Sortlist Blog<\/title>\n<meta name=\"description\" content=\"Atomic Design \u2012 Der chemische Aufbau einer Webseite. Welche Rolle Atome, Molek\u00fcle und Organismen dabei spielen, erfahren Sie hier.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Atomic Design \u2012 Was hat Chemie mit Webdesign zu tun? - Sortlist Blog\" \/>\n<meta property=\"og:description\" content=\"Atomic Design \u2012 Der chemische Aufbau einer Webseite. Welche Rolle Atome, Molek\u00fcle und Organismen dabei spielen, erfahren Sie hier.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Sortlist Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-02T12:23:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-03T08:18:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www-de.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/10\/atom.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Valerie Ritter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Valerie Ritter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/\",\"url\":\"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/\",\"name\":\"Atomic Design \u2012 Was hat Chemie mit Webdesign zu tun? - Sortlist Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www-de.sortlist-test.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www-de.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/10\/atom.jpg\",\"datePublished\":\"2021-11-02T12:23:00+00:00\",\"dateModified\":\"2021-11-03T08:18:08+00:00\",\"author\":{\"@id\":\"https:\/\/www-de.sortlist-test.com\/blog\/#\/schema\/person\/77aeeff66831c95dad58258687799e27\"},\"description\":\"Atomic Design \u2012 Der chemische Aufbau einer Webseite. Welche Rolle Atome, Molek\u00fcle und Organismen dabei spielen, erfahren Sie hier.\",\"breadcrumb\":{\"@id\":\"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/#primaryimage\",\"url\":\"https:\/\/www-de.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/10\/atom.jpg\",\"contentUrl\":\"https:\/\/www-de.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/10\/atom.jpg\",\"width\":1920,\"height\":1280},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www-de.sortlist-test.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Atomic Design \u2012 Was hat Chemie mit Webdesign zu tun?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www-de.sortlist-test.com\/blog\/#website\",\"url\":\"https:\/\/www-de.sortlist-test.com\/blog\/\",\"name\":\"Sortlist Blog\",\"description\":\"Sortlist Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www-de.sortlist-test.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www-de.sortlist-test.com\/blog\/#\/schema\/person\/77aeeff66831c95dad58258687799e27\",\"name\":\"Valerie Ritter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/www-de.sortlist-test.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.sortlist.de\/blog\/wp-content\/uploads\/sites\/4\/2021\/08\/avatar_user_81_1627986454-96x96.jpg\",\"contentUrl\":\"https:\/\/www.sortlist.de\/blog\/wp-content\/uploads\/sites\/4\/2021\/08\/avatar_user_81_1627986454-96x96.jpg\",\"caption\":\"Valerie Ritter\"},\"url\":\"https:\/\/www-de.sortlist-test.com\/blog\/author\/valerieritter\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Atomic Design \u2012 Was hat Chemie mit Webdesign zu tun? - Sortlist Blog","description":"Atomic Design \u2012 Der chemische Aufbau einer Webseite. Welche Rolle Atome, Molek\u00fcle und Organismen dabei spielen, erfahren Sie hier.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"de_DE","og_type":"article","og_title":"Atomic Design \u2012 Was hat Chemie mit Webdesign zu tun? - Sortlist Blog","og_description":"Atomic Design \u2012 Der chemische Aufbau einer Webseite. Welche Rolle Atome, Molek\u00fcle und Organismen dabei spielen, erfahren Sie hier.","og_url":"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/","og_site_name":"Sortlist Blog","article_published_time":"2021-11-02T12:23:00+00:00","article_modified_time":"2021-11-03T08:18:08+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www-de.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/10\/atom.jpg","type":"image\/jpeg"}],"author":"Valerie Ritter","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Valerie Ritter","Gesch\u00e4tzte Lesezeit":"9 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/","url":"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/","name":"Atomic Design \u2012 Was hat Chemie mit Webdesign zu tun? - Sortlist Blog","isPartOf":{"@id":"https:\/\/www-de.sortlist-test.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/#primaryimage"},"image":{"@id":"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www-de.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/10\/atom.jpg","datePublished":"2021-11-02T12:23:00+00:00","dateModified":"2021-11-03T08:18:08+00:00","author":{"@id":"https:\/\/www-de.sortlist-test.com\/blog\/#\/schema\/person\/77aeeff66831c95dad58258687799e27"},"description":"Atomic Design \u2012 Der chemische Aufbau einer Webseite. Welche Rolle Atome, Molek\u00fcle und Organismen dabei spielen, erfahren Sie hier.","breadcrumb":{"@id":"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/"]}]},{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/#primaryimage","url":"https:\/\/www-de.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/10\/atom.jpg","contentUrl":"https:\/\/www-de.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/4\/2021\/10\/atom.jpg","width":1920,"height":1280},{"@type":"BreadcrumbList","@id":"https:\/\/www-de.sortlist-test.com\/blog\/atomic-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www-de.sortlist-test.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Atomic Design \u2012 Was hat Chemie mit Webdesign zu tun?"}]},{"@type":"WebSite","@id":"https:\/\/www-de.sortlist-test.com\/blog\/#website","url":"https:\/\/www-de.sortlist-test.com\/blog\/","name":"Sortlist Blog","description":"Sortlist Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-de.sortlist-test.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/www-de.sortlist-test.com\/blog\/#\/schema\/person\/77aeeff66831c95dad58258687799e27","name":"Valerie Ritter","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/www-de.sortlist-test.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.sortlist.de\/blog\/wp-content\/uploads\/sites\/4\/2021\/08\/avatar_user_81_1627986454-96x96.jpg","contentUrl":"https:\/\/www.sortlist.de\/blog\/wp-content\/uploads\/sites\/4\/2021\/08\/avatar_user_81_1627986454-96x96.jpg","caption":"Valerie Ritter"},"url":"https:\/\/www-de.sortlist-test.com\/blog\/author\/valerieritter\/"}]}},"_links":{"self":[{"href":"https:\/\/www-de.sortlist-test.com\/blog\/wp-json\/wp\/v2\/posts\/4743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-de.sortlist-test.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-de.sortlist-test.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-de.sortlist-test.com\/blog\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/www-de.sortlist-test.com\/blog\/wp-json\/wp\/v2\/comments?post=4743"}],"version-history":[{"count":0,"href":"https:\/\/www-de.sortlist-test.com\/blog\/wp-json\/wp\/v2\/posts\/4743\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-de.sortlist-test.com\/blog\/wp-json\/wp\/v2\/media\/4744"}],"wp:attachment":[{"href":"https:\/\/www-de.sortlist-test.com\/blog\/wp-json\/wp\/v2\/media?parent=4743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-de.sortlist-test.com\/blog\/wp-json\/wp\/v2\/categories?post=4743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}