Quan el disseny web il·lumina la història amagada del sistema judicial
A la nostra secció de disseny web destacat de la setmana analitzem projectes digitals que no només destaquen pel seu impacte visual, sinó que també demostren com una bona experiència d’usuari pot transformar la manera com entenem el món. Avui posem el focus en Flashlights, una peça creada per Tubik Studio en col·laboració amb la Jailhouse Lawyers Initiative de la NYU School of Law.
Flashlights és una secció interactiva integrada en un web existent que narra la història i l’impacte dels jailhouse lawyers: persones empresonades que, sense formació jurídica formal, van aprendre dret de manera autodidacta i es van convertir en defensors legals dins de la presó. El repte era majúscul: transformar un contingut dens, històric i jurídic en una experiència clara, accessible i amb una càrrega emocional potent.
El resultat és una mostra exemplar del que pot aconseguir una agència de disseny web quan integra UI/UX, motion design, disseny gràfic i desenvolupament sota una mateixa visió narrativa. Per a estudis com el nostre a Barcelona, especialitzats en disseny web, branding digital i storytelling interactiu, Flashlights esdevé una referència imprescindible.
Qui hi ha darrere: Tubik Studio i un equip especialitzat en experiència digital
Flashlights és una creació de Tubik Studio, un estudi internacional reconegut pel seu enfocament conceptual en productes digitals. El projecte reuneix un equip multidisciplinari que demostra que el disseny web d’alt nivell sempre és fruit del treball col·lectiu.
- Direcció i concepte general: Vladyslav Taran.
- Disseny UI/UX: Daria Tsehelna i Artem Meshkov.
- Desenvolupament i Webflow: Oleksii Dubrov.
- Disseny gràfic: Maryna Solomennykova.
- Motion design: Ladamyra Kuntysia.
- Gestió de projecte: Anastasiia Ostapenko.
El fet que l’estudi faci públics aquests crèdits ja diu molt de la seva cultura: el projecte no és només un “web bonic”, sinó el resultat d’una col·laboració coordinada entre disseny, contingut, tecnologia i gestió, un aspecte clau en qualsevol projecte web complex per a institucions, ONG o iniciatives culturals.
El repte: condensar una narrativa històrica complexa en una experiència navegable
La Jailhouse Lawyers Initiative disposava d’una gran quantitat d’informació: dates, casos, fites jurídiques, biografies, cites, recursos acadèmics… Una narrativa rica però difícil de consumir pel públic general. L’encàrrec a Tubik era clar: crear una secció dins el web existent que funcionés com un recorregut històric interactiu, sense saturar l’usuari ni trencar la coherència visual del lloc.
A més, hi havia limitacions tècniques: la secció s’havia d’integrar en una estructura prèvia feta amb Webflow, respectant la identitat base però aportant una personalitat visual pròpia. L’equip també havia de gestionar una gran quantitat d’imatges i recursos, garantint temps de càrrega òptims i compatibilitat amb navegadors actuals.
En termes d’estratègia digital, el repte es pot resumir en una frase: convertir informació en experiència. I és precisament aquí on Flashlights brilla.
Disseny visual: una estètica d’arxiu viu i cartelleria activista
El llenguatge visual de Flashlights s’inspira en cartells vintage, collages, retalls de premsa, fotografies d’arxiu i apunts manuscrits. Aquesta combinació genera una estètica que transmet alhora sensació documental i emoció: no és una web corporativa convencional, sinó una mena de mural digital en moviment.
La paleta cromàtica es basa en dos colors principals destacats a Awwwards: #F1EADA, un marfil càlid que recorda el paper envellit, i #DF4359, un vermell intens que s’utilitza per a titulars, detalls i elements d’èmfasi. La combinació evoca memòria històrica i energia activista a parts iguals.
La tipografia reforça aquest concepte: es combinen fonts d’estil editorial amb titulars potents que remeten a la premsa impresa i a la cartelleria de protesta. El resultat és un sistema gràfic coherent, allunyat de l’asèpsia i alineat amb la causa social que representa.
UX i arquitectura de la informació: la línia del temps com a eix narratiu
Per fer digerible la densitat del contingut, Tubik aposta per un recurs clàssic però molt potent quan s’executa bé: una línia del temps interactiva. En comptes de presentar un text llarg i feixuc, la història dels jailhouse lawyers es divideix en etapes i moments clau que l’usuari pot explorar de manera seqüencial o saltant als fets que més li interessin.
Cada bloc de la línia del temps combina text breu, imatge, collage i composició tipogràfica. Això genera petites “càpsules” narratives fàcils de llegir, escanejables i visualment diferenciades. La sensació general és de progrés: l’usuari avança pàgina a pàgina, capítol a capítol, sense perdre el fil.
Des del punt de vista de UX design, aquest enfocament permet reduir la càrrega cognitiva davant un tema complex, adaptar-se a diferents nivells de profunditat —lectura ràpida o exploració detallada— i evitar l’scroll infinit sense estructura, tan habitual en webs de contingut.
Motion design i scroll: ritme, tensió i emoció
Flashlights no seria el mateix sense el treball de motion design liderat per Ladamyra Kuntysia. Cada transició, efecte d’aparició i microanimació té una funció narrativa. No hi ha moviments gratuïts: tot està pensat per potenciar el ritme de lectura.
A mesura que avances per la línia del temps, els elements apareixen amb animacions suaus que recorden el collage físic: peces que es desplacen, marcs que es munten, fotografies que se superposen. Això reforça la sensació de fullejar un arxiu viu.
L’scroll es converteix en una eina de storytelling. No només serveix per “baixar” per la pàgina: activa canvis de composició, destaca xifres, reubica mapes i desplega cites. És un recurs cada cop més habitual en projectes premiats per Awwwards i encaixa perfectament amb la tendència del scroll narratiu.
Integració tècnica a Webflow i rendiment
Tot i que el resultat sembli lleuger, el projecte és tècnicament complex. El desenvolupador Oleksii Dubrov va haver d’integrar aquesta secció en un web Webflow ja existent, treballant amb un gran volum d’imatges optimitzades en format WebP, capes i blend modes que simulen textures, animacions personalitzades i compatibilitat entre navegadors sense perdre riquesa visual.
L’equilibri entre impacte visual i rendiment és un dels motius pels quals Flashlights ha estat reconegut amb el Awwwards Developer Award. És un recordatori que el disseny web contemporani exigeix una col·laboració estreta entre dissenyadors i desenvolupadors, especialment quan es tracta d’experiències riques en contingut.
Contingut i to: pedagogia, respecte i compromís
Més enllà de l’aspecte visual, l’èxit del projecte es fonamenta en un to editorial molt ben calibrat. El contingut és rigorós, amb dades, dates i context històric ben documentats; accessible, evitant tecnicismes jurídics innecessaris; respectuós amb les persones retratades i les seves experiències; i clarament compromès, ja que convida a la reflexió i a prendre partit.
El disseny gràfic de Maryna Solomennykova fa de pont entre el contingut i l’usuari: cada peça visual reforça la veu del text i evita que el projecte caigui en la fredor acadèmica. Un equilibri delicat, però molt ben aconseguit.
Reconeixements: un projecte petit en mida, enorme en impacte
Flashlights ha rebut diversos reconeixements internacionals que avalen la seva excel·lència: Awwwards Site of the Day, Awwwards Honorable Mention, Awwwards Developer Award, nominació a Site of the Month a Awwwards i nominació als Webby Awards. No és casualitat: reuneix tot el que avui es valora en el disseny web d’alta gamma —idea sòlida, responsabilitat social, execució visual impecable, experiència d’usuari cuidada i rendiment tècnic excel·lent.
Lliçons per a marques, institucions i estudis de disseny
Flashlights ofereix diverses claus que qualsevol estudi de disseny web o institució pot aplicar als seus projectes: el contingut complex pot ser accessible si s’estructura bé i es recolza en un sistema visual coherent; el disseny no ha de suavitzar el problema, sinó ajudar-nos a mirar-lo de cara amb més context i empatia; la narrativa interactiva és especialment poderosa per a projectes educatius, de memòria històrica o de justícia social; i la integració tècnica és tan important com l’estètica.
Conclusió: Flashlights com a model de disseny web amb propòsit
Flashlights demostra que el disseny web amb propòsit pot ser bell, emotiu i tècnicament avançat alhora. No és només una secció dins d’un web institucional: és una peça de memòria digital, un recurs pedagògic i una eina d’activisme.
Per a qui treballem en disseny web, branding i experiència digital, aquest projecte confirma que les millors interfícies no són les que criden més, sinó les que il·luminen històries que gairebé mai s’expliquen. I en aquest sentit, la feina de Tubik Studio amb Jailhouse Lawyers Initiative fa honor al nom del projecte: són autèntiques llanternes enceses en un sistema que prefereix mantenir moltes coses a les fosques.
