Atomic Design für E-Mail: „atomisieren“ Sie Ihre Newsletter!

Ein kohärenteres Design, das auf E-Mails zugeschnitten ist und sich viel schneller in Ihren Kampagnen umsetzen lässt: Was wäre, wenn das Atomic Design der beste Ansatz ist, um Ihre E-Mail-Ansprachen zu perfektionieren?

Die Zahl ist etwas gruselig, aber für diejenigen, die an der Gestaltung von E-Mail-Marketingkampagnen beteiligt sind, sicher interessant: 53% der Marken brauchen mindestens 2 Wochen, um einen Newsletter zu „produzieren“. Die zeitaufwendigsten Phasen in diesem langen Prozess? Das Design, dann die Korrekturen und die Validierung der E-Mail.

Aua! Oder um so besser? Denn man kann auf der Design- und Validierungsseite enorm viel Zeit sparen, vor allem, wenn man eine echte Grafikcharta für die E-Mail formalisiert.

Und damit diese Grafik mehr als nur ein hübsches Referenzdokument ist, gibt es eine Designmethode, mit der Sie von der Theorie zur Praxis übergehen können: das Atomic Design.

Atomic Design ist eine Designmethode (oder Philosophie), die der amerikanische Designer Brad Frost in seinem gleichnamigen Buch aus dem Jahr 2016 theoretisch begründet hat.

In zwei Worten? Beim Atomic Design geht es darum, die traditionelle Logik des Designs umzukehren. Anstatt vom fertigen „Produkt“ (einem Poster, einer Webseite, einer E-Mail) auszugehen, geht es darum :

• zunächst grundlegende Designelemente zu kodifizieren (eine Schaltfläche, eine Überschrift, eine grafische Bearbeitung von Bildern),
• diese dann zusammenzusetzen und zu arrangieren, um das endgültige Design zu „produzieren“.

Das heißt, die Gestaltung wird „atomisiert“.

Konkret wird man beim Atomic Design fünf Arten von Designelementen unterscheiden, von den grundlegendsten bis zu den komplexesten: das Atom, das Molekül, der Organismus, die Schablone und die Seite.

Man versteht besser die Metapher hinter dem Namen „Atomic Design“: Wie in der Chemie bilden Atome die Grundlage jeder Materie. Aber isoliert hat ein Kohlenstoffatom (oder die Hauptpantone-Farbe, die von Ihrer Marke verwendet wird) wenig Nutzen: Es ist die Kombination von Atomen zu Molekülen und von Molekülen zu Organismen, die ein interessantes Ergebnis liefert...

Im Vorwort von Atomic Design erklären zwei Kollegen von Brad Frost, dass ihm die Idee 2013 kam, als sie zusammen an der neuen Version der renommierten Tech-Website TechCrunch arbeiteten. Sie kam nicht aus dem Nichts: Das modulare Design und die ersten Überlegungen zum responsiven E-Mail-Design (zu Beginn der 2010er Jahre) hatten den Weg geebnet.

"Die Ausgangslage ist ganz einfach: Das Entwerfen von starren und abgeschlossenen „Seiten“ macht in einer Zeit keinen Sinn mehr, in der Ihre Inhalte auf verschiedensten Geräten konsumiert werden – sei es auf einem Computerbildschirm, einem mehr oder weniger „smarten“ Telefon, einer Uhr oder einem Smart-TV. Wie Brad Frost sagt: „Get your content ready to go anywhere, because it’s going to go everywhere.“

Die beste Antwort auf diese Herausforderung besteht darin, Ihre Inhalte in Form von Modulen zu denken. Diese Module sind mit Ihrem Design-System konsistent, werden aber je nach Anzeigegerät unterschiedlich angeordnet."

Die UX-Designer haben die Atomic-Design-Methodik schnell für sich übernommen – und das aus gutem Grund, denn sie bietet drei entscheidende Vorteile bei der Gestaltung von Benutzeroberflächen:

• Gewährleistung von Konsistenz: Am Ende eines Atomic-Design-Prozesses steht eine Guideline oder sogar ein vollständiges Design-System, das sicherstellt, dass die Markenidentität genau eingehalten wird.
  
  
• Zeitersparnis bei der Gestaltung: Anstatt X verschiedene Versionen für X Bildschirme zu erstellen, entwickelt man nur eine Version, die sich überall anpasst. Zudem lässt sich ein fast fertiges Design leichter in einer realen Umgebung testen und nach den Tests optimieren.
  
  
• Bessere Zusammenarbeit: Vor allem mit technischen Teams. Ein Atom oder eine Molekül-Komponente kann von Entwicklern und Integratoren unabhängig codiert werden. Sie sprechen dieselbe Sprache und verwenden dieselben Arbeitsmethoden.

Eine Methodik, die es ermöglicht, schnell, regelmäßig und immer im Einklang mit einer Markenidentität zu kommunizieren – und die Zusammenarbeit zwischen Designern und Entwicklern zu erleichtern. Können Sie sich ein Einsatzgebiet vorstellen, in dem sie perfekt passen würde? Wir auch...

Atomic Design wurde ursprünglich mit den Anforderungen und Methoden des Webdesigns und App-Designs entwickelt. Diese sind zwar relativ komplex … aber letztlich weniger anspruchsvoll als das E-Mail-Design.

Während sich ein Webdesigner „nur“ mit ein paar Einschränkungen wie dem verwendeten Browser (Chrome, Firefox, Safari…) auseinandersetzen muss und ein App-Designer die Plattform (iOS oder Android) berücksichtigen muss, steht der E-Mail-Designer vor einer potenziellen Kombination von… 15.000 verschiedenen Lesekontexten, je nach:

• Dem verwendeten Gerät (Tablet, Desktop und eine breite Palette an mobilen Geräten)
• Dem E-Mail- oder Webmail-Client (Gmail, Apple Mail, Outlook…)
• Dem Betriebssystem (Outlook für Mac, Gmail in der nativen App…)

Die Herausforderung, ein Design zu haben, das sich überall korrekt verhält, ist bei E-Mails also umso größer!

Die meisten größeren Unternehmen verfügen über eine Markenrichtlinie oder ähnliche Dokumente, die ihre Kommunikation strukturieren. Diese sind jedoch oft auf Printmedien (Flyer, Kataloge, Broschüren) oder Webinhalte (Webseiten, Social-Media-Beiträge) ausgelegt.

Für E-Mails, obwohl sie mit Abstand der rentabelste Kommunikationskanal und das bevorzugte Interaktionsmittel der Kunden sind, werden solche Richtlinien nur selten entwickelt. Das Problem: Die Regeln, die für Webdesign oder Print-Layouts gelten, funktionieren nicht immer für E-Mails. Die Verwendung spezieller Schriftarten, Bildgrößen oder die Anordnung von Inhalten unterliegen hier stärkeren Einschränkungen.

Mit einer Atomic-Design-Ansatz können Sie die grundlegenden Elemente Ihrer visuellen Identität nutzen und speziell auf E-Mails zugeschnittene Richtlinien erstellen.

Die Gestaltung von E-Mail-Marketing würde eine großartige olympische Disziplin abgeben… auch wenn sie vielleicht etwas zu extrem für die Olympischen Spiele erscheint! Die Aufgabe der CRM- und Marketingteams, die für diesen Kanal zuständig sind, erfordert in der Tat:

• Ausdauer, da die durchschnittliche Zeit für die Gestaltung einer Kampagne in der Hälfte der Fälle über zwei Wochen beträgt.
• Ein Pentathlon, da mehr als die Hälfte der E-Mail-Teams an mehr als fünf Kampagnen gleichzeitig arbeitet (manche sind sogar in der „Zehnkampf“-Kategorie).
• Ein Hürdenlauf, da jede Kampagne eine Reihe von Schritten erfordert, von denen zwei besonders zeitaufwendig sind: das Design und die Genehmigung des Designs...

Kurz gesagt, das Beherrschen der Zeit (und das Gewinnen von Zeit) ist entscheidend für die E-Mail-Profis.

Und genau das ist eines der größten Vorteile des Atomic Design-Ansatzes und seines Pendants: einer „echten“ Richtlinie, die speziell für Ihre Newsletter entwickelt wurde. Mit einer vollständigen Bibliothek von Bausteinen in Ihren Markenfarben wird das Erstellen einer „on-brand“ Kampagne deutlich schneller. Und bei der Genehmigung können Sie sofort belegen, dass Sie mit der Markenidentität konsistent bleiben.

Übrigens war es genau dieser Gedanke, der uns bei Dartagnan dazu brachte, unseren E-Mail-Builder auf einem modulsystem basierend auf Atomic Design zu entwickeln: Einmal in Dartagnan erstellt, speisen Ihre Inhaltsblöcke Ihr internes „kreatives Katalog“, der von Kampagne zu Kampagne wiederverwendet, innerhalb einer Newsletter dupliziert usw. werden kann.

Das ist wahrscheinlich auch der Grund, warum Unternehmen, die „enorm viele“ E-Mails produzieren und auf große Abonnentenbasen setzen, unsere Lösung bevorzugen...

Überzeugt von den Vorteilen eines Atomic-Design-Ansatzes zur Neugestaltung Ihrer Kampagnen? Dann lassen Sie uns nun Schritt für Schritt durchgehen, wie Sie vorgehen können.

Egal ob es als Brandbook, Styleguide oder Grafikrichtlinie bezeichnet wird – Sie verfügen wahrscheinlich über ein Dokument, das die visuellen Ausdrucksregeln Ihrer Marke definiert. Falls nicht, gibt es zumindest Print- oder Digitalkampagnen, sowie Spezifikationen für Ihre Website... All das sind Hinweise, um die Grundlagen für Ihre zukünftige E-Mail-Richtlinie festzulegen.

Was Sie suchen?

• Ihr Logo und seine verschiedenen Varianten (falls vorhanden)
• Ihre Schriftarten und typografischen Regeln (wann fett, unterstrichen, welche Proportionen zwischen Titel, Untertitel, Zwischentitel und Fließtext…)
• Die verwendeten Farben und in welchen Fällen sie eingesetzt werden (als Hintergrund oder nicht, als flache Farben oder Verläufe, im Text…)
• Welche Arten von visuellen Inhalten verwendet werden und wie sie behandelt werden (mit oder ohne Rand, mit Ausschnitten, Überlagerungen)
• Und schließlich ein „allgemeiner Stil“: Ist das Design eher luftig oder kompakt? Locker oder zurückhaltend? Etc.

Anschließend geht es darum, diese Elemente in „Atome“ zu übersetzen, die in der E-Mail verwendet werden können. Dies kann sehr schnell gehen (wenn Ihre Marke keine „grafischen Spielereien“ verwendet hat)… oder langwieriger sein, wenn:

• Sie eine spezielle Schriftart verwenden: Abgesehen von einigen sehr gängigen Schriftarten und Webfonts in bestimmten Konfigurationen, werden diese speziellen Schriftarten in einer E-Mail nicht korrekt angezeigt, und Sie müssen eine Ersatzschriftart finden, die ihr möglichst nahe kommt.
• Sie häufig Bildüberlagerungen, spezielle Ausschnitte und Rahmen oder texturierte Hintergründe verwenden… die in bestimmten E-Mail-Lesekonfigurationen Integrationsprobleme verursachen können.

Nun geht es an die eigentliche Atomic-Design-Gestaltung, indem Sie die Zutaten, die Sie in kleine grundlegende grafische Elemente gesammelt haben, zu wiederkehrenden Bausteinen für Ihre Kampagnen zusammenfügen.

Um das richtig zu machen, vergessen Sie nicht, alle diese Moleküle in einer Bibliothek zu sammeln, die für Ihr gesamtes Team zugänglich ist und als Referenz dient.

Das könnte zum Beispiel sein:

• Farbe + Regeln für die Verwendung von Flächen + Schriftart = ein CTA
• Schriftart in <h2> + Linie = Titel einer „Rubrik“ in Ihren Newslettern
• Piktogramme, die auf Ihre sozialen Netzwerke verweisen oder für Ihre Vertrauensblöcke (Lieferung, Kundenservice usw.)

Mit diesen noch sehr grundlegenden Molekülen ausgestattet, können Sie sich nun komplexeren Organismen widmen:

• Ihr Top-Menü und Ihr Footer
• Produktboxen wie „Foto / Name / Beschreibung / Preis“
• Werbe-Boxen „Foto + Piktogramm / Name / Beschreibung / durchgestrichener Preis“
• Der Block „Bild / Titel / Text / CTA“, der dazu anregt, Ihre App zu installieren
• usw.

Es steht Ihnen frei, an dieser Stelle weiterzugehen und mehrere dieser Organismen zu komplexeren Einheiten zusammenzufügen: Ein „Raster“ mit 2 x 2 oder 2 x 3 Produkten, zum Beispiel. Das ermöglicht der E-Mail-Builder von Dartagnan dank seiner Module. Das Wichtigste an dieser Stelle ist, die Elemente zu entwerfen, die Sie regelmäßig benötigen werden.