bento Rebrush hero image

bento Rebrush

Redesign und Überarbeitung von Startseite und Artikellayouts

Zeitraum
2017/18

Meine Rolle

Credits

Übersicht

Während meiner Zeit im SPIEGEL TechLab hatte ich die Gelegenheit als Designer den Rebrush der jungen News-Plattform von SPIEGEL ONLINE zu begleiten. bento.de war zu diesem Zeitpunkt etwa zwei Jahre alt (Gelauncht im November 2015) und wurde seitdem nicht angepasst. Die Redaktion kam mit dem Wunsch auf uns zu, Start- und Artikelseiten zu überarbeiten. Gemeinsam erarbeiteten wir die Ziele des Rebrushs:

  1. Übergeordnetes Ziel war es, den Look der Seite nach zwei Jahren aufzufrischen und ihn besser auf die junge Leserschaft zuzuschneiden
  2. Optimierung der Lesbarkeit von Artikeln auf mobilen Geräten mit dem Ziel, die "Snackability" zu erhöhen
  3. Die im CMS (Craft) angelegten Tools zur Strukturierung von Artikeln zu optimieren und diversifizieren
  4. Startseite aufräumen und durch ordnende Komponenten strukturieren

Warum ein Rebrush?

Nachdem die bento Redaktion zwei Jahre lang mit dem bestehenden System gearbeitet hatte, ergaben sich erste Schwachstellen. Vor allem die Startseite bot nicht genug Spielraum zur Strukturierung. Dazu kam, dass der "Text auf Bild"-Look relativ schlecht gealtert ist und nicht alle Stories und Formate angemessen abbilden konnte.

Startseite vorher und nach dem Rebrush
Links der alte Look: Meme-Galore, Text und Bild stehen in ständiger Konkurrenz. Rechts: Weiterhin bildstark, neue Teaserformate schaffen aber Weißraum und Struktur.

Gut gemischt und mehr Weißraum

Um der Redaktion mehr Spielräume bei der Gestaltung der Startseite zu ermöglich (mobil wie stationär), einigten wir uns darauf, eine Mischung aus beiden Teaser-Formaten zu etablieren. So können bildstarke Meldungen weitrhin mit großem Vorschaubild platziert werden und die neue Variante schafft den nötigen Weißraum zum durchatmen.

Research & Typografie

Ein besonderes Augenmerk lag auf der Lesetypografie der Artikel. Insgesamt waren Größen, Abstände und die allgemeine typografische Hierarchie nicht stimmig. Zur Einordnung haben wir eine umfangreiche Recherche und Analyse zu mobiler Lesbarkeit anderer Verlagshäuser gemacht.

Übersicht zur Recherche mobile Typografie von News-Plattformen
Übersicht der Recherche zu mobiler Web-Typografie auf News-Plattformen. Viele Open Source Schriften, ähnliche Größen. Das einzig Bemerkenswerte: Wertigkeit und Ruhe wird in erster Linie durch erhöhten Zeilenabstand hergestellt (ZEIT, MEDIUM, NYTIMES)

Auf die Recherche aufbauend, haben wir zahlreiche Schriftkombinationen ausprobiert. Wichtig war, dass die neue Leseschrift in Kombination mit der Hausschrift "Maax" gut zusammenspielt.

Nach internem Testing fiel die Wahl auf die Open Source Schrift "IBM Plex Sans". Ihr Charakter ist sachlich und der Einsatz einer Serifenlosen im Fließtext vermittelt das Gefühl von Modernität. Sie ist der Maax recht ähnlich, bietet aber eine bessere Lesbarkeit im Fließtext.

bento Schriften
Typografische Grundausstattung des Rebrushs

Neustrukturierung der Startseite

Bei der Neustrukturierung der Startseite war der erste Schritt den alten "Text auf Bild" Look zu überarbeiten und durch neue Teaserformate ein höheres Maß an Vielseitigkeit zu ermöglichen. Dazu kam die Aufgabe, der Redaktion strukturierende Komponenten an die Hand zu geben.

Teaserformate

Die neuen Teaser-Formate räumen Zeilen gebührenden Platz ein und werten so den Gesamteindruck der Startseite auf. Eine Mischung aus unterschiedlichen Teaser-Formaten (Bildstark vs. Textstark) eröffnet der Redaktion neue Spielräume beim Aufbau der Startseite.

Themen-Blöcke

Auch für Themen-Blöcke (z.B. #Future, #Stories oder #Klimaretter) haben wir neue Formate entwickelt. Diese unterbrechen den klassischen Stream der Startseite und ermöglichen es, Artikel in Sammlungen zu kuratieren und im Fluss der Startseite einzuklinken.

bento Startseite
bento Startseite, Details und Elemente

Artikellayouts

Neben der Überarbeitung der Typografie haben wir auf der Artikel-Ebene daran gearbeitet, das Storytelling für die Redaktion zu erleichtern. Dabei wurden Elemente wie Zitate, Infokästen, Bildstrecken und Listen unter der Prämisse überarbeitet, Artikel aufzulockern und für das Lesen auf Smartphones zu optimieren.

bento Artikel-Ebene
bento Artikel-Ebene, Details und Elemente

PS:

Am 16.10. 2019 wurde bento.de erneut überarbeitet. Im Zuge der Fusion von Print- und Online-Redaktion rückt das neue Erscheinungsbild bento nun wieder näher zum SPIEGEL. Das zeigt auch der neue Claim "Das junge Magazin vom SPIEGEL".