And the Oscar goes to ...
Gutes Design macht Ihre E-Mails nicht nur schicker. Es steigert auch deren Effizienz. Denn es sorgt für Aufmerksamkeit, führt Leser, erhöht die Lesbarkeit, erleichtert die Aufnahme Ihrer Botschaften und generiert Klicks.
Wir haben für Sie sechs interessante Designtrends 2021 identifiziert, die Ihr E-Mail-Marketing bei richtigem Einsatz erfolgreicher machen. Unsere Designerinnen Melanie Hager und Denise Rosenkranz stellen Ihnen diese hier vor und verraten Ihnen, worauf Sie dabei achten sollten:
Dark Mode
2020 vorgestellt, setzt sich der Dark Mode immer mehr durch. Insbesondere bei Apple-Nutzern ist der Anzeigemodus beliebt, aber auch unter Besitzern von Android-Endgeräten findet der Dark Mode immer mehr Anhänger. Für Sie lohnt sich die Erstellung von E-Mails mit Dark Mode-Optimierung insbesondere dann, wenn der größte Teil Ihrer Empfänger ihre Mails auf mobilen Endgeräten und in Outlook öffnen.
- Die dunkle Anzeige sorgt für ein dunkleres Display und spart so Strom. Dadurch verlängert sich die Akkulaufzeit.
- Die Anzeige von Schrift auf dunklem/schwarzen Grund sorgt für eine bessere Lesbarkeit und schont die Augen.
- E-Mail-Designs, die den Dark Mode aufgreifen, werden als cooler, moderner und wertiger empfunden.
- E-Mail-Designs im Dark Mode sind aufwendiger in der Umsetzung, da Bilder und grafische Elemente auf weißem Untergrund im Dark Mode mit unschönen weißen Rändern dargestellt werden, die wenig professionell wirken.
- Bei falschen Farbkombinationen sind Texte schwer lesbar und Inhalte nicht deutlich zu erkennen.
- Damit E-Mails sowohl klassisch als auch im Dark Mode bestmöglich dargestellt werden, müssen Bilder, Kontraste und Farben sorgfältig optimiert werden, da die Erstellung einer Dark Mode- und einer Light-Variante nicht möglich ist.
Darauf sollten Sie achten:
- Achten Sie bei der Darstellung von Texten auf ausreichend Kontrast, um eine optimale Lesbarkeit zu garantieren. Dies betrifft insbesondere Texte auf Bildern, da Bildelemente nicht verändert werden. Ein Beispiel für Darstellungsprobleme ist ein dunkelgrauer Text auf einem gelben Untergrund. Manche Clients invertieren diesen Text hellgrau und damit ist er auf dem gelben Hintergrund kaum lesbar.
- Legen Sie Bilder und grafische Elemente mit einem weißen Hintergrund auch in einer transparenten Version für den Dark Mode an. Auf diese Weise verhindern sie unerwünschte Weißräume um die betreffenden Elemente, die Ihr Layout zerstören würden.
- Realisieren Sie E-Mails nicht „Dark Mode only“. Darstellungsprobleme sind sonst vorprogrammiert. Denn vielen Clients (wie etwa Outlook 365) invertieren dunkle Hintergründe, die dann hell dargestellt werden. Ziehen Sie daher unbedingt wie bei dunklen Elementen auf hellem Grund auch um helle Elemente auf dunklem Hintergrund eine Outline, damit auch auf einem invertierten Hintergrund alles sichtbar bleibt.
Von Hand gezeichnete Elemente/Illustrationen
Von Hand gezeichnete Elemente sind in. Kein Wunder, denn aufgrund ihrer ungewohnten Optik bringen sie Leben in ein Design und sorgen für Aufmerksamkeit.
- Handzeichnungen und Illustrationen setzen optische Akzente und steigern die Aufmerksamkeit.
- Von Hand gezeichnete Elemente wirken sympathisch und lebendig.
- Falsch eingesetzt, lassen von Hand gezeichnete grafische Elemente oder Illustrationen Layouts schnell kindlich, naiv oder unseriös wirken.
- Gut ausgeführte händische Zeichnungen sind aufwendig in der Erstellung.
- Neben der Dark Mode-Variante muss ebenfalls noch eine „normale“ E-Mail-Version für klassische Clients erstellt werden.
Darauf sollten Sie achten:
- Unternehmen von denen Kunden Seriosität erwarten, sollten von Hand gezeichnete Elemente mit Bedacht einsetzen – etwa, um junge Zielgruppen anzusprechen, die Besonderheit einer Kampagne zu betonen oder Icons als Handzeichnung zur Auflockerung eines Layouts einzusetzen.
- Achten Sie bei der Kombination von Illustrationen/Handzeichnungen mit realen Bildern darauf, dass diese ein harmonisches Gesamtbild ergeben. Alternativ kann ein starker Kontrast zwischen Realbild und Handzeichnung aber auch eine starke Wirkung erzielen und für mehr Aufmerksamkeit sorgen.
- Wer noch nie mit von Hand gezeichneten Elementen gearbeitet hat, hat so einfach die Möglichkeit, frischen Wind in seine Designs zu bringen.
- Exportieren Sie Illustrationen, die auf bunten Flächen oder in Dark Mode optimierten E-Mails eingesetzt werden sollen, in der entsprechenden Größe und mit transparentem Hintergrund für eine perfekte Darstellung.
Micro Animationen
Bei Micro Animationen handelt es sich um kleine animierte Elemente innerhalb eines Layouts – zum Beispiel ein pulsierender Pfeil, der auf einen Button zeigt. Anders als ihr Name vermuten lässt, haben sie jedoch eine große Wirkung. Denn sie sorgen in einem ansonsten statischen Design für maximale Aufmerksamkeit, die sie Blicke der Betrachter magisch anziehen.
- Micro Animationen sind echte Hingucker und damit Garanten für maximale optische Präsenz eines Layoutbereichs.
- In Layouts lässt sich der Blick eines Betrachters mithilfe von Micro Animationen gezielt lenken.
- Da der Animationseffekt innerhalb einer Micro Animation in der Regel sehr klein ist, lassen sich diese Bewegtbild-Elemente mit wenig Aufwand erstellen.
- Micro Animationen lassen E-Mails dynamischer und lebendiger wirken.
- Zu viele Micro Animationen verwirren den Betrachter und sind kontraproduktiv.
- Nicht alle E-Mail-Clients stellen Micro Animationen korrekt dar.
Darauf sollten Sie achten:
- Setzen Sie Micro Animationen nur gezielt ein, um E-Mail-Empfängern eine klare Orientierung zu geben.
- Achten Sie darauf, dass Ihr Layout auch ohne Animation funktioniert, etwa wenn der Empfänger-Client die Animation nicht wiedergibt.
Text-Only Hero Images
Dem Headerbereich einer E-Mail wird die größte Aufmerksamkeit zuteil. Text-Only Hero Images machen sich diese Tatsache zunutze, indem große Headlines in einer fetten und unübersehbaren Typo ohne Bildelement die traditionell eingesetzten Bilder ersetzt.
- Präsente Headlines eignen sich hervorragend, um Produkte in den Fokus zu rücken.
- Text-Only Hero Images lassen Layouts aufgeräumt und seriös wirken, sind minimalistisch und damit voll im Trend.
- Inflationär eingesetzt, verlieren Text-Only Hero Images ihre Wirkung.
- Im Header von Newslettern sorgen umfassende Headlines schnell für bedrückende Enge.
Darauf sollten Sie achten:
- Achten Sie darauf, dass der Text und der Weißraum stets in einem harmonischen Verhältnis stehen und nicht den gesamten Screen einnehmen.
- Fügen Sie Text-Only Hero Images bei Verwendung einer Hausschrift zur Sicherheit immer als Bild ein, da nicht alle Clients Hausschriften darstellen können.
- Verzichten Sie nicht komplett auf Bilder, sonst wirkt ein Newsletter schnell fade und uninspiriert.
- Setzen Sie bei Einsatz eines Text-Only-Headers in Ihren E-Mails auf eine starke restliche Bildsprache, um den Blick weiter zu ziehen.
Kräftige Schriftarten und Farben
Satte, kräftige Farben und Schriftarten sind echte Hingucker und helfen, Layouts zu strukturieren sowie wichtige Inhalte besonders zu betonen.
- Kräftige Farben und Schriftarten ziehen die Aufmerksamkeit auf sich und lenken den Blick.
- Selbst einfach Designs lassen sich mit kräftigen Farben und Schriftarten aufwerten und lebendiger gestalten.
- Inflationär eingesetzt, führen kräftige Farben und Schriftarten zu Verwirrung.
- Bei Verwendung von Hausschriften steigt der Gestaltungsaufwand, da Fallback-Varianten angelegt werden müssen.
Darauf sollten Sie achten:
- Verwenden Sie nicht zu viele Farben und Schriftarten bzw. -schnitte. Statt visueller Ordnung droht sonst ein optisches Chaos.
- Bedenken Sie beim Einsatz Ihrer Hausschrift, dass nicht jeder Client diese korrekt darstellt. Greifen Sie daher lieber auf Standardschriften zurück oder legen Sie die Textelemente als Bilder an.
- Wählen Sie, falls Ihre CI dies zulässt, auch gerne Schriftarten, die einen Kontrast zu Ihrer Hausschrift darstellen, um für Abwechslung zu sorgen. Setzen Sie dieses Stilmittel aber mit Bedacht ein.
Asymmetrische Layouts
Im Gegensatz zu starren, tabellarisch aufgebauten Layouts sorgen asymmetrische Designs für mehr Leben in einer E-Mail und verleihen ihr Einzigartigkeit.
- Ein asymmetrischer Aufbau Ihres Layouts sorgt für Abwechslung und Lebendigkeit.
- Asymmetrische Layouts eignen sich hervorragend für Standalone-Mails.
- Eine zu starke Asymmetrie verwirrt und erschwert die Aufnahme der Mail-Inhalte.
- Eine zu schwache Asymmetrie des Layouts wirkt wie ein Fehler, der auf mangelnde Sorgfalt hindeutet.
- Asymmetrische E-Mail-Layouts sind aufgrund der nötigen Optimierung auf unterschiedliche Clients nur mit viel Mehraufwand zu realisieren.
Darauf sollten Sie achten:
- Achten Sie beim Einsatz asymmetrischer Layouts, dass ein visueller roter Faden eine korrekte Blickführung sicherstellt.
- Setzen Sie auch bei asymmetrischen Designs auf ein Gestaltungsraster zur Strukturierung.
- Realisieren Sie E-Mails mit asymmetrischem Layout auf keinen Fall nur mithilfe von Bildern, um eine perfekte Darstellung zu erzielen. Der Verzicht von HTML-Text kann sonst zu einer deutlichen Erhöhung Ihres Spam-Scores führen.
- Setzen Sie auf gut durchdachte ausgewogene Layouts in Ihren E-Mails mit einer moderaten Asymmetrie. Diese lassen sich gut umsetzen und garantieren bei einem Einsatz Ihrer CI-Farben und -Bildsprache einen hohen Wiedererkennungswert.
