Senior UX/UI Designer und Leiter für Zeitleisten-Narrative
Spezialist für chronologische Webdesign-Layouts, Meilenstein-Markierungen und scroll-getriggerte Animationen. 14 Jahre Erfahrung in interaktiven Erzählstrukturen für Fortune-500-Unternehmen.
Markus Vollrath hat sich seit 2015 auf die Gestaltung innovativer Zeitleisten-Systeme spezialisiert. Seine Arbeit verbindet bewährte UX-Prinzipien mit modernen CSS-Animationstechniken.
Klassische vertikale Timeline-Strukturen mit zentrierter Achse. Perfekt für lange chronologische Erzählungen und historische Darstellungen mit hoher Lesbarkeit.
Responsive horizontale Layouts für mobile Geräte und Desktop. Bietet maximale Interaktivität mit Touch-freundlichen Kontrollen und flüssigen Scroll-Übergängen.
Spezialisierte Marker-Styling-Systeme mit präzisen Datumsetiketten. Jeder Meilenstein wird visuell unterschieden und ist mit Kontext-Informationen verbunden.
Linker-rechts-Platzierungsmuster entlang einer zentralen Achse. Schafft visuelle Balance und verhindert Ermüdung durch rhythmische Abwechslung der Inhaltsblöcke.
Progressive Reveal-Animationen basierend auf Scroll-Position. Einträge werden sanft eingeblendet und aktiviert, während der Nutzer die Seite hinunterscrollt.
Zeitleisten-Systeme, die sich nahtlos an alle Geräte anpassen. Vom Smartphone bis zum großen Monitor — immer optimal lesbar und interaktiv.
Das war eigentlich ein Zufall, der sich als großes Glück herausgestellt hat. Ich arbeitete 2015 als Junior Designer in einer Berliner Agentur, als wir einen Kundenauftrag für ein großes Automobilunternehmen bekamen — sie brauchten ein System zur Darstellung ihrer Unternehmensgeschichte. Ich war fasziniert davon, wie eine einfache chronologische Struktur unglaublich komplex werden kann, wenn man sie wirklich richtig machen will. Die Herausforderung war nicht nur visuell, sondern auch konzeptionell: Wie erzählt man eine Geschichte zeitlich strukturiert, sodass sie natürlich fließt und nicht künstlich wirkt?
Es geht um Balance. Zu viel Information überfordert den Nutzer, zu wenig wirkt langweilig. Ich konzentriere mich auf drei Dinge: Erstens muss die visuelle Hierarchie sofort klar sein — der Nutzer sollte verstehen, was wichtig ist und was nicht, ohne überlegen zu müssen. Zweitens muss das Design technisch performant sein. Scroll-Animationen können wunderbar aussehen, aber wenn sie ruckelig laufen, zerstört das die gesamte Erfahrung. Drittens — und das wird oft übersehen — muss die Zeitleiste emotional funktionieren. Sie erzählt eine Geschichte. Wenn diese Geschichte nicht durch die visuelle Gestaltung unterstützt wird, verlieren wir die Chance, eine echte Verbindung mit dem Nutzer aufzubauen.
Scroll-Performance ist definitiv die größte Herausforderung. Viele Designer und Entwickler verstehen nicht, dass jede Animation auf Scroll-Events basierend recalculated wird, potentiell mehrfach pro Sekunde. Das führt zu Jank, zu sichtbarem Flimmern. Ich nutze Intersection Observer API und requestAnimationFrame, um sicherzustellen, dass Animationen smooth laufen. Auch responsive Design ist tückisch — eine Zeitleiste, die auf Desktop wunderbar funktioniert, kann auf Tablet oder Mobile komplett zusammenbrechen, wenn man nicht vorausschauend designt. Das ist auch der Grund, warum ich immer mit mobiler Perspektive anfange, nicht umgekehrt.
2017 haben wir für ein internationales Automobilunternehmen ein vertikales Timeline-System entwickelt, das in 15 verschiedenen Märkten eingesetzt wurde — mit unterschiedlichen Sprachen, Zeitzonen und kulturellen Kontexten. Das war kompliziert, aber es zeigte mir, wie wichtig es ist, Systeme zu schaffen, die nicht nur schön sind, sondern auch flexibel und wartbar. Später haben wir diesen Ansatz bei Chronos Narrativ GmbH weiterentwickelt und in noch mehr Projekten angewandt. Das war der Punkt, an dem ich verstanden habe, dass ich wirklich etwas Bleibendes geschaffen hatte.
Das wird interessant. Momentan beobachte ich eine Bewegung weg von reiner Dekoration hin zu funktionalen, datengesteuerten Zeitleisten. Unternehmen wollen nicht nur schöne Grafiken — sie wollen, dass ihre Zeitleisten tatsächlich Engagement fördern und Informationen klar vermitteln. Auch der Einsatz von Mikro-Interaktionen wird immer wichtiger. Kleine Details wie Hover-Effekte, Tooltip-Animationen und Progressive Disclosure machen den Unterschied zwischen einer OK-Zeitleiste und einer großartigen aus. Was mich persönlich am meisten reizt, ist die Kombination mit modernen Web-APIs wie Web Animations API und CSS Scroll Snap. Das ermöglicht völlig neue Möglichkeiten.
Hochschule für Gestaltung Offenbach am Main
Interaction Design Foundation
Nielsen Norman Group
World Wide Web Consortium (W3C)
Kategorie: Digital Design & Web
Kategorie: User Experience
Kategorie: Communication Design
Kategorie: Interaction Design
Von den Anfängen in Berlin bis zur Leitung bei Chronos Narrativ GmbH — eine Reise durch Designgeschichte.
Designbüro Meyer & Partners, Berlin
Einstieg ins Berufsleben nach dem Studium. Erste Erfahrungen mit Web-Design, Print-Projekte und Branding. Lernte die Grundlagen von User-Centered Design und Projektmanagement.
Digitalagentur StoryFlow GmbH, Berlin
Wendepunkt der Karriere. Übernahme des Kundenprojekts für ein großes Automobilunternehmen führt zur Spezialisierung auf chronologische Layouts. Entwicklung des ersten proprietären Timeline-Systems.
StoryFlow GmbH
Das Automobilprojekt wird in 15 internationalen Märkten eingesetzt. Markus wird zum Lead Designer für alle großen Timeline-Projekte. Erste Publikationen zu Zeitleisten-Performance.
Chronos Narrativ GmbH
Gründung von Chronos Narrativ GmbH mit zwei Partnern. Fokus auf spezialisierte Narrative-Design-Lösungen. Aufbau eines Teams von Designern und Entwicklern mit ähnlicher Leidenschaft für Zeitleisten.
Chronos Narrativ GmbH
Leitung aller Zeitleisten- und Narrative-Design-Projekte. Über 40 internationale Projekte implementiert. Mehrfache Awards und Anerkennung in der Design-Branche. Mentorship für junge Designer.
Viele sehen eine Zeitleiste als reine Visualisierung — eine Möglichkeit, Daten chronologisch darzustellen. Das ist zu kurz gedacht. Eine wirklich gute Zeitleiste ist ein Kommunikationswerkzeug. Sie erzählt eine Geschichte, schafft emotionale Verbindungen und hilft Nutzern, komplexe zeitliche Zusammenhänge zu verstehen. Wenn du eine Zeitleiste designst, designst du keine Grafik — du designst eine Erzählstruktur.
Das Schwierigste beim Zeitleisten-Design ist es, komplexe Informationen einfach zu machen. Es ist verlockend, alles auf der Seite zu zeigen — jedes Detail, jedes Datum, jede Anmerkung. Aber das führt zu Überladung. Echte Designkunst besteht darin, zu entscheiden, was du NICHT zeigst. Was ist die zentrale Geschichte? Welche Details unterstützen diese Geschichte, und welche lenken nur ab? Das erfordert tiefes Verständnis für dein Publikum und deine Botschaft.
Animationen und Scroll-Interaktionen sind nicht Spielerei — sie sind Teil der Geschichte. Wenn ein Zeitleisten-Eintrag sanft eingeblendet wird, während der Nutzer scrollt, verstärkt das die Idee des Fortschritts und der Bewegung durch die Zeit. Das ist kein visuelles Schnickschnack. Es ist Kommunikation durch Bewegung. Jede Animation sollte einen Zweck haben und die Erzählung unterstützen, nicht sie ablenken.
Ich glaube, dass gutes Design nicht nur schön sein muss — es muss auch technisch exzellent sein. Eine wunderbar designte Zeitleiste, die auf dem Smartphone ruckelt oder auf langsamen Verbindungen ewig lädt, ist ein schlechtes Design. Wenn du für das Web designst, ist Performance Teil deiner Designverantwortung. Das bedeutet, CSS-Animationen statt JavaScript zu nutzen, Bilder zu optimieren und die Intersection Observer API zu verstehen. Das ist nicht optional.
Chronologische Layouts können für Menschen mit Sehbehinderungen, Dyslexie oder kognitiven Herausforderungen besonders verwirrend sein. Eine wirklich gute Zeitleiste muss für alle funktionieren — mit Screen Readern, mit Tastatur-Navigation, mit reduzierter Bewegung. Das ist nicht eine Zusatzaufgabe, die man am Ende macht. Das ist von Anfang an Teil des Designprozesses. Inklusion ist gutes Design.
Tiefgehende Guides zu Zeitleisten-Design, Animationen und chronologischen Layouts.
Ein vollständiger Leitfaden zu vertikalen Zeitleisten — von der konzeptionellen Phase bis zur Implementierung. Wir behandeln Meilenstein-Markierung, Farbcodierung und responsive Anpassungen.
Artikel lesenWie du horizontale Zeitleisten designst, die auf allen Geräten funktionieren. Praktische Tipps zu Touch-Interaktionen, Scroll-Verhalten und Barrierefreiheit.
Artikel lesenDetaillierter Überblick über Marker-Styling-Techniken. Von einfachen Punkten bis zu komplexen Icons — mit realen Code-Beispielen und Performance-Tipps.
Artikel lesenAlles über scroll-getriggerte Animationen. Wir zeigen dir, wie du Intersection Observer nutzt und progressive Reveal-Effekte implementierst, ohne Performance zu opfern.
Artikel lesenMarkus und sein Team bei Chronos Narrativ GmbH entwickeln spezialisierte Zeitleisten-Lösungen für große Unternehmen und kulturelle Institutionen. Wenn du ein innovatives chronologisches Layout brauchst, das wirklich funktioniert — lass uns reden.
