Quand le webdesign éclaire l’histoire cachée du système judiciaire
Dans notre rubrique webdesign de la semaine, nous analysons des projets digitaux qui ne se contentent pas d’être visuellement remarquables, mais qui prouvent aussi comment une expérience utilisateur bien pensée peut transformer notre compréhension du monde. Aujourd’hui, lumière sur Flashlights, une création signée Tubik Studio en partenariat avec la Jailhouse Lawyers Initiative de la NYU School of Law.
Flashlights est une section interactive intégrée à un site existant, qui retrace l’histoire et l’impact des jailhouse lawyers : des personnes incarcérées qui, sans formation juridique classique, se sont formées seules et sont devenues des défenseurs du droit au sein des prisons. Le défi était de taille : transformer un contenu dense, historique et juridique en une expérience claire, accessible et émotionnellement forte.
Le résultat est une démonstration exemplaire de ce qu’une agence de webdesign peut accomplir en réunissant UI/UX, motion design, design graphique et développement autour d’une vision narrative commune. Pour des studios comme le nôtre à Barcelone, spécialisés en webdesign, branding digital et storytelling interactif, Flashlights s’impose comme une référence incontournable.
Derrière le projet : Tubik Studio et une équipe experte en expérience digitale
Flashlights est le fruit du travail de Tubik Studio, un studio international reconnu pour ses produits digitaux à forte dimension conceptuelle. Le projet réunit une équipe pluridisciplinaire qui illustre parfaitement que le webdesign de haut niveau est toujours une aventure collective.
- Direction et concept général : Vladyslav Taran.
- UI/UX design : Daria Tsehelna et Artem Meshkov.
- Développement et Webflow : Oleksii Dubrov.
- Design graphique : Maryna Solomennykova.
- Motion design : Ladamyra Kuntysia.
- Gestion de projet : Anastasiia Ostapenko.
Le fait que le studio mette en avant ces crédits en dit long sur sa culture : le projet n’est pas qu’un « joli site », mais le fruit d’une collaboration coordonnée entre design, contenu, technologie et gestion, un élément clé pour tout projet web complexe destiné à des institutions, ONG ou initiatives culturelles.
Le défi : condenser une narration historique complexe en une expérience fluide
La Jailhouse Lawyers Initiative disposait d’une masse d’informations considérable : dates, affaires, jalons juridiques, biographies, citations, ressources académiques… Une matière riche, mais difficile à appréhender pour le grand public. La mission confiée à Tubik était claire : créer une section du site qui serve de parcours historique interactif, sans submerger l’utilisateur ni rompre l’harmonie graphique du site.
À cela s’ajoutaient des contraintes techniques : la section devait s’intégrer dans une structure existante sous Webflow, respecter l’identité visuelle de base tout en apportant une personnalité graphique propre. L’équipe devait également gérer un grand volume d’images et de ressources, garantir des temps de chargement raisonnables et assurer la compatibilité avec les navigateurs actuels.
En résumé, la stratégie digitale se concentrait sur un objectif : transformer l’information en expérience. Et c’est précisément là que Flashlights excelle.
Design visuel : une esthétique d’archives vivantes et d’affiches militantes
L’univers graphique de Flashlights puise son inspiration dans les affiches vintage, collages, coupures de presse, photos d’archives et notes manuscrites. Ce mélange donne naissance à une esthétique à la fois documentaire et émotionnelle : on n’est pas face à un site institutionnel classique, mais devant une sorte de fresque digitale animée.
La palette de couleurs s’articule autour de deux teintes principales mises en avant par Awwwards : #F1EADA, un ivoire chaleureux évoquant le papier ancien, et #DF4359, un rouge profond utilisé pour les titres, les détails et les éléments d’accent. L’ensemble suggère à la fois mémoire historique et énergie militante.
La typographie renforce ce parti-pris : des polices à l’esprit éditorial se mêlent à des titres percutants rappelant la presse imprimée et les affiches de protestation. Le résultat : un système graphique cohérent, loin de toute froideur, qui s’engage pleinement pour la cause sociale portée par le projet.
UX et architecture de l’information : la timeline comme fil conducteur
Pour rendre le contenu digeste, Tubik mise sur un classique redoutablement efficace quand il est bien exécuté : une frise chronologique interactive. Plutôt qu’un long texte difficile à parcourir, l’histoire des jailhouse lawyers est découpée en étapes et moments clés, que l’utilisateur explore à son rythme ou en sautant directement aux jalons qui l’intéressent.
Chaque segment de la timeline associe texte concis, image, collage et composition typographique. On obtient ainsi de petites capsules narratives, faciles à lire, à parcourir et visuellement distinctes. L’impression générale est celle d’une progression : l’utilisateur tourne les pages, chapitre après chapitre, sans jamais perdre le fil.
Du point de vue de l’UX design, cette approche réduit la charge cognitive face à un sujet complexe, respecte différents niveaux de lecture — survol rapide ou exploration approfondie — et évite le scroll infini sans structure, si courant dans les projets éditoriaux.
Motion design et scroll : rythme, tension et émotion
Flashlights ne serait pas le même projet sans le travail de motion design mené par Ladamyra Kuntysia. Chaque transition, apparition ou micro-animation sert la narration. Aucun effet n’est gratuit : tout contribue au rythme de lecture.
Au fil de la timeline, les éléments apparaissent avec des animations douces, évoquant le collage physique : des pièces qui glissent, des cadres qui se superposent, des photos qui s’assemblent. Cela renforce l’impression de feuilleter des archives vivantes.
Le scroll devient ici un outil de storytelling. Il ne sert pas seulement à « descendre » la page : il déclenche des changements de composition, met en avant des chiffres, repositionne des cartes et dévoile des citations. C’est une tendance de plus en plus présente dans les projets récompensés par Awwwards, parfaitement incarnée ici dans le scroll narratif.
Intégration technique sous Webflow et performance
Si le rendu paraît fluide, le projet est pourtant d’une grande complexité technique. Le développeur Oleksii Dubrov a dû intégrer cette section à un site Webflow existant, en gérant un nombre important d’images optimisées au format WebP, des calques et blend modes pour simuler des textures, des animations sur-mesure et une compatibilité multi-navigateurs sans sacrifier la richesse visuelle.
L’équilibre entre impact visuel et performance est l’une des raisons pour lesquelles Flashlights a reçu le Awwwards Developer Award. C’est un rappel que le webdesign contemporain exige une collaboration étroite entre designers et développeurs, surtout pour des expériences riches en contenu.
Contenu et ton : pédagogie, respect et engagement
Au-delà de l’aspect visuel, le succès du projet repose sur un ton éditorial parfaitement maîtrisé. Le contenu est rigoureux, avec des données, des dates et un contexte historique solidement documentés ; accessible, sans jargon juridique inutile ; respectueux envers les personnes mises en avant et leurs parcours ; et résolument engagé, car il invite à la réflexion et à la prise de position.
Le design graphique de Maryna Solomennykova fait le lien entre ce contenu et l’utilisateur : chaque élément visuel renforce le propos et évite au projet de sombrer dans la froideur académique. Un équilibre subtil, parfaitement atteint.
Distinctions : un projet modeste par sa taille, immense par son impact
Flashlights a reçu de nombreux prix internationaux qui attestent de son excellence : Awwwards Site of the Day, Awwwards Honorable Mention, Awwwards Developer Award, nomination au Site of the Month sur Awwwards et nomination aux Webby Awards. Rien d’étonnant : il réunit tout ce qui fait la valeur du webdesign d’aujourd’hui — idée forte, responsabilité sociale, exécution visuelle irréprochable, expérience utilisateur soignée et performance technique exemplaire.
Enseignements pour les marques, institutions et studios de design
Flashlights livre plusieurs enseignements précieux pour tout studio de webdesign ou institution : un contenu complexe peut devenir accessible s’il est bien structuré et soutenu par un système visuel cohérent ; le design ne doit pas édulcorer le problème, mais nous aider à l’affronter avec plus de contexte et d’empathie ; la narration interactive est particulièrement puissante pour les projets éducatifs, de mémoire ou de justice sociale ; et l’intégration technique est aussi essentielle que l’esthétique.
Conclusion : Flashlights, un modèle de webdesign engagé
Flashlights prouve qu’un webdesign porteur de sens peut être à la fois beau, émouvant et techniquement abouti. Ce n’est pas qu’une simple section d’un site institutionnel : c’est une pièce de mémoire digitale, un outil pédagogique et un levier d’activisme.
Pour celles et ceux qui œuvrent dans le webdesign, le branding et l’expérience digitale, ce projet confirme que les meilleures interfaces ne sont pas celles qui crient le plus fort, mais celles qui mettent en lumière des histoires rarement racontées. En ce sens, le travail de Tubik Studio avec la Jailhouse Lawyers Initiative porte parfaitement le nom du projet : de véritables faisceaux de lumière dans un système qui préfère souvent laisser certaines réalités dans l’ombre.
