Produktentwicklung Newsletter
Produktentwicklung Newsletter
Produktentwicklung Newsletter
2025 gründet das Redaktionsnetzwerk Deutschland (RND) die RND Fortis, welche sich auf die Erstellung und Vermarktung verschiedener Lokal-Newsletter konzentriert. Ein hochrangiges Team aus ganz Deutschland arbeitet zusammen, um "den besten Newsletter der Welt" zu entwickeln. Aktuell sind die Produkte 5in5 und Politik in auf dem Markt. Meine Aufgabe in diesem Projekt ist es, das UI-Design zu entwickeln und die Web-Integration zu unterstützen.
2025 gründet das Redaktionsnetzwerk Deutschland (RND) die RND Fortis, welche sich auf die Erstellung und Vermarktung verschiedener Lokal-Newsletter konzentriert. Ein hochrangiges Team aus ganz Deutschland arbeitet zusammen, um "den besten Newsletter der Welt" zu entwickeln. Aktuell sind die Produkte 5in5 und Politik in auf dem Markt. Meine Aufgabe in diesem Projekt ist es, das UI-Design zu entwickeln und die Web-Integration zu unterstützen.
Projektbeschreibung
Das übergeordnete Ziel ist die Entwicklung eines, "smarten" journalistischen Formats (Smart-Brevity-Ansatz), das eine eigene visuelle Identität erhält. Dieses Produkt soll von Anfang an crossmedial gedacht werden, sodass seine visuelle Identität konsistent auf verschiedenen Kanälen wie Web, Social Media und in Newslettern beibehalten wird. Das neue Format wird zunächst in eine Newsletter-Umgebung integriert. 2025 konnten die Produkte "5in5" und "Politik in" veröffentlicht werden. Seitdem konnten auch weitere Formate, wie Freizeit-Newsletter, Sport-Newsletter oder spezielle Themen-Newsletter adaptiert werden.
Herausforderungen
Darstellung in E-Mail Clients
Eine der größten technischen Herausforderungen ist die Darstellung des Designs auf einer Vielzahl von Systemen, Plattformen und E-Mail-Clients. Da in E-Mail-Clients keine Effekte möglich sind, müssen die Designmöglichkeiten stark reduziert werden, um eine konsistente und funktionale Darstellung zu gewährleisten.
Schnelle Integration von Bildern mit schlechterer Qualität
Eine weitere wichtige Herausforderung ist die visuelle Integration von Bildmaterial: Da lokaler Bild-Content von den Redaktionen oft unter Zeitdruck entsteht und nicht immer die höchste Qualität aufweist, muss das Design auch mit weniger ansprechenden Bildern überzeugen und sie gekonnt in Szene setzen.
Automatisierung und Schnelligkeit
Bis jetzt müssen 13 Lokalredaktionen mit dem UI arbeiten können und Inhalte müssen untergebracht werden – ohne Qualitätsverlust. Das UI muss für neue Newsletter erweiterbar angelegt sein. Mit über 50 lokalen "5in5" Ausgaben muss ein Großteil des Prozesses automatisiert werden, beispielsweise durch die automatische Befüllung von lokalen Schlagzeilen. Das Design soll einerseits den Stil des RND widerspiegeln, sich aber gleichzeitig von bestehenden Formaten abheben. Die Newsletter kommen jeden Wochentag 5.55 Uhr heraus. Das UI muss schnell auch improvisierte Inhalte aushalten können.
Autorenmarke stärken
Die Autoren sollen als täglichen Wegbegleiter der Leser etabliert und in den Vordergrund gestellt werden.
Neue Zielgruppen erschließen
Die Newsletter sollen eine jüngere Zielgruppe abholen, um das nachwachsende Publikum zu integrieren. Während der Verlag aktuell vor allem Leser der Altersgruppe Ü50 anspricht, ist es das Ziel, mit dem neuen Format eine neue Zielgruppe von 35 bis 45 Jahren zu erreichen.
Lösungsansatz
Crossmediale Darstellung
Die Smart-Umgebung kann je nach Kanal variieren: Während sie im E-Mail-Client statisch dargestellt wird, kann sie im Web animiert sein und so das volle Potenzial der visuellen Identität ausschöpfen.
KISS-Prinzip (Keep it simple)
Unser Lösungsansatz besteht darin, das "Smart"-Format als visuelle Karte zu konzipieren. Diese Karten weisen in jedem Kanal die gleiche grundlegende Struktur und visuelle Darstellung auf. Der Aufbau ist bewusst simpel gehalten, um den redaktionellen Inhalt in den Vordergrund zu stellen. Die Elemente funktionieren statisch, können aber später um Animationen, wie zum Beispiel eine Kartendrehung, erweitert werden.
Redaktionelle Integration via WYSIWYG-Editor
Das Team von RND hat für die Redaktionen eine WYSIWYG-Editor (ARC) Umgebung geschaffen, in der die Redakteure den Newsletter so sehen, wie er am Ende ausgespielt wird. Ich habe bei der Optimierung für die Redaktionen als UI Designerin unterstützt.
Persönlicher Autorenbezug
Die Lesenden erhalten direkt nach dem Öffnen des Newsletters (nach dem Headerbild) ein pro Ausgabe individuell geschriebenes Editorial von den Autoren, die die Inhalte zusammengestellt haben. So wird viel klarer, dass die Inhalte handverlesen und sorgfältig ausgesucht wurden. Am Ende des Newsletters erhält man eine Liste der NL-Redaktion und Querlinks, um sich noch genauer über die Personen informieren zu können. Auf manchen Newslettern (mit festen Hosts) sind die Autoren so primär auf den Headerbildern platziert, sodass der Newsletter unverwechselbar mit dieser Person verbunden wird.
Klares, doch modernes Design für die jüngere Zielgruppe
Die redaktionellen Inhalte für eine jüngere Zielgruppe kompakter gehalten (Smart-Brevity), um sie täglich in ihren eng getakteten Zeitplänen zwischen Arbeit und Familie zu ihren Lokalnews zu informieren. Das Design unterstützt diesen Ansatz mit einer klaren Nutzerführung.
Meine Rolle im Projekt
Meine zentrale Aufgabe war es, als Schnittstelle für die visuelle Gestaltung des Newsletter-Templates zu agieren. Ich kommunizierte mit dem Projekt- und Entwicklungsteam und war für die Konzeption der Smart-Darstellung verantwortlich. Dabei integrierte ich das Design in ein übergeordnetes Newsletter-Layout, das für alle Regionen und Themen funktioniert. Ich entwickelte verschiedene Smart-Versionen für unterschiedliche Inhalte, wie zum Beispiel redaktionelle Artikel, Bilder, Events oder Infografiken, und passte die gesamte visuelle Sprache an das RND-Design an.
Heute optimiere ich die Designs, erstelle alle notwendigen grafischen Elemente wie Infografiken, Illustrationen und Icons und gestalte die Werbemittel für die Newsletter. Außerdem agiere ich als 3rd Level Support für die Entwicklung, nehme Designänderungen ab und gebe neue Designs vor.
Meine Aufgabengebiete im Überblick:
Design-Konzeption der Smarts und des Newsletter-Layouts
Pitch- & Präsentationsdesign
UI Design
Stakeholder-Management
3rd Level Support
Headergrafiken
Grafikdesign für die Inhalte
Vermarktungsdesign für die Newsletter (Print und Digital)
…
Projektbeschreibung
Das übergeordnete Ziel ist die Entwicklung eines, "smarten" journalistischen Formats (Smart-Brevity-Ansatz), das eine eigene visuelle Identität erhält. Dieses Produkt soll von Anfang an crossmedial gedacht werden, sodass seine visuelle Identität konsistent auf verschiedenen Kanälen wie Web, Social Media und in Newslettern beibehalten wird. Das neue Format wird zunächst in eine Newsletter-Umgebung integriert. 2025 konnten die Produkte "5in5" und "Politik in" veröffentlicht werden. Seitdem konnten auch weitere Formate, wie Freizeit-Newsletter, Sport-Newsletter oder spezielle Themen-Newsletter adaptiert werden.
Herausforderungen
Darstellung in E-Mail Clients
Eine der größten technischen Herausforderungen ist die Darstellung des Designs auf einer Vielzahl von Systemen, Plattformen und E-Mail-Clients. Da in E-Mail-Clients keine Effekte möglich sind, müssen die Designmöglichkeiten stark reduziert werden, um eine konsistente und funktionale Darstellung zu gewährleisten.
Schnelle Integration von Bildern mit schlechterer Qualität
Eine weitere wichtige Herausforderung ist die visuelle Integration von Bildmaterial: Da lokaler Bild-Content von den Redaktionen oft unter Zeitdruck entsteht und nicht immer die höchste Qualität aufweist, muss das Design auch mit weniger ansprechenden Bildern überzeugen und sie gekonnt in Szene setzen.
Automatisierung und Schnelligkeit
Bis jetzt müssen 13 Lokalredaktionen mit dem UI arbeiten können und Inhalte müssen untergebracht werden – ohne Qualitätsverlust. Das UI muss für neue Newsletter erweiterbar angelegt sein. Mit über 50 lokalen "5in5" Ausgaben muss ein Großteil des Prozesses automatisiert werden, beispielsweise durch die automatische Befüllung von lokalen Schlagzeilen. Das Design soll einerseits den Stil des RND widerspiegeln, sich aber gleichzeitig von bestehenden Formaten abheben. Die Newsletter kommen jeden Wochentag 5.55 Uhr heraus. Das UI muss schnell auch improvisierte Inhalte aushalten können.
Autorenmarke stärken
Die Autoren sollen als täglichen Wegbegleiter der Leser etabliert und in den Vordergrund gestellt werden.
Neue Zielgruppen erschließen
Die Newsletter sollen eine jüngere Zielgruppe abholen, um das nachwachsende Publikum zu integrieren. Während der Verlag aktuell vor allem Leser der Altersgruppe Ü50 anspricht, ist es das Ziel, mit dem neuen Format eine neue Zielgruppe von 35 bis 45 Jahren zu erreichen.
Lösungsansatz
Crossmediale Darstellung
Die Smart-Umgebung kann je nach Kanal variieren: Während sie im E-Mail-Client statisch dargestellt wird, kann sie im Web animiert sein und so das volle Potenzial der visuellen Identität ausschöpfen.
KISS-Prinzip (Keep it simple)
Unser Lösungsansatz besteht darin, das "Smart"-Format als visuelle Karte zu konzipieren. Diese Karten weisen in jedem Kanal die gleiche grundlegende Struktur und visuelle Darstellung auf. Der Aufbau ist bewusst simpel gehalten, um den redaktionellen Inhalt in den Vordergrund zu stellen. Die Elemente funktionieren statisch, können aber später um Animationen, wie zum Beispiel eine Kartendrehung, erweitert werden.
Redaktionelle Integration via WYSIWYG-Editor
Das Team von RND hat für die Redaktionen eine WYSIWYG-Editor (ARC) Umgebung geschaffen, in der die Redakteure den Newsletter so sehen, wie er am Ende ausgespielt wird. Ich habe bei der Optimierung für die Redaktionen als UI Designerin unterstützt.
Persönlicher Autorenbezug
Die Lesenden erhalten direkt nach dem Öffnen des Newsletters (nach dem Headerbild) ein pro Ausgabe individuell geschriebenes Editorial von den Autoren, die die Inhalte zusammengestellt haben. So wird viel klarer, dass die Inhalte handverlesen und sorgfältig ausgesucht wurden. Am Ende des Newsletters erhält man eine Liste der NL-Redaktion und Querlinks, um sich noch genauer über die Personen informieren zu können. Auf manchen Newslettern (mit festen Hosts) sind die Autoren so primär auf den Headerbildern platziert, sodass der Newsletter unverwechselbar mit dieser Person verbunden wird.
Klares, doch modernes Design für die jüngere Zielgruppe
Die redaktionellen Inhalte für eine jüngere Zielgruppe kompakter gehalten (Smart-Brevity), um sie täglich in ihren eng getakteten Zeitplänen zwischen Arbeit und Familie zu ihren Lokalnews zu informieren. Das Design unterstützt diesen Ansatz mit einer klaren Nutzerführung.
Meine Rolle
Meine zentrale Aufgabe war es, als Schnittstelle für die visuelle Gestaltung des Newsletter-Templates zu agieren. Ich kommunizierte mit dem Projekt- und Entwicklungsteam und war für die Konzeption der Smart-Darstellung verantwortlich. Dabei integrierte ich das Design in ein übergeordnetes Newsletter-Layout, das für alle Regionen und Themen funktioniert. Ich entwickelte verschiedene Smart-Versionen für unterschiedliche Inhalte, wie zum Beispiel redaktionelle Artikel, Bilder, Events oder Infografiken, und passte die gesamte visuelle Sprache an das RND-Design an.
Heute optimiere ich die Designs, erstelle alle notwendigen grafischen Elemente wie Infografiken, Illustrationen und Icons und gestalte die Werbemittel für die Newsletter. Außerdem agiere ich als 3rd Level Support für die Entwicklung, nehme Designänderungen ab und gebe neue Designs vor.
Meine Aufgabengebiete im Überblick:
Design-Konzeption der Smarts und des Newsletter-Layouts
Pitch- & Präsentationsdesign
UI Design
Stakeholder-Management
3rd Level Support
Headergrafiken
Grafikdesign für die Inhalte
Vermarktungsdesign für die Newsletter (Print und Digital)
…
Projektbeschreibung
Das übergeordnete Ziel ist die Entwicklung eines, "smarten" journalistischen Formats (Smart-Brevity-Ansatz), das eine eigene visuelle Identität erhält. Dieses Produkt soll von Anfang an crossmedial gedacht werden, sodass seine visuelle Identität konsistent auf verschiedenen Kanälen wie Web, Social Media und in Newslettern beibehalten wird. Das neue Format wird zunächst in eine Newsletter-Umgebung integriert. 2025 konnten die Produkte "5in5" und "Politik in" veröffentlicht werden. Seitdem konnten auch weitere Formate, wie Freizeit-Newsletter, Sport-Newsletter oder spezielle Themen-Newsletter adaptiert werden.
Herausforderungen
Darstellung in E-Mail Clients
Eine der größten technischen Herausforderungen ist die Darstellung des Designs auf einer Vielzahl von Systemen, Plattformen und E-Mail-Clients. Da in E-Mail-Clients keine Effekte möglich sind, müssen die Designmöglichkeiten stark reduziert werden, um eine konsistente und funktionale Darstellung zu gewährleisten.
Schnelle Integration von Bildern mit schlechterer Qualität
Eine weitere wichtige Herausforderung ist die visuelle Integration von Bildmaterial: Da lokaler Bild-Content von den Redaktionen oft unter Zeitdruck entsteht und nicht immer die höchste Qualität aufweist, muss das Design auch mit weniger ansprechenden Bildern überzeugen und sie gekonnt in Szene setzen.
Automatisierung und Schnelligkeit
Bis jetzt müssen 13 Lokalredaktionen mit dem UI arbeiten können und Inhalte müssen untergebracht werden – ohne Qualitätsverlust. Das UI muss für neue Newsletter erweiterbar angelegt sein. Mit über 50 lokalen "5in5" Ausgaben muss ein Großteil des Prozesses automatisiert werden, beispielsweise durch die automatische Befüllung von lokalen Schlagzeilen. Das Design soll einerseits den Stil des RND widerspiegeln, sich aber gleichzeitig von bestehenden Formaten abheben. Die Newsletter kommen jeden Wochentag 5.55 Uhr heraus. Das UI muss schnell auch improvisierte Inhalte aushalten können.
Autorenmarke stärken
Die Autoren sollen als täglichen Wegbegleiter der Leser etabliert und in den Vordergrund gestellt werden.
Neue Zielgruppen erschließen
Die Newsletter sollen eine jüngere Zielgruppe abholen, um das nachwachsende Publikum zu integrieren. Während der Verlag aktuell vor allem Leser der Altersgruppe Ü50 anspricht, ist es das Ziel, mit dem neuen Format eine neue Zielgruppe von 35 bis 45 Jahren zu erreichen.
Lösungsansatz
Crossmediale Darstellung
Die Smart-Umgebung kann je nach Kanal variieren: Während sie im E-Mail-Client statisch dargestellt wird, kann sie im Web animiert sein und so das volle Potenzial der visuellen Identität ausschöpfen.
KISS-Prinzip (Keep it simple)
Unser Lösungsansatz besteht darin, das "Smart"-Format als visuelle Karte zu konzipieren. Diese Karten weisen in jedem Kanal die gleiche grundlegende Struktur und visuelle Darstellung auf. Der Aufbau ist bewusst simpel gehalten, um den redaktionellen Inhalt in den Vordergrund zu stellen. Die Elemente funktionieren statisch, können aber später um Animationen, wie zum Beispiel eine Kartendrehung, erweitert werden.
Redaktionelle Integration via WYSIWYG-Editor
Das Team von RND hat für die Redaktionen eine WYSIWYG-Editor (ARC) Umgebung geschaffen, in der die Redakteure den Newsletter so sehen, wie er am Ende ausgespielt wird. Ich habe bei der Optimierung für die Redaktionen als UI Designerin unterstützt.
Persönlicher Autorenbezug
Die Lesenden erhalten direkt nach dem Öffnen des Newsletters (nach dem Headerbild) ein pro Ausgabe individuell geschriebenes Editorial von den Autoren, die die Inhalte zusammengestellt haben. So wird viel klarer, dass die Inhalte handverlesen und sorgfältig ausgesucht wurden. Am Ende des Newsletters erhält man eine Liste der NL-Redaktion und Querlinks, um sich noch genauer über die Personen informieren zu können. Auf manchen Newslettern (mit festen Hosts) sind die Autoren so primär auf den Headerbildern platziert, sodass der Newsletter unverwechselbar mit dieser Person verbunden wird.
Klares, doch modernes Design für die jüngere Zielgruppe
Die redaktionellen Inhalte für eine jüngere Zielgruppe kompakter gehalten (Smart-Brevity), um sie täglich in ihren eng getakteten Zeitplänen zwischen Arbeit und Familie zu ihren Lokalnews zu informieren. Das Design unterstützt diesen Ansatz mit einer klaren Nutzerführung.
Meine Rolle im Projekt
Meine zentrale Aufgabe war es, als Schnittstelle für die visuelle Gestaltung des Newsletter-Templates zu agieren. Ich kommunizierte mit dem Projekt- und Entwicklungsteam und war für die Konzeption der Smart-Darstellung verantwortlich. Dabei integrierte ich das Design in ein übergeordnetes Newsletter-Layout, das für alle Regionen und Themen funktioniert. Ich entwickelte verschiedene Smart-Versionen für unterschiedliche Inhalte, wie zum Beispiel redaktionelle Artikel, Bilder, Events oder Infografiken, und passte die gesamte visuelle Sprache an das RND-Design an.
Heute optimiere ich die Designs, erstelle alle notwendigen grafischen Elemente wie Infografiken, Illustrationen und Icons und gestalte die Werbemittel für die Newsletter. Außerdem agiere ich als 3rd Level Support für die Entwicklung, nehme Designänderungen ab und gebe neue Designs vor.
Meine Aufgabengebiete im Überblick:
Design-Konzeption der Smarts und des Newsletter-Layouts
Pitch- & Präsentationsdesign
UI Design
Stakeholder-Management
3rd Level Support
Headergrafiken
Grafikdesign für die Inhalte
Vermarktungsdesign für die Newsletter (Print und Digital)
…
User-Intent-Analyse
Als UI-Designerin muss ich viele Bedürfnisse im Rahmen der Newsletter-Entwicklung abdecken können. An erster Stelle stehen natürlich die Bedürfnisse der Endnutzer (Leser:innen). Doch auch die Redaktion und die Entwicklung müssen berücksichtigt werden. Hier ein Ausschnitt:
"Ich möchte lokale, für mich relevante News schnell und übersichtlich lesen können – jeden Tag".
Abonennt:innen
"Ich möchte die NL-Inhalte möglichst schnell und hürdenfrei in das Template einfügen können."
Redakteur:innen
"Das Design sollte in den meisten Email-Clients sauber und technisch einwandfrei umsetzbar sein."
Entwickler:innen
User-Intent-Analyse
Als UI-Designerin muss ich viele Bedürfnisse im Rahmen der Newsletter-Entwicklung abdecken können. An erster Stelle stehen natürlich die Bedürfnisse der Endnutzer (Leser:innen). Doch auch die Redaktion und die Entwicklung müssen berücksichtigt werden. Hier ein Ausschnitt:
"Ich möchte lokale, für mich relevante News schnell und übersichtlich lesen können – jeden Tag".
Abonennt:innen
"Ich möchte die NL-Inhalte möglichst schnell und hürdenfrei in das Template einfügen können."
Redakteur:innen
"Das Design sollte in den meisten Email-Clients sauber und technisch einwandfrei umsetzbar sein."
Entwickler:innen
User-Intent-Analyse
Als UI-Designerin muss ich viele Bedürfnisse im Rahmen der Newsletter-Entwicklung abdecken können. An erster Stelle stehen natürlich die Bedürfnisse der Endnutzer (Leser:innen). Doch auch die Redaktion und die Entwicklung müssen berücksichtigt werden. Hier ein Ausschnitt:
"Ich möchte lokale, für mich relevante News schnell und übersichtlich lesen können – jeden Tag".
Abonennt:innen
"Das Design sollte in den meisten Email-Clients sauber und technisch einwandfrei umsetzbar sein."
Entwickler:innen
"Ich möchte die NL-Inhalte möglichst schnell und hürdenfrei in das Template einfügen können."
Redakteur:innen
„Ich möchte mit einem Klick zum vollständigen Artikel kommen und nicht suchen, wo der Link versteckt ist."
Abonennt:innen
Ideenfindung
Zu Beginn gab es nichts, außer eine grobe Zielgruppe: Leser zwischen 35 bis 50 lesen den Newsletter morgens als erste Nachrichtenquelle vom Tag auf dem Weg zur Arbeit oder Kita. Noch kein CD oder Gestaltungsvorgaben, deshalb konnte ich mich gestalterisch unabhängig hineindenken.
Ideenfindung
Zu Beginn gab es nichts, außer eine grobe Zielgruppe: Leser zwischen 35 bis 50 lesen den Newsletter morgens als erste Nachrichtenquelle vom Tag auf dem Weg zur Arbeit oder Kita. Noch kein CD oder Gestaltungsvorgaben, deshalb konnte ich mich gestalterisch unabhängig hineindenken.
Annomé
Annomé
Meine Lieblingsbeschäftigungen sind Törtchen essen und Abenteuer erleben. Ansonsten versinke ich gerne mal in meiner chaotischen Gedankenwelt.
Art:
Elfe
Eigenschaft
Schusselig
Liebt:
Jung
Carlotta
Carlotta
Ich liebt es, auf meinem Besen Speedy mit Höchstgeschwindigkeit durch den Wald zu fliegen. Immer dabei, mein Zauberrucksack Wumpi.
Art:
Hexe
Eigenschaft
Taff
Liebt:
Jung
Meelan
Meelan
Meine Herkunft ist ein großes Geheimnis, denn ich bin ein Findelkind. Das wertvollste Geschenk in meinem Leben sind meine Freunde, die immer für mich da sind.
Art:
Halb-Elf
Eigenschaft
loyal
Liebt:
Jung
Farina
Farina
Ich bin der ruhende Pool in unserer Freundesgruppe. Das einzige was mich manchmal nervt, ist das vornehme Getue von Jasper.
Art:
Einhorn
Eigenschaft
Gelassen
Liebt:
Erwachsen
Thilion
Thilion
Ich bin ein Elfenprinz. Mein Gefährte Aragon ist ein Geschenk des Himmels und steckt voller Geheimnisse.
Art:
Elfe
Eigenschaft
Selbstbewusst
Liebt:
Jung
Jasper
Jasper
Ich bin von königlicher Abstammung. Für mich gibt es nichts Schöneres als Wissen zu sammeln, ich bin quasi ein wandelndes Lexikon.
Art:
Einhorn
Eigenschaft
Schlau
Liebt:
Jung
Fips und Sir Wieselflink
Fips und Sir Wieselflink
Wahrscheinlich bin ich der kleinste zwerg auf dem Planeten. Dank meinem Freund Sir Wieselflink kann ich in Windeseile durch den Anderswald reiten.
Art:
Zwerg
Eigenschaft
Klein
Liebt:
Jung
Ogelot
Ogelot
Ogelot ist ein finsterer Gesell aus dem Anderswald, der den Freunden immer wieder Steine in den Weg legt. Doch warum?
Art:
Zauberer
Eigenschaft
???
Liebt:
???
Wireframes
Vor dem Design wurden die ersten Ideen zu den Screens grob skizziert und besprochen. Fokus lag hierbei auf das journalistische Format des Smarts (Smart Brevity Ansatz) und die Integration in ein einladendes Grundlayout. Zunächst wurde ein Basissmart (reiner Text) entwickelt (siehe unten):
Wireframes
Vor dem Design wurden die ersten Ideen zu den Screens grob skizziert und besprochen. Fokus lag hierbei auf das journalistische Format des Smarts (Smart Brevity Ansatz) und die Integration in ein einladendes Grundlayout. Zunächst wurde ein Basissmart (reiner Text) entwickelt (siehe unten):
Design System
Ein gut gepflegtes Designsystem beginnt bei mir nicht mit finaler Freigabe, sondern wird zu Beginn der Arbeit angelegt, um direkt struturiert arbeiten zu können.
Tokenbibliothek
Nahtlose Integration in das bestehende RND Design System
Komponentenaufbau in Figma (teilweise mit Slot-Funktion) mit States in Atomic-Design-System
Smart-Templates in verschiedenen Varianten und Multi-Brand
Verhalten in auf verschiedenen Plattformen und Modi (Light/Dark) und responsives Verhalten
Accessibility Check
Namenskonventionen und Dokumentation (innerhalb von Figma)
Design System
Ein gut gepflegtes Designsystem beginnt bei mir nicht mit finaler Freigabe, sondern wird zu Beginn der Arbeit angelegt, um direkt struturiert arbeiten zu können.
Tokenbibliothek
Nahtlose Integration in das bestehende RND Design System
Komponentenaufbau in Figma (teilweise mit Slot-Funktion) mit States in Atomic-Design-System
Smart-Templates in verschiedenen Varianten und Multi-Brand
Verhalten in auf verschiedenen Plattformen und Modi (Light/Dark) und responsives Verhalten
Accessibility Check
Namenskonventionen und Dokumentation (innerhalb von Figma)
Design System
Ein gut gepflegtes Designsystem beginnt bei mir nicht mit finaler Freigabe, sondern wird zu Beginn der Arbeit angelegt, um direkt struturiert arbeiten zu können.
Tokenbibliothek
Nahtlose Integration in das bestehende RND Design System
Komponentenaufbau in Figma (teilweise mit Slot-Funktion) mit States in Atomic-Design-System
Smart-Templates in verschiedenen Varianten und Multi-Brand
Verhalten in auf verschiedenen Plattformen und Modi (Light/Dark) und responsives Verhalten
Accessibility Check
Namenskonventionen und Dokumentation (innerhalb von Figma)
Eine klare Designlinie für vielfältige Anwendungen
Die klare Struktur passt sich gut in das bestehende Design ein und gilt als Basis für weitere Formate. So überdauert das fundierte Design ein dynamisches Firmenumfeld und die immer schneller werdenden Anforderungen an den digitalen Journalismus.
Eine klare Designlinie für vielfältige Anwendungen
Die klare Struktur passt sich gut in das bestehende Design ein und gilt als Basis für weitere Formate. So überdauert das fundierte Design ein dynamisches Firmenumfeld und die immer schneller werdenden Anforderungen an den digitalen Journalismus.
Eine klare Designlinie für vielfältige Anwendungen
Die klare Struktur passt sich gut in das bestehende Design ein und gilt als Basis für weitere Formate. So überdauert das fundierte Design ein dynamisches Firmenumfeld und die immer schneller werdenden Anforderungen an den digitalen Journalismus.
Der Smart
Dies ist das Herzstück der Newsletter. Der Smart ist ein redaktionelles Format nach Smart Brevitiy Ansatz, welches in sich geschlossen ist. Es erzählt Geschichten und News kurz und bündig. Wer mehr wissen möchte, kann über den Call-to-Action zum vollen Artikel gelangen.
Der Smart
Dies ist das Herzstück der Newsletter. Der Smart ist ein redaktionelles Format nach Smart Brevitiy Ansatz, welches in sich geschlossen ist. Es erzählt Geschichten und News kurz und bündig. Leser:innen, die sich tiefergehend informieren möchten, können über den Call-to-Action zum vollen Artikel gelangen.
Haltestellen-Optik
Im Kopfbereich findet man die Überschrift des Smarts. Die besteht optional aus einer Kategorie, einer Überschrift und einem Badge..
Einstieg
Nach der Überschrift, kann ein Bild erscheinen. Dies ist fix in der Breite, flexibel in der Höhe und kleiner, um schwachen Bildern nicht zu viel Raum zu geben.
Zwischenpunkte
Die Zwischenpunkte stellen optische Haltepunkte dar, um den Inhalt möglichst schnell erfassen. Der erste Punkt beleuchtet das "Was?", der zweite Punkt beleuchtet das "Warum?" und der dritte Punkt gib einen Ausblick in die Zukunft.
Hauptteil
Unter dem Einstieg folgt der redaktionelle Text. Wichtig ist, dass die Thematik innerhalb der drei Stichpunkte abgeschlossen (5in5), oder als Fließtext abgeschlossen ist (Politik in).
CTA
Alle Smarts haben eine Endhaltestelle, in der das Absenderlogo zu sehen ist. Der blaue Button leitet den User zu einem Deep-Dive auf der Absenderseite. Darunter sieht man Share Icons, die den Deep-Dive Link teilen.
Haltestellen-Optik
Im Kopfbereich findet man die Überschrift des Smarts. Die besteht optional aus einer Kategorie, einer Überschrift und einem Badge..
Einstieg
Nach der Überschrift, kann ein Bild erscheinen. Dies ist fix in der Breite, flexibel in der Höhe und kleiner, um schwachen Bildern nicht zu viel Raum zu geben.
Zwischenpunkte
Die Zwischenpunkte stellen optische Haltepunkte dar, um den Inhalt möglichst schnell erfassen. Der erste Punkt beleuchtet das "Was?", der zweite Punkt beleuchtet das "Warum?" und der dritte Punkt gib einen Ausblick in die Zukunft.
Hauptteil
Unter dem Einstieg folgt der redaktionelle Text. Wichtig ist, dass die Thematik innerhalb der drei Stichpunkte abgeschlossen (5in5), oder als Fließtext abgeschlossen ist (Politik in).
CTA
Alle Smarts haben eine Endhaltestelle, in der das Absenderlogo zu sehen ist. Der blaue Button leitet den User zu einem Deep-Dive auf der Absenderseite. Darunter sieht man Share Icons, die den Deep-Dive Link teilen.
Haltestellen-Optik
Im Kopfbereich findet man die Überschrift des Smarts. Die besteht optional aus einer Kategorie, einer Überschrift und einem Badge..
Einstieg
Nach der Überschrift, kann ein Bild erscheinen. Dies ist fix in der Breite, flexibel in der Höhe und kleiner, um schwachen Bildern nicht zu viel Raum zu geben.
Zwischenpunkte
Die Zwischenpunkte stellen optische Haltepunkte dar, um den Inhalt möglichst schnell erfassen. Der erste Punkt beleuchtet das "Was?", der zweite Punkt beleuchtet das "Warum?" und der dritte Punkt gib einen Ausblick in die Zukunft.
Hauptteil
Unter dem Einstieg folgt der redaktionelle Text. Wichtig ist, dass die Thematik innerhalb der drei Stichpunkte abgeschlossen (5in5), oder als Fließtext abgeschlossen ist (Politik in).
CTA
Alle Smarts haben eine Endhaltestelle, in der das Absenderlogo zu sehen ist. Der blaue Button leitet den User zu einem Deep-Dive auf der Absenderseite. Darunter sieht man Share Icons, die den Deep-Dive Link teilen.
Haltestellen-Optik
Im Kopfbereich findet man die Überschrift des Smarts. Die besteht optional aus einer Kategorie, einer Überschrift und einem Badge..
Einstieg
Nach der Überschrift, kann ein Bild erscheinen. Dies ist fix in der Breite, flexibel in der Höhe und kleiner, um schwachen Bildern nicht zu viel Raum zu geben.
Zwischenpunkte
Die Zwischenpunkte stellen optische Haltepunkte dar, um den Inhalt möglichst schnell erfassen. Der erste Punkt beleuchtet das "Was?", der zweite Punkt beleuchtet das "Warum?" und der dritte Punkt gib einen Ausblick in die Zukunft.
Hauptteil
Unter dem Einstieg folgt der redaktionelle Text. Wichtig ist, dass die Thematik innerhalb der drei Stichpunkte abgeschlossen (5in5), oder als Fließtext abgeschlossen ist (Politik in).
CTA
Alle Smarts haben eine Endhaltestelle, in der das Absenderlogo zu sehen ist. Der blaue Button leitet den User zu einem Deep-Dive auf der Absenderseite. Darunter sieht man Share Icons, die den Deep-Dive Link teilen.
Der Smart
Dies ist das Herzstück der Newsletter. Der Smart ist ein redaktionelles Format nach Smart Brevitiy Ansatz, welches in sich geschlossen ist. Es erzählt Geschichten und News kurz und bündig. Wer mehr wissen möchte, kann über den Call-to-Action zum vollen Artikel gelangen.
Wireframes
Vor dem Design wurden die ersten Ideen zu den Screens grob skizziert und besprochen. Fokus lag hierbei auf das journalistische Format des Smarts (Smart Brevity Ansatz) und die Integration in ein einladendes Grundlayout. Zunächst wurde ein Basissmart (reiner Text) entwickelt (siehe unten):
Wireframes
Vor dem Design wurden die ersten Ideen zu den Screens grob skizziert und besprochen. Fokus lag hierbei auf das journalistische Format des Smarts (Smart Brevity Ansatz) und die Integration in ein einladendes Grundlayout. Zunächst wurde ein Basissmart (reiner Text) entwickelt (siehe unten):
Headerbilder
Für alle Newsletter wurden Headerbilder entwickelt, die im Kern den gleichen Aufbau haben, jedoch zwei für die Region typische Bilder beinhaltet. Diese wurden eng mit den jeweiligen Lokalredaktionen abgestimmt, damit die Leser*innen vor Ort sich und ihre Region darin direkt wiederfinden.
Wortmarke
Sie bestehen aus den Markenfonts von RND. Der Newslettername ist je Familie immer gleich, die Unterzeile zeigt an über welche Region der Newsletter informiert.
Absender
Mittig sieht man das Logo der Lokalredaktion. Die Hintergrundfarbe richtet sich nach der Hauptfarbe des Herausgebers.
Freisteller
Jede Region hat im Vordergrund einen Freisteller mit einer typischen Sache vor Ort.
Hintergrundbild
Im Hintergrund sieht man ein Bild aus der Region im Duotone, um die Farbigkeit klar zu halten.
Gitter
Das Karogitter spart die Textflächen aus.
Headerbilder
Für alle Newsletter wurden Headerbilder entwickelt, die im Kern den gleichen Aufbau haben, jedoch zwei für die Region typische Bilder beinhaltet. Diese wurden eng mit den jeweiligen Lokalredaktionen abgestimmt, damit die Leser*innen vor Ort sich und ihre Region darin direkt wiederfinden.
Wortmarke
Sie bestehen aus den Markenfonts von RND. Der Newslettername ist je Familie immer gleich, die Unterzeile zeigt an über welche Region der Newsletter informiert.
Absender
Mittig sieht man das Logo der Lokalredaktion. Die Hintergrundfarbe richtet sich nach der Hauptfarbe des Herausgebers.
Freisteller
Jede Region hat im Vordergrund einen Freisteller mit einer typischen Sache vor Ort.
Hintergrundbild
Im Hintergrund sieht man ein Bild aus der Region im Duotone, um die Farbigkeit klar zu halten.
Gitter
Das Karogitter spart die Textflächen aus.
Headerbilder
Für alle Newsletter wurden Headerbilder entwickelt, die im Kern den gleichen Aufbau haben, jedoch zwei für die Region typische Bilder beinhaltet. Diese wurden eng mit den jeweiligen Lokalredaktionen abgestimmt, damit die Leser*innen vor Ort sich und ihre Region darin direkt wiederfinden.
Wortmarke
Sie bestehen aus den Markenfonts von RND. Der Newslettername ist je Familie immer gleich, die Unterzeile zeigt an über welche Region der Newsletter informiert.
Absender
Mittig sieht man das Logo der Lokalredaktion. Die Hintergrundfarbe richtet sich nach der Hauptfarbe des Herausgebers.
Freisteller
Jede Region hat im Vordergrund einen Freisteller mit einer typischen Sache vor Ort.
Hintergrundbild
Im Hintergrund sieht man ein Bild aus der Region im Duotone, um die Farbigkeit klar zu halten.
Gitter
Das Karogitter spart die Textflächen aus.
Wireframes
Vor dem Design wurden die ersten Ideen zu den Screens grob skizziert und besprochen. Fokus lag hierbei auf das journalistische Format des Smarts (Smart Brevity Ansatz) und die Integration in ein einladendes Grundlayout. Zunächst wurde ein Basissmart (reiner Text) entwickelt (siehe unten):
Wireframes
Vor dem Design wurden die ersten Ideen zu den Screens grob skizziert und besprochen. Fokus lag hierbei auf das journalistische Format des Smarts (Smart Brevity Ansatz) und die Integration in ein einladendes Grundlayout. Zunächst wurde ein Basissmart (reiner Text) entwickelt (siehe unten):
Dark Mode
Die Smarts sollten auch im Dark Mode hell dargestellt werden, um sich vom restlichen Inhalt abzugrenzen. Die Herausforderung bestand im Dark Mode und der Ausspielung in den Email Clients. Jeder Client geht anders mit dem Dark Mode um und manche erzwingen ihn. Ich habe die Elemente so angelegt, dass alle im erzwungenen Dark Mode gut erkennbar sind – sowohl in der mobilen, wie auch der Desktop Ansicht.
Dark Mode
Die Smarts sollten auch im Dark Mode hell dargestellt werden, um sich vom restlichen Inhalt abzugrenzen. Die Herausforderung bestand im Dark Mode und der Ausspielung in den Email Clients. Jeder Client geht anders mit dem Dark Mode um und manche erzwingen ihn. Ich habe die Elemente so angelegt, dass alle im erzwungenen Dark Mode gut erkennbar sind – sowohl in der mobilen, wie auch der Desktop Ansicht.
Dark Mode
Die Smarts sollten auch im Dark Mode hell dargestellt werden, um sich vom restlichen Inhalt abzugrenzen. Die Herausforderung bestand im Dark Mode und der Ausspielung in den Email Clients. Jeder Client geht anders mit dem Dark Mode um und manche erzwingen ihn. Ich habe die Elemente so angelegt, dass alle im erzwungenen Dark Mode gut erkennbar sind – sowohl in der mobilen, wie auch der Desktop Ansicht.
Wireframes
Vor dem Design wurden die ersten Ideen zu den Screens grob skizziert und besprochen. Fokus lag hierbei auf das journalistische Format des Smarts (Smart Brevity Ansatz) und die Integration in ein einladendes Grundlayout. Zunächst wurde ein Basissmart (reiner Text) entwickelt (siehe unten):
Wireframes
Vor dem Design wurden die ersten Ideen zu den Screens grob skizziert und besprochen. Fokus lag hierbei auf das journalistische Format des Smarts (Smart Brevity Ansatz) und die Integration in ein einladendes Grundlayout. Zunächst wurde ein Basissmart (reiner Text) entwickelt (siehe unten):
Anzeigenplatzierung
Ein wichtiger Aspekt in der UI Entwicklung war die Möglichkeit Anzeigen zu platzieren. Dafür habe ich die bisher genutzten Anzeigenformate optimiert und an den Style angepasst, sodass sie möglichst nativ aussehen (Native Ads). Es sind nun vier Anzeigenplatzierungen innerhalb des Newsletters möglich. Eine weitere Sonderanzeige kann direkt am Startpunkt über dem Headerbild angegeben werden (Pos 0). Damit diese nicht zu viel vom ersten Viewport wegnimmt, wird sie im schmalen Bannerformat ausgespielt.
Anzeigenplatzierung
Ein wichtiger Aspekt in der UI Entwicklung war die Möglichkeit Anzeigen zu platzieren. Dafür habe ich die bisher genutzten Anzeigenformate optimiert und an den Style angepasst, sodass sie möglichst nativ aussehen (Native Ads). Es sind nun vier Anzeigenplatzierungen innerhalb des Newsletters möglich. Eine weitere Sonderanzeige kann direkt am Startpunkt über dem Headerbild angegeben werden (Pos 0). Damit diese nicht zu viel vom ersten Viewport wegnimmt, wird sie im schmalen Bannerformat ausgespielt.
Anzeigenplatzierung
Ein wichtiger Aspekt in der UI Entwicklung war die Möglichkeit Anzeigen zu platzieren. Dafür habe ich die bisher genutzten Anzeigenformate optimiert und an den Style angepasst, sodass sie möglichst nativ aussehen (Native Ads). Es sind nun vier Anzeigenplatzierungen innerhalb des Newsletters möglich. Eine weitere Sonderanzeige kann direkt am Startpunkt über dem Headerbild angegeben werden (Pos 0). Damit diese nicht zu viel vom ersten Viewport wegnimmt, wird sie im schmalen Bannerformat ausgespielt.
Ergebnisse und Learnings
0+
0+
Newsletter in Deutschland umgesetzt
0
0
Newsletter-Familien wurden mit dem UI entwickelt
0k+
0k+
Leser*innen erhalten jeden Wochentag die Newsletter
0
0
Lokalredaktionen arbeiten mit dem UI
0%
0%
Klickrate im Newsletter (z. B. auf Paid-Artikel)
Einschränkungen durch E-Mail-Clients
Bei der Umsetzung des Designs konnten verschiedene Funktionen nur in manchen E-Mail-Clients richtig umgesetzt werden. Deshalb musste das Design immer weiter vereinfacht werden, damit es bei allen Clients einheitlich aussieht.
Fokus auf den Inhalt
Das Design versucht sich so weit zurückzunehmen, sodass es nicht vom journalistischen Inhalt ablenkt und doch alle Infos abbildet.
Form follows function
Schöne Elemente (wie z. B. Illustrationen oder besondere Bildformate) funktionieren bei fest desigten Elementen, sind aber zu fehleranfällig für dynamische Elemente. Zum Beispiel das Headerbild wird an unterschiedlichen Platzierungen im RND Kosmos genutzt und sollte deshalb ein möglichst gängiges Format haben.
Ergebnisse und Learnings
0+
0+
Newsletter in Deutschland umgesetzt
0
0
Newsletter-Familien wurden mit dem UI entwickelt
0k+
0k+
Leser*innen erhalten jeden Wochentag die Newsletter
0
0
Lokalredaktionen arbeiten mit dem UI
0%
0%
Klickrate im Newsletter (z. B. auf Paid-Artikel)
Einschränkungen durch E-Mail-Clients
Bei der Umsetzung des Designs konnten verschiedene Funktionen nur in manchen E-Mail-Clients richtig umgesetzt werden. Deshalb musste das Design immer weiter vereinfacht werden, damit es bei allen Clients einheitlich aussieht.
Fokus auf den Inhalt
Das Design versucht sich so weit zurückzunehmen, sodass es nicht vom journalistischen Inhalt ablenkt und doch alle Infos abbildet.
Form follows function
Schöne Elemente (wie z. B. Illustrationen oder besondere Bildformate) funktionieren bei fest desigten Elementen, sind aber zu fehleranfällig für dynamische Elemente. Zum Beispiel das Headerbild wird an unterschiedlichen Platzierungen im RND Kosmos genutzt und sollte deshalb ein möglichst gängiges Format haben.
Wireframes
Vor dem Design wurden die ersten Ideen zu den Screens grob skizziert und besprochen. Fokus lag hierbei auf das journalistische Format des Smarts (Smart Brevity Ansatz) und die Integration in ein einladendes Grundlayout. Zunächst wurde ein Basissmart (reiner Text) entwickelt (siehe unten):
Wireframes
Vor dem Design wurden die ersten Ideen zu den Screens grob skizziert und besprochen. Fokus lag hierbei auf das journalistische Format des Smarts (Smart Brevity Ansatz) und die Integration in ein einladendes Grundlayout. Zunächst wurde ein Basissmart (reiner Text) entwickelt (siehe unten):
Social Media Konzeption
Entwicklung eines professionellen und kohärenten Social-Media-Templates für die tägliche Nutzung auf Instagram, Facebook und LinkedIn für das Helmholtz Institute Munich.
Zirkulares Webdesign
Entwurf eines alternativen Leitsystems für die Website des Herstellers von Verbänden und Orthesen.