Blog
24/11/2025

Web design in evidenza della settimana: Flashlights — Storia interattiva e attivismo digitale con Tubik Studio

Quando il web design porta alla luce le storie nascoste del sistema giudiziario

Nella nostra rubrica web design della settimana analizziamo progetti digitali che non solo colpiscono per l’impatto visivo, ma dimostrano anche come una buona esperienza utente possa cambiare il modo in cui percepiamo la realtà. Oggi puntiamo i riflettori su Flashlights, un progetto firmato Tubik Studio in collaborazione con la Jailhouse Lawyers Initiative della NYU School of Law.

 

Flashlights è una sezione interattiva inserita in un sito esistente che racconta la storia e l’impatto dei jailhouse lawyers: persone detenute che, senza una formazione accademica formale, hanno studiato legge da autodidatti diventando punti di riferimento legali all’interno delle carceri. La sfida era enorme: trasformare un contenuto denso, storico e giuridico in un’esperienza chiara, accessibile e profondamente coinvolgente.

Il risultato è una dimostrazione esemplare di ciò che può realizzare un’agenzia di web design quando unisce UI/UX, motion design, grafica e sviluppo sotto una visione narrativa condivisa. Per studi come il nostro a Barcellona, specializzati in web design, branding digitale e storytelling interattivo, Flashlights diventa un riferimento imprescindibile.

Chi c’è dietro: Tubik Studio e un team specializzato in esperienza digitale

Flashlights porta la firma di Tubik Studio, realtà internazionale nota per l’approccio concettuale ai prodotti digitali. Il progetto riunisce un team multidisciplinare che dimostra come il web design di alto livello sia sempre frutto di un lavoro corale.

  • Direzione e concept: Vladyslav Taran.
  • UI/UX design: Daria Tsehelna e Artem Meshkov.
  • Sviluppo e Webflow: Oleksii Dubrov.
  • Grafica: Maryna Solomennykova.
  • Motion design: Ladamyra Kuntysia.
  • Project management: Anastasiia Ostapenko.

 

La scelta di rendere pubblici questi crediti dice molto della cultura dello studio: il progetto non è solo un “bel sito”, ma il risultato di una collaborazione coordinata tra design, contenuti, tecnologia e gestione, elemento chiave in ogni progetto web complesso per enti, ONG o realtà culturali.

La sfida: trasformare una narrazione storica complessa in un’esperienza navigabile

La Jailhouse Lawyers Initiative disponeva di una mole enorme di informazioni: date, casi, tappe giuridiche, biografie, citazioni, risorse accademiche… Una narrazione ricca ma difficile da fruire per il pubblico generalista. La richiesta a Tubik era chiara: creare una sezione all’interno del sito che funzionasse come un percorso storico interattivo, senza appesantire l’utente né snaturare il design complessivo.

C’erano inoltre vincoli tecnici: la sezione doveva integrarsi in una struttura preesistente realizzata in Webflow, rispettando l’identità di base ma aggiungendo una personalità visiva distintiva. Il team ha dovuto gestire un grande volume di immagini e risorse, garantendo tempi di caricamento rapidi e compatibilità con i browser moderni.

In termini di strategia digitale, la sfida si riassume in una frase: trasformare l’informazione in esperienza. Ed è proprio qui che Flashlights eccelle.

Design visivo: tra archivio vivo e grafica attivista

Il linguaggio visivo di Flashlights si ispira a manifesti vintage, collage, ritagli di giornale, fotografie d’archivio e appunti manoscritti. Questa commistione crea un’estetica che appare insieme documentaristica ed emotiva: non siamo davanti a un sito corporate tradizionale, ma a una sorta di murale digitale in movimento.

La palette cromatica si basa su due colori principali, evidenziati anche da Awwwards: #F1EADA, un avorio caldo che richiama la carta antica, e #DF4359, un rosso intenso usato per titoli, dettagli e accenti. L’abbinamento evoca sia memoria storica che energia attivista.

Anche la tipografia rafforza questa idea: si alternano font dal taglio editoriale a titoli decisi che rimandano alla stampa e ai manifesti di protesta. Il risultato è un sistema grafico coerente, lontano dall’asettico, perfettamente in linea con la causa sociale rappresentata.

UX e architettura dell’informazione: la timeline come spina dorsale

Per gestire la complessità dei contenuti, Tubik sceglie una soluzione classica ma estremamente efficace se ben realizzata: una timeline interattiva. Invece di un testo lungo e difficile da seguire, la storia dei jailhouse lawyers viene suddivisa in tappe e momenti chiave che l’utente può esplorare in sequenza o saltando ai passaggi di maggiore interesse.

Ogni blocco della timeline unisce testi brevi, immagini, collage e composizioni tipografiche. Si creano così piccole “capsule” narrative, facili da leggere, scansionare e visivamente distinte. La sensazione generale è di progressione: l’utente sfoglia pagina dopo pagina, senza mai perdere il filo.

Dal punto di vista del UX design, questo approccio riduce il carico cognitivo su temi complessi, consente diversi livelli di approfondimento — dalla lettura veloce all’esplorazione dettagliata — ed evita l’infinito scroll senza struttura, tipico di molti progetti editoriali.

Motion design e scroll: ritmo, tensione ed emozione

Flashlights non sarebbe lo stesso senza il lavoro di motion design guidato da Ladamyra Kuntysia. Ogni transizione, effetto di apparizione e micro-animazione ha una funzione narrativa precisa. Nessun movimento è superfluo: tutto serve a scandire il ritmo della lettura.

Procedendo lungo la timeline, gli elementi compaiono con animazioni morbide che ricordano il collage fisico: pezzi che scorrono, cornici che si sovrappongono, foto che si stratificano. Questo rafforza la sensazione di sfogliare un archivio vivo.

Lo scroll diventa una vera leva di storytelling. Non serve solo a “scendere” nella pagina: attiva cambi di composizione, mette in risalto dati, riposiziona mappe e fa emergere citazioni. È una soluzione sempre più diffusa nei progetti premiati da Awwwards e perfettamente in linea con il trend dello scroll narrativo.

Integrazione tecnica in Webflow e performance

Anche se il risultato appare leggero, il progetto è tecnicamente sofisticato. Lo sviluppatore Oleksii Dubrov ha dovuto integrare questa sezione in un sito Webflow già esistente, lavorando con numerose immagini ottimizzate in WebP, livelli e blend modes per simulare texture, animazioni personalizzate e compatibilità cross-browser senza sacrificare la ricchezza visiva.

Il bilanciamento tra impatto visivo e performance è uno dei motivi per cui Flashlights ha ottenuto l’Awwwards Developer Award. Un promemoria di come il web design contemporaneo richieda una stretta collaborazione tra designer e sviluppatori, soprattutto quando si tratta di esperienze ricche di contenuti.

Contenuto e tono: pedagogia, rispetto e impegno

Oltre all’aspetto visivo, il successo del progetto si fonda su un tono editoriale calibrato con cura. I contenuti sono rigorosi, con dati, date e contesto storico ben documentati; accessibili, senza tecnicismi giuridici inutili; rispettosi verso le persone raccontate e le loro esperienze; e chiaramente impegnati, nel senso che invitano a riflettere e a prendere posizione.

La grafica di Maryna Solomennykova fa da ponte tra contenuto e utente: ogni elemento visivo rafforza la voce del testo, evitando che il progetto scivoli nella freddezza accademica. Un equilibrio delicato, ma perfettamente riuscito.

Riconoscimenti: un progetto piccolo nelle dimensioni, enorme nell’impatto

Flashlights ha ricevuto numerosi riconoscimenti internazionali che ne attestano l’eccellenza: Awwwards Site of the Day, Awwwards Honorable Mention, Awwwards Developer Award, nomination come Site of the Month su Awwwards e candidatura ai Webby Awards. Non è un caso: racchiude tutto ciò che oggi si ricerca nel web design di alto livello — idea solida, responsabilità sociale, esecuzione visiva impeccabile, attenzione all’esperienza utente e performance tecnica di rilievo.

Spunti per brand, istituzioni e studi di design

Flashlights offre diversi insegnamenti che ogni studio di web design o istituzione può applicare ai propri progetti: anche i contenuti complessi diventano fruibili se ben strutturati e supportati da un sistema visivo coerente; il design non deve edulcorare i problemi, ma aiutarci a guardarli in faccia con più contesto ed empatia; la narrazione interattiva è particolarmente efficace per progetti educativi, di memoria storica o giustizia sociale; e l’integrazione tecnica è importante quanto l’estetica.

Conclusioni: Flashlights come esempio di web design con un obiettivo

Flashlights dimostra che il web design con uno scopo può essere bello, emozionante e tecnologicamente avanzato allo stesso tempo. Non è solo una sezione di un sito istituzionale: è un pezzo di memoria digitale, uno strumento didattico e una piattaforma di attivismo.

Per chi lavora in web design, branding ed esperienza digitale, questo progetto conferma che le migliori interfacce non sono quelle che urlano più forte, ma quelle che fanno luce su storie che raramente trovano spazio. In questo senso, il lavoro di Tubik Studio con Jailhouse Lawyers Initiative rende davvero onore al nome del progetto: vere e proprie torce accese in un sistema che preferisce lasciare molte cose nell’ombra.

Ti è piaciuto?
Iscriviti
Articoli correlati
iniziamo a lavorare
al tuo progetto?

Analizziamo la tua situazione attuale e definiamo il prossimo passo.

Contatta ora
Il nostro sito utilizza i cookie per raccogliere informazioni sul tuo dispositivo e sulla tua attività di navigazione. Utilizziamo questi dati per migliorare il sito, garantire la sicurezza e fornire contenuti personalizzati. Puoi gestire le tue preferenze sui cookie cliccando qui.
Accetta i cookie Impostare Rifiuta i cookie
Informazioni di base sui cookie
Questo sito web utilizza cookie e/o tecnologie simili che archiviano e recuperano informazioni durante la navigazione. In generale, queste tecnologie possono avere finalità molto diverse, come, ad esempio, riconoscerti come utente, ottenere informazioni sulle tue abitudini di navigazione o personalizzare il modo in cui vengono visualizzati i contenuti. I nostri usi specifici di queste tecnologie sono descritti di seguito. Di default tutti i cookie sono disabilitati, ad eccezione di quelli tecnici, necessari al funzionamento del sito. Se desideri maggiori informazioni o eserciti i tuoi diritti in materia di protezione dei dati, puoi consultare la ns Política de cookies".
Accetta i cookieImpostare
Cookie tecnici necessari Sempre attivo
I cookie tecnici sono strettamente necessari per il funzionamento del nostro sito web e per la tua navigazione al suo interno. Questi tipi di cookie sono quelli che, ad esempio, ci permettono di identificarti, darti accesso ad alcune parti riservate della pagina, se necessario, o ricordare diverse opzioni o servizi già selezionati da te, come le tue preferenze sulla privacy. Pertanto, sono attivati ​​per impostazione predefinita e la tua autorizzazione non è necessaria. Configurando il tuo browser puoi bloccare o avvisarti della presenza di questo tipo di cookie, anche se tale blocco influenzerà il corretto funzionamento delle diverse funzionalità del nostro sito web.
Cookies de análisis
Las cookies de análisis son las utilizadas para llevar a cabo el análisis anónimo del comportamiento de los usuarios de la web y que permiten medir la actividad del usuario y elaborar perfiles de navegación con el fin objetivo de mejorar los sitios web.
Cookies publicitarias
Las cookies publicitarias permiten la gestión de los espacios publicitarios de la web. Además, estas cookies pueden ser de publicidad personalizada y permitir así la gestión de los espacios publicitarios de la web en base al comportamiento y hábitos de navegación de usuario, de donde se obtiene su perfil y permiten personalizar la publicidad que se muestra en el navegador del usuario u otros perfiles y redes sociales del usuario.
Conferma le preferenze
contattaci
Modulo

Raccontaci
il tuo progetto

Indica il contesto generale della tua organizzazione e l'ambito pianificato del progetto.
Code Barcelona, ​​in qualità di responsabile del trattamento dei tuoi dati, li tratterà per rispondere alla domanda e/o richiesta che ci farai tramite questo modulo di contatto. Puoi esercitare i tuoi diritti di accesso, rettifica, cancellazione, nonché altri diritti consultando le informazioni dettagliate aggiuntive sulla protezione dei dati nella nostra politica sulla riservatezza.
Title
Popupcontent
Analisi della tua situazione digitale

Esamineremo la tua attuale situazione digitale. Ti contatteremo per comprendere il tuo contesto e valutare insieme quali aree analizzare, e successivamente prepareremo un audit con i punti chiave e le raccomandazioni.

Code Barcelona, ​​in qualità di responsabile del trattamento dei tuoi dati, li tratterà per rispondere alla domanda e/o richiesta che ci farai tramite questo modulo di contatto. Puoi esercitare i tuoi diritti di accesso, rettifica, cancellazione, nonché altri diritti consultando le informazioni dettagliate aggiuntive sulla protezione dei dati nella nostra politica sulla riservatezza.
Aceptar