Wenn Webdesign verborgene Geschichten des Justizsystems ans Licht bringt
In unserer Rubrik Webdesign-Highlight der Woche stellen wir digitale Projekte vor, die nicht nur visuell beeindrucken, sondern auch zeigen, wie eine durchdachte User Experience unsere Sicht auf die Welt verändern kann. Heute richten wir den Scheinwerfer auf Flashlights, ein Projekt von Tubik Studio in Zusammenarbeit mit der Jailhouse Lawyers Initiative der NYU School of Law.
Flashlights ist ein interaktiver Bereich innerhalb einer bestehenden Website, der die Geschichte und Bedeutung der jailhouse lawyers erzählt: Inhaftierte, die sich ohne formale juristische Ausbildung selbst das Recht beigebracht haben und innerhalb der Gefängnisse zu Rechtsbeiständen wurden. Die Herausforderung war enorm: Komplexe, historische und juristische Inhalte in eine klare, zugängliche und emotional berührende Nutzererfahrung zu verwandeln.
Das Ergebnis ist ein Paradebeispiel dafür, was eine Webdesign-Agentur erreichen kann, wenn UI/UX, Motion Design, Grafikdesign und Entwicklung unter einer gemeinsamen narrativen Vision zusammenkommen. Für Studios wie unseres in Barcelona, die sich auf Webdesign, digitales Branding und interaktives Storytelling spezialisiert haben, wird Flashlights damit zur unverzichtbaren Referenz.
Das Team dahinter: Tubik Studio und Spezialist:innen für digitale Erlebnisse
Flashlights stammt aus der Feder von Tubik Studio, einem internationalen Studio, das für seine konzeptstarken digitalen Produkte bekannt ist. Das Projekt vereint ein multidisziplinäres Team und zeigt, dass exzellentes Webdesign immer Teamarbeit ist.
- Leitung und Gesamtkonzept: Vladyslav Taran.
- UI/UX Design: Daria Tsehelna und Artem Meshkov.
- Entwicklung & Webflow: Oleksii Dubrov.
- Grafikdesign: Maryna Solomennykova.
- Motion Design: Ladamyra Kuntysia.
- Projektmanagement: Anastasiia Ostapenko.
Dass das Studio die Credits offen kommuniziert, spricht für seine Kultur: Das Projekt ist weit mehr als eine „schöne Website“ – es ist das Ergebnis einer koordinierten Zusammenarbeit von Design, Inhalt, Technologie und Projektsteuerung. Gerade bei komplexen Webprojekten für Institutionen, NGOs oder Kulturbetriebe ist das entscheidend.
Die Herausforderung: Komplexe Zeitgeschichte als digitale Erfahrung erlebbar machen
Die Jailhouse Lawyers Initiative verfügte über eine Fülle an Informationen: Daten, Fallgeschichten, juristische Meilensteine, Biografien, Zitate, wissenschaftliche Ressourcen … Eine inhaltlich reiche, aber für ein breites Publikum schwer zugängliche Narrative. Der Auftrag an Tubik war klar: eine Sektion innerhalb der bestehenden Website zu schaffen, die als interaktiver historischer Rundgang funktioniert – ohne die Nutzer:innen zu überfordern oder das Gesamtdesign zu sprengen.
Hinzu kamen technische Vorgaben: Die Sektion musste sich in eine bestehende Webflow-Struktur einfügen, die Grundidentität respektieren und zugleich eine eigene visuelle Handschrift entwickeln. Das Team musste zudem eine große Menge an Bildmaterial und Ressourcen so einbinden, dass Ladezeiten und Browserkompatibilität gewährleistet bleiben.
Digitalstrategisch lässt sich die Herausforderung auf einen Satz bringen: Information in Erlebnis verwandeln. Genau hier setzt Flashlights Maßstäbe.
Visuelles Design: Zwischen lebendigem Archiv und Aktivismus-Ästhetik
Die visuelle Sprache von Flashlights schöpft aus Vintage-Plakaten, Collagen, Zeitungsausschnitten, Archivfotos und handschriftlichen Notizen. Diese Mischung erzeugt eine Ästhetik, die dokumentarisch und emotional zugleich wirkt: Hier entsteht kein klassischer Unternehmensauftritt, sondern ein digitales Wandbild in Bewegung.
Die Farbpalette basiert auf zwei von Awwwards hervorgehobenen Tönen: #F1EADA, ein warmes Elfenbein, das an gealtertes Papier erinnert, und #DF4359, ein kräftiges Rot als Akzent für Headlines, Details und Highlights. Die Kombination vermittelt historische Tiefe und die Energie des Aktivismus.
Auch die Typografie unterstreicht diesen Ansatz: Editorial anmutende Schriften treffen auf markante Überschriften, die an Printmedien und Protestplakate erinnern. Das Ergebnis ist ein konsistentes grafisches System, das sich bewusst von steriler Ästhetik absetzt und die soziale Botschaft unterstützt.
UX und Informationsarchitektur: Die Timeline als roter Faden
Um die inhaltliche Dichte zu meistern, setzt Tubik auf ein bewährtes, aber wirkungsvolles Mittel: eine interaktive Zeitleiste. Statt eines endlosen Fließtextes wird die Geschichte der jailhouse lawyers in Etappen und Schlüsselmomente gegliedert, die Nutzer:innen entweder chronologisch oder gezielt ansteuern können.
Jeder Abschnitt der Timeline kombiniert kurze Texte, Bilder, Collagen und typografische Kompositionen. So entstehen kleine, leicht erfassbare Story-Kapseln, die sich optisch und inhaltlich voneinander abheben. Das Gefühl: Man blättert Seite für Seite, Kapitel für Kapitel – ohne den roten Faden zu verlieren.
Aus UX-Sicht reduziert dieser Ansatz die kognitive Belastung bei einem komplexen Thema, ermöglicht verschiedene Tiefen – vom schnellen Überblick bis zur vertieften Recherche – und vermeidet das oft ermüdende, strukturlose Endlos-Scrolling.
Motion Design und Scroll: Rhythmus, Spannung, Emotion
Flashlights wäre ohne das Motion Design von Ladamyra Kuntysia nicht dasselbe. Jede Transition, jedes Auftauchen, jede Mikroanimation folgt einem erzählerischen Zweck. Es gibt keine Effekte um der Effekte willen – alles dient dem Leserhythmus.
Beim Navigieren durch die Timeline erscheinen die Elemente mit sanften Animationen, die an echte Collagen erinnern: Einzelteile gleiten ins Bild, Rahmen werden aufgebaut, Fotos überlagern sich. Das verstärkt das Gefühl, durch ein lebendiges Archiv zu blättern.
Der Scroll wird zur Storytelling-Engine. Er dient nicht nur dem „Weiterblättern“, sondern löst Kompositionswechsel aus, hebt Zahlen hervor, verschiebt Karten und entfaltet Zitate. Ein Ansatz, der immer häufiger bei Awwwards-prämierten Projekten zu sehen ist und perfekt zum Trend des narrativen Scrollings passt.
Technische Integration in Webflow und Performance
So leicht das Ergebnis wirkt, so anspruchsvoll ist die technische Umsetzung. Entwickler Oleksii Dubrov musste die Sektion in eine bestehende Webflow-Seite integrieren, zahlreiche Bilder im WebP-Format optimieren, mit Ebenen und Blend Modes Texturen simulieren, individuelle Animationen realisieren und dabei die Browserkompatibilität sicherstellen – ohne visuelle Qualität einzubüßen.
Das ausgewogene Verhältnis von visuellem Impact und Performance ist einer der Gründe, warum Flashlights mit dem Awwwards Developer Award ausgezeichnet wurde. Ein Beleg dafür, dass modernes Webdesign eine enge Zusammenarbeit von Design und Entwicklung erfordert – gerade bei inhaltsstarken Erlebnissen.
Inhalt und Tonalität: Vermittlung, Respekt und Haltung
Über die visuelle Ebene hinaus überzeugt das Projekt durch eine präzise abgestimmte redaktionelle Tonalität. Die Inhalte sind fundiert, mit sorgfältig recherchierten Daten, Fakten und historischem Kontext; zugänglich, ohne unnötigen juristischen Jargon; respektvoll gegenüber den porträtierten Menschen und ihren Geschichten; und klar engagiert – sie regen zur Reflexion und Positionierung an.
Das Grafikdesign von Maryna Solomennykova schlägt die Brücke zwischen Inhalt und Nutzer: Jede visuelle Komponente verstärkt die Aussage des Textes und verhindert, dass das Projekt in akademische Distanz abrutscht. Ein sensibles Gleichgewicht, das hier hervorragend gelingt.
Auszeichnungen: Klein im Umfang, groß in der Wirkung
Flashlights wurde mit zahlreichen internationalen Preisen ausgezeichnet, die seine Qualität bestätigen: Awwwards Site of the Day, Awwwards Honorable Mention, Awwwards Developer Award, Nominierung als Site of the Month bei Awwwards und Nominierung bei den Webby Awards. Kein Zufall: Das Projekt vereint alles, was heute im High-End-Webdesign zählt – eine starke Idee, gesellschaftliche Verantwortung, makellose visuelle Umsetzung, durchdachte User Experience und herausragende technische Performance.
Learnings für Marken, Institutionen und Designstudios
Flashlights liefert wertvolle Impulse, die jedes Webdesign-Studio oder jede Institution für eigene Projekte nutzen kann: Komplexe Inhalte werden zugänglich, wenn sie gut strukturiert und visuell konsistent aufbereitet sind; Design sollte Probleme nicht beschönigen, sondern sie mit mehr Kontext und Empathie sichtbar machen; interaktives Storytelling entfaltet besonders bei Bildungs-, Erinnerungs- oder Social-Justice-Projekten seine Kraft; und die technische Integration ist genauso wichtig wie die Ästhetik.
Fazit: Flashlights als Vorbild für sinnstiftendes Webdesign
Flashlights beweist, dass Webdesign mit Haltung zugleich schön, bewegend und technisch anspruchsvoll sein kann. Es ist nicht nur ein Abschnitt einer institutionellen Website, sondern ein Stück digitale Erinnerungskultur, ein pädagogisches Werkzeug und ein Instrument des Aktivismus.
Für alle, die im Bereich Webdesign, Branding und digitale Experience arbeiten, bestätigt dieses Projekt: Die besten Interfaces sind nicht die lautesten, sondern die, die selten erzählte Geschichten ins Licht rücken. In diesem Sinne macht die Arbeit von Tubik Studio mit der Jailhouse Lawyers Initiative dem Projektnamen alle Ehre – sie sind echte „Flashlights“ in einem System, das vieles lieber im Dunkeln lässt.
