Gute Gesellschaft: So nutzen Verlage Figma für Nachrichten
Bei vertrauenswürdigen Titeln wie The New York Times, The Economist und The Minnesota Star Tribune kann großartiges Design großen Journalismus unterstützen. So nutzen Medienteams Figma, um bei der Nachrichten-Gestaltung zusammenzuarbeiten und neue Formate zu erkunden.
Gute Gesellschaft: So nutzen Verlage Figma für Nachrichten teilen
Hero-Illustration von André Derainne
Zwischen Schwenkungen zu Web und Mobil sowie Vorstößen in neue Formate hat sich die Nachrichtenmedienbranche in den letzten zwei Jahrzehnten komplett neu erfunden. Während Verlage herausfinden, wie sie in der digitalen Ära gedeihen können, beschleunigt sich das Tempo des Wandels nur noch. In einem unvorhersehbaren Werbemarkt sind abonnementbasierte Strategien im Aufschwung. Obwohl die Leser*innen es gewohnt sind, für Printmedien zu zahlen, sind Onlinenachrichten weit schwieriger zu verkaufen. Für Traditionsverlage stellt dies eine Herausforderung dar: Es geht darum, wie man in diesem sich schnell entwickelnden digitalen und Informationsökosystem Beziehungen zu neuen Leser*innen aufbauen kann.
Um den aktuellen Anforderungen gerecht zu werden, nutzen diese Medienunternehmen Figma. Ob bei der Neugestaltung einer App, der Einführung einer Schriftart oder dem Start einer Website, Teams müssen eng abgestimmt arbeiten, um Genauigkeit, Klarheit und Barrierefreiheit zu gewährleisten, während sie beim Verbreiten von Nachrichten neue Wege ausprobieren. Wir haben uns mit Führungskräften in den Medien zusammengesetzt, um herauszufinden, wie diese den Wandel meistern.
So hat die New York Times eine neu gestaltete App gestartet
Seit dem Start seiner Website in den 1990er-Jahren hat sich The New York Times kontinuierlich als Digital-First-Marke neu erfunden. Das aktuelle Geschäftsmodell konzentriert sich darauf, Abonnenten eines seiner digitalen Produkte – News, Games, Cooking, Audio, Wirecutter und The Athletic –in Abonnenten für alle umzuwandeln. Mit über 11,4 Millionen Gesamtabonnenten, von denen fast die Hälfte für mehr als ein Produkt zahlt, kann man sagen, dass der Ansatz funktioniert.
Als TheTimes die App neu gestaltete, die im Oktober 2024 wieder eingeführt wurde, behielt sie dieses Produktsystem im Mittelpunkt ihrer Strategie. In der vorherigen Version mussten die Leser*innen durch mehrere Unterabschnitte tippen und scrollen, um die gewünschten Artikel und Funktionen zu finden. Jetzt landen die Benutzer*innen in der Heute-Sektion, die die neuesten Nachrichten präsentiert, während die obere Navigation ihnen hilft, andere Sparten und Produkte zu entdecken. Jede hat ihren eigenen Startbildschirm, was es einfacher macht, alles zu entdecken, was TheTimes abseits der Top-Schlagzeilen des Tages bietet. „Die Idee ist, dass sich alle anderen Teile um die Sonne drehen, und die Sonne ist der Journalismus“, sagt Jak Horner, Principal Product Designer bei TheTimes.
Alle anderen Teile drehen sich um die Sonne und die Sonne ist der Journalismus.
Anstatt eine „Super-App“ zu entwickeln, die alle Times-Angebote in einen zentralen Feed einfügt, ermutigt die App die Benutzer*innen, zu anderen Feeds zu scrollen, von denen jeder seine eigene visuelle Identität hat. Der Lifestyle-Bereich beispielsweise präsentiert ein Raster von Bildern mit Überschriften-Überlagerungen – eine Adaption einer visuell orientierten Komponente, die TheTimes als „Plakat“ bezeichnet –, während der Meinungsbereich stilisierte Überschriften bietet, die eine andere Perspektive vermitteln.
Eines der Tools, das das Team genutzt hat, war Figma, um mit dem Umfang, der Komplexität und der Anzahl der beteiligten Stakeholder umzugehen. Ressortleiter*innen, Ingenieur*innen und das Management auf Führungsebene mussten alle asynchron in der Datei arbeiten – zusammen mit der Erzählgruppe: ein Team von Designer*innen, das mit dem Newsroom zusammenarbeitet, um Erzählformate mit Bild, Text, Video und Audio in verschiedenen Layouts zu erstellen. Peter Rentz, Principal Product Designer bei The Times, nennt dies „die Form des Journalismus selbst herausfinden“. Anstelle der Zusammenarbeit über die Schulter, sagt Peter, „ist es mehr, ‚Hey, lass uns in Figma springen.‘ Wir müssen keinen Videoanruf machen oder unseren Bildschirm teilen.“ Im Vergleich zu alten Arbeitsabläufen musste Jak nicht so viele Decks erstellen – stattdessen konnte er Prototypen in Figma teilen.
Das Team schätzt die Möglichkeit, sofort einen Eindruck davon zu bekommen, woran ihre Kolleginnen und Kollegen arbeiten. „Hin und wieder schaue ich bei Jak vorbei, um zu sehen, was er macht, nur um sicherzustellen, dass ich nicht genau das Gleiche tue”, sagt Peter. „Es ist diese nette Art, zusammenzuarbeiten, ohne sich gegenseitig auf die Füße zu treten. Es schafft effizientes Arbeiten.“
Das Designteam führte Brainstormings in FigJam durch und nutzte diese Sitzungen, um Figma-Skizzen für Elemente in jedem Abschnitt der App zu gestalten. Zum Beispiel war es entscheidend für die Editoren, das richtige visuelle Muster für die Berichterstattung über die Präsidentschaftswahl 2024 zu finden, die sich stündlich änderte. Sie diskutierten Fragen wie: Wie stark sollte das Wahl-Panel täglich verändert werden? Was gehört in diesen Abschnitt im Vergleich zu heute? Wie können wir visuelle Elemente hervorheben? Infolge dieser Diskussionen entwickelten die Designer Chen Wu, Nate Clancy und Frannie Ello ein Wahltag-Panel mit einer neuen Videofunktion, die es Benutzer*innen ermöglicht, Berichterstattungen zu streamen.
Chen Wu, Lead Product Designer, und Jay Guillermo, Senior Product Designer der New York Times, sprechen bei der Config 2023 darüber, was es braucht, um „mit der Geschwindigkeit der Nachrichten zu gestalten“. Sieh dir ihre Session hier an.
Während das Designteam versucht, redaktionelle Bedürfnisse mit bestehenden Komponenten zu erfüllen, müssen diese manchmal vom Skript abweichen. „Es gibt dieses Hin und Her bei Designsystemen und der Art, wie wir Komponenten verwenden“, sagt Peter. „Obwohl wir Komponenten im Code haben, sind unsere News-Stakeholder mehr daran interessiert, wie man etwas am besten abdeckt und das beste Erlebnis bietet.“
All dies dient dem Zweck, Designen parallel zur Geschwindigkeit der Nachrichten zu betreiben. „Eine ständige Quelle der Kreativität ist dieses Zusammenspiel zwischen dem Chaos und der Unvorhersehbarkeit der Nachrichten und der Beständigkeit, ein längerfristiges Produkt zu schaffen“, sagt Thea Lorentzen, Leiterin des Produktdesigns bei TheTimes. „Das können wir als Design für Unsicherheit einstufen.“
So führte The Economist eine digitalfreundliche Schriftart ein
The Economistführte Anfang letzten Jahres zwei neue Schriftarten ein, Economist Serif und Economist Sans, sowie ein aktualisiertes Logo. Während die Publikation 2018 einen umfassenderen Neuentwurf durchlief, „geschah dies immer noch im Kontext eines stärker printorientierten Publikums“, sagt Adam Morris, Head of Product Design bei The Economist. Seitdem ist die Leserschaft der Publikation stetig digitaler geworden. Mehr als 65 % der Abonnements sind heute digital-only, im Vergleich zu 35 % vor vier Jahren, und 85 % der neuen Abonnenten sind digital. Mit dem multiplattformorientierten Fokus benötigte The Economist Schriften, die sich überall gut einfügen, während sie gleichzeitig auf das Markenerbe verweisen.
„Es gibt viele verschiedene Kontexte, die 2018 noch keine Priorität hatten“, sagt Adam und stellt fest, dass das Unternehmen seine Newsletter- und App-Leserschaft sowie seine Zielgruppe auf TikTok, LinkedIn und Instagram ausgebaut hat. „Ihre Typografie muss jetzt viel härter arbeiten. Aber das Wesentliche ist, dass die Menschen dafür bezahlen, unsere journalistischen Inhalte zu lesen. Man muss also eine Schriftart haben, die es angenehm macht, sie zu lesen.
Es gibt eine Menge verschiedener Kontexte, die 2018 nicht im Vordergrund standen. Ihre Typografie muss jetzt viel härter arbeiten.
Typograf Henrik Kubel von der Schriftgießerei A2-TYPE arbeitete mit Stephen Petch, dem kreativen Direktor bei The Economist, und Adam und seinem Team zusammen, um die neuen variablen Schriftarten zu erstellen. Die Inspiration kam aus der reichen, 180-jährigen Geschichte der Zeitung: Die Serifenschrift verweist auf Plantin; die serifenlose Schrift auf Venus. Adam und sein Team verließen sich auf Figma, um sicherzustellen, dass jede Buchstabenform in verschiedenen Anwendungsfällen funktioniert, von Diagrammen und Fließtext bis hin zu fetten Überschriften. Manchmal wirkten einzelne Zeichen in der Praxis zu verziert oder störten das Seitenlayout. Ein Beispiel: Das Team ging bei der Länge des Schwanzes des Großbuchstabens „Q“ hin und her, bevor es schließlich drei Versionen entschied, die von einer kurzen für Initialen bis hin zu einer längeren für spezielle Anwendungen, wie eine Überschrift oder eine Firmenfesttagskarte, reichen.
„Mit dem neuen typografischen System und mit Figma können wir überall ein nahtloses Erlebnis bieten“, sagt Mark Mitchell, Principal Product Designer bei The Economist. „Der Schriftmaßstab und das Raster sind flexibel genug, um sich über die Website, die App und die Newsletter hinweg zu skalieren.” Das Team zentralisiert seine Markenschriftarten in einer Grundlagenbibliothek in Figma, was es einfach macht, Änderungen über alle Oberflächen hinweg einzuführen. „Es ist einfach ein besseres Erlebnis und wir haben bessere Kontrolle.”
Für das Redesign 2018 nutzte The Economist Sketch zur Gestaltung von Schnittstellen, InVision zum Erstellen von Prototypen und Zeplin zur Weitergabe an das Ingenieurteam. Für dieses Projekt wurden die Workflows in Figma und Dev Mode konsolidiert, was dem Team half, Änderungen umzusetzen, ohne für verschiedene Programme verschiedene Assets erstellen zu müssen. „Wir arbeiten alle an einem Ort statt mit drei oder vier Tools“, sagt Adam. Das hilft beim Kontextwechsel und spart Kosten, aber vor allem bringt es Geschwindigkeit und einfache Handhabung. Figma hatte, was wir brauchten.“
Das Team nutzt seit dem letzten Jahr in der Mehrheit seiner Projekte den Dev Mode und sieht den größten Nutzen im Inspektions-Tool und dessen Verbindung zu Figma-Variablen. The Economist verwendet Variablen für Abstände, Farben, Themen und Typografie und alle Variablen werden im Code mit Design-Token auf seinen Web- und App-Plattformen abgebildet. „Variablen sind wirklich nützlich für Designer*innen – sie bieten eine Reihe von festen Werten, die dabei helfen, Konsistenz in unserer visuellen Sprache zu wahren und die Anzahl der Entscheidungen, die wir treffen müssen, zu reduzieren –, aber am besten sind sie, wenn wir mit Ingenieur*innen zusammenarbeiten“, sagt Mark. Mit dem Dev Mode, der Design-Token im Code und Variablen in Figma synchronisiert, können Ingenieur*innen das, was sie im Dev Mode sehen, kopieren und einfügen, ohne dass es zusätzlichen Austausch mit den Designer*innen oder der Qualitätskontrolle während der Überprüfungen bedarf.
Variablen sind für Designer*innen sehr nützlich, kommen aber besonders zur Geltung, wenn wir mit Ingenieur*innen arbeiten.
Das Typografieprojekt ging dem variablen Support für Typografie voraus, daher stützte sich das Team ausschließlich auf Textstile. Seitdem haben sie alle Textstile mit Schriftgrößen aktualisiert, die an ihre Typeskala gebunden sind, sowie mit Zeilenabstand und Schriftartvariablen. „Wir haben Hunderte von Textstilen, daher ist es ein enormer Zeitgewinn, diese Werte jetzt zentral mit Variablen verwalten zu können", sagt Mark.
So hat der Minnesota Star Tribune seine Marke transformiert, um neue Leser*innen zu erreichen
The Minnesota Star Tribune, deren Auflage zu den zehn größten Tageszeitungen in den USA zählt, hat es sich zum Ziel gesetzt, ein führendes Vorbild für lokale Nachrichten zu werden. Während die Zeitung eine treue Leserschaft aufweist, brauchte ihre digitale Präsenz eine Überarbeitung, um ein jüngeres Publikum anzuziehen – und das Geschäft für die kommenden Jahre zu sichern. Zum aktuellen Zeitpunkt war das Leseerlebnis zwischen Desktop- und mobilen Websites inkonsistent. Beide Websites waren informationsdicht und textlastig und hatten sogar unterschiedliche Codebases. „Wo wir waren, war ziemlich fragmentiert“, sagt Josh Penrod, Leiter des Designs bei der Star Tribune. „Wir hatten keine einzige responsive Seite, was das Vertrauen in die Marke untergrub.“
In Zusammenarbeit mit der preisgekrönten Digitalagentur Code and Theory hat die Star Tribune eine neue responsive Website aufgebaut, die im August letzten Jahres zusammen mit einem umfassenden Rebranding mit neuem Logo und neuer Typografie gestartet wurde. Wenn mobile und Desktop-Leser*innen jetzt die Star Tribune online besuchen, haben sie ein ähnliches Erlebnis. „Wir sind mit der Idee in das Projekt gegangen, Reibung zu beseitigen und einen geräteunabhängigen Ansatz für Inhalte, Geschichten und Erzählungen zu verfolgen“, sagt Francisco Seiz, Senior Design Director bei Code and Theory. „Es ist entscheidend, ein Erlebnis zu haben, das vollständig nahtlos und reibungslos ist, denn sobald es das nicht ist, entfremdet es die Leser*innen.“
Das Redesign führte auch zu einem Wechsel zu Figma, das es Code and Theory und dem Star Tribune ermöglichte, die Denkmodelle und Prozesse des jeweils anderen zu sehen – und Änderungen live zu demonstrieren. Zuvor hatte die Organisation Sketch und die Adobe Creative Suite verwendet und es hatte einige gescheiterte Versuche gegeben, ein Designsystem zu erstellen und zu pflegen. Sagt Josh: „Ein Designsystem in Figma zu sehen und die Flüssigkeit, mit der man darin arbeiten kann, fühlt sich tatsächlich wie Magie an.“ Franciscos Team konnte spontan zeigen, wie man aus sechs Instanzen einer Komponente auswählt, wenn ein Design angepasst werden muss. „Wenn du in einer Live-Designbesprechung mit vielen Stakeholdern bist, kann man kaum ermessen, wie mächtig das für Geschwindigkeit und Akzeptanz ist“, erklärt Josh weiter. „Alle konnten alles beeinflussen, inspirieren und, ohne jemals die Designdatei zu verlassen, Input geben“, stimmt Francisco zu. Das sorgt für einen durchweg transparenten, offenen und vertrauensvollen Ablauf des gesamten Projekts.
Alle können Einfluss nehmen, Ideen einbringen und Anregungen geben, ohne die Designdatei jemals verlassen zu müssen.
Die Teams von Code and Theory und Star Tribune arbeiteten fast ausschließlich in Figma, von der strategischen Workshop-Phase bis zur Prototypenerstellung und Iteration. Während der Design-Sprints war es hilfreich, auf Diagramme und Wireframes zurückzugreifen, die halfen, den weiteren Weg zu klären. „Die Schönheit dieses Prozesses bedeutete, dass unsere Artefakte nicht nur endgültige Designs waren“, sagt Josh. „Wir konnten unsere Arbeit zeigen und direkt auf strategische Entscheidungen und wichtige Datenpunkte hinweisen.“ Diese Arbeitsweise ist jetzt zu einer Vorlage geworden, die das Team in Zukunft zu verwenden plant.
Mitte Juli führten sie eine sanfte Wiedereröffnung der Seite mit ihrer bestehenden Typografie durch, um Benutzerfeedback zu sammeln und die Geschwindigkeit und Funktionalität zu testen. Drei Wochen später führten sie komplett neue Schriftarten ein. Jetzt wirkt die Seite der TheMinnesota Star Tribune intuitiver und fühlt sich sowohl auf dem Desktop als auch auf mobilen Geräten konsistent an. Es ist ein einfaches Design, aber es erfüllt das Ziel des Projekts, nämlich dass die UX der Seite dem Journalismus nicht im Wege steht. „Ich habe keine Ahnung, wie wir das ohne die Effizienz von etwas wie Figma geschafft hätten“, sagt Josh. „Das ist das Tool, nach dem wir jahrelang gesucht haben.“
Ich habe keine Ahnung, wie wir das ohne die Effizienz von etwas wie Figma hätten machen können.
Der Neustart dauerte nur sieben Monate, aber die interne Neugestaltung bei TheMinnesota Star Tribune ist noch im Gange. Die Hoffnung ist, dass weitere Teams in der Organisation Figma übernehmen. UX-Designer*innen verwenden derzeit FigJam, um eine Teamcharta zu erstellen, und das UX-Team experimentiert mit einem Annotations-Plug-in, um besser mit Anbietern zu kommunizieren, die mit dem Dev Mode nicht vertraut sind. Anfang dieses Monats kaufte Josh ein Figma Creator Micro, eine benutzerdefinierte Tastatur für Figma-Tastenkürzel. „Ich würde das nicht tun, wenn ich nicht von diesem Tool begeistert wäre“, sagt er.
Während sich die Nachrichtenbranche auf der Suche nach Möglichkeiten befindet, Leser*innen zu binden, neue Zielgruppen zu schaffen und ihr Geschäft zu stärken, wird die Notwendigkeit, kooperativ und effektiv zu arbeiten, nur noch wesentlicher werden – besonders angesichts des sich schnell ändernden digitalen Umfelds. Für diejenigen im Nachrichtengeschäft war Figma maßgeblich bei der Navigation des Wandels. Um zu erfahren, wie dies deinem Team zugute kommen kann, kontaktiere uns für eine Demo.
