Diseño web destacado de la semana: Flashlights — Historia interactiva y activismo digital con Tubik Studio

Cuando el diseño web ilumina la historia oculta del sistema judicial

En nuestra sección de diseño web destacado de la semana analizamos proyectos digitales que no solo son visualmente brillantes, sino que también demuestran cómo una buena experiencia de usuario puede cambiar la forma en que entendemos el mundo. Hoy ponemos el foco en Flashlights, una pieza creada por Tubik Studio en colaboración con la Jailhouse Lawyers Initiative de la NYU School of Law.

Flashlights es una sección interactiva que forma parte de un sitio existente y que narra la historia y el impacto de los jailhouse lawyers: personas encarceladas que, sin formación académica formal, aprendieron derecho por su cuenta y se convirtieron en defensores legales dentro de las prisiones. El reto era monumental: transformar un contenido denso, histórico y legal en una experiencia clara, accesible y emocionalmente potente.

El resultado es una demostración ejemplar de lo que puede lograr una agencia de diseño web cuando combina UI/UX, motion design, diseño gráfico y desarrollo bajo una misma visión narrativa. Para estudios como el nuestro en Barcelona, especializados en diseño web, branding digital y storytelling interactivo, Flashlights se convierte en una referencia obligada.

Quién está detrás: Tubik Studio y un equipo especializado en experiencia digital

Flashlights es obra de Tubik Studio, un estudio internacional conocido por su enfoque en productos digitales con fuerte carga conceptual. El proyecto reúne a un equipo multidisciplinar que demuestra cómo el diseño web de alto nivel siempre es un trabajo colectivo.

• Dirección y concepto general: Vladyslav Taran.
• UI/UX design: Daria Tsehelna y Artem Meshkov.
• Desarrollo y Webflow: Oleksii Dubrov.
• Diseño gráfico: Maryna Solomennykova.
• Motion design: Ladamyra Kuntysia.
• Project management: Anastasiia Ostapenko.

Que el estudio haga públicos estos créditos ya dice mucho de su cultura: el proyecto no es solo un “site bonito”, sino el resultado de una colaboración coordinada entre diseño, contenido, tecnología y gestión, algo clave en cualquier proyecto web complejo para instituciones, ONG o proyectos culturales.

El reto: condensar una narrativa histórica compleja en una experiencia navegable

La Jailhouse Lawyers Initiative disponía de una enorme cantidad de información: fechas, casos, hitos jurídicos, biografías, citas, recursos académicos… Una narrativa rica pero difícil de consumir para el gran público. El encargo a Tubik fue claro: crear una sección dentro del sitio existente que funcionara como un recorrido histórico interactivo, sin abrumar al usuario ni romper el diseño global de la web.

Además, existían restricciones técnicas: la sección debía integrarse en una estructura previa construida en Webflow, respetando la identidad base y, al mismo tiempo, aportando una personalidad visual propia. El equipo también tenía que lidiar con una gran cantidad de imágenes y recursos, asegurando tiempos de carga razonables y compatibilidad con navegadores modernos.

En términos de estrategia digital, el reto puede resumirse en una frase: convertir información en experiencia. Y es exactamente ahí donde Flashlights destaca.

Diseño visual: una estética de archivo vivo y cartelería activista

El lenguaje visual de Flashlights se inspira en carteles vintage, collages, recortes de prensa, fotografías de archivo y apuntes manuscritos. Esta mezcla genera una estética que se siente documental y emocional a la vez: no estamos ante una web corporativa al uso, sino ante una especie de mural digital en movimiento.

La paleta cromática se construye sobre dos colores principales destacados en Awwwards: #F1EADA, un tono marfil cálido que recuerda al papel envejecido, y #DF4359, un rojo intenso que funciona como acento para titulares, detalles y elementos de énfasis. La combinación sugiere al mismo tiempo memoria histórica y energía activista.

La tipografía refuerza esta idea: se combinan fuentes de aspecto editorial con titulares rotundos que recuerdan a la prensa impresa y a la cartelería de protesta. El resultado es un sistema gráfico coherente que huye de lo aséptico y se alía con la causa social que representa.

UX y arquitectura de la información: la línea del tiempo como columna vertebral

Para resolver la densidad del contenido, Tubik opta por un recurso clásico pero poderosísimo cuando se ejecuta bien: una línea del tiempo interactiva. En lugar de presentar un texto largo e inabarcable, la historia de los jailhouse lawyers se fragmenta en etapas y momentos clave que el usuario puede explorar de forma secuencial o saltando a los hitos que más le interesen.

Cada bloque de la línea del tiempo combina texto breve, imagen, collage y composición tipográfica. Esto genera pequeñas “cápsulas” narrativas fáciles de leer, escaneables y visualmente diferenciadas entre sí. La sensación general es de avance: el usuario va pasando página, capítulo a capítulo, sin perder nunca el hilo.

Desde el punto de vista de UX design, este enfoque permite reducir la sensación de carga cognitiva ante un tema complejo, respetar distintos niveles de profundidad —lectura rápida o exploración detallada— y evitar el scroll infinito sin estructura, tan habitual en proyectos de contenido.

Motion design y scroll: ritmo, tensión y emoción

Flashlights no sería el mismo proyecto sin el trabajo de motion design liderado por Ladamyra Kuntysia. Cada transición, efecto de aparición y microanimación tiene un propósito narrativo. No encontramos movimientos gratuitos: todo está al servicio del ritmo de lectura.

Al avanzar por la línea del tiempo, los elementos van entrando en escena con animaciones suaves que recuerdan al collage físico: piezas que se deslizan, marcos que se montan, fotografías que se superponen. Esto refuerza la sensación de estar hojeando un archivo vivo.

El scroll se utiliza como herramienta de storytelling. No solo sirve para “bajar” por la página: activa cambios de composición, resalta cifras, resitúa mapas y despliega citas. Es un recurso que vemos cada vez más en proyectos premiados por Awwwards y que encaja perfectamente en la tendencia del scroll narrativo.

Integración técnica en Webflow y rendimiento

Aunque el resultado parezca ligero, el proyecto es técnicamente complejo. El desarrollador Oleksii Dubrov tuvo que integrar esta sección en un sitio Webflow ya existente, trabajando con un gran número de imágenes optimizadas en formato WebP, capas y blend modes que simulan texturas, animaciones personalizadas y compatibilidad entre navegadores sin perder riqueza visual.

El equilibrio entre impacto visual y rendimiento es otro de los motivos por los que Flashlights ha sido reconocido con el Awwwards Developer Award. Es un recordatorio de que el diseño web contemporáneo exige una relación estrecha entre diseñadores y desarrolladores, especialmente cuando hablamos de experiencias ricas en contenido.

Contenido y tono: pedagogía, respeto y compromiso

Más allá de lo visual, el éxito del proyecto se apoya en un tono editorial muy bien calibrado. El contenido es riguroso, con datos, fechas y contexto histórico bien documentados; accesible, evitando tecnicismos legales innecesarios; respetuoso con las personas retratadas y sus experiencias; y claramente comprometido, en el sentido de que invita a reflexionar y a tomar postura.

El diseño gráfico de Maryna Solomennykova actúa como puente entre ese contenido y el usuario: cada pieza visual refuerza la voz del texto y evita que el proyecto caiga en la frialdad académica. Es un equilibrio delicado, pero muy bien conseguido.

Reconocimientos: un proyecto pequeño en tamaño, enorme en impacto

Flashlights ha recibido múltiples reconocimientos internacionales que validan su excelencia: Awwwards Site of the Day, Awwwards Honorable Mention, Awwwards Developer Award, nominación a Site of the Month en Awwwards y nominación en los Webby Awards. No es casualidad: reúne todo lo que hoy se valora en el diseño web de alto nivel —idea sólida, responsabilidad social, ejecución visual impecable, experiencia de usuario cuidada y rendimiento técnico sobresaliente.

Lecciones para marcas, instituciones y estudios de diseño

Flashlights ofrece varias claves que cualquier estudio de diseño web o institución puede aplicar en sus propios proyectos: el contenido complejo se puede hacer digerible si se estructura bien y se apoya en un sistema visual coherente; el diseño no debe suavizar el problema, sino ayudarnos a mirarlo de frente con más contexto y empatía; la narrativa interactiva es especialmente poderosa para proyectos educativos, de memoria histórica o justicia social; y la integración técnica es tan importante como la estética.

Conclusión: Flashlights como modelo de diseño web con propósito

Flashlights demuestra que el diseño web con propósito puede ser bello, emotivo y técnicamente avanzado a la vez. No es solo una sección dentro de un sitio institucional: es una pieza de memoria digital, un recurso pedagógico y una herramienta de activismo.

Para quienes trabajamos en diseño web, branding y experiencia digital, este proyecto confirma que las mejores interfaces no son las que gritan más fuerte, sino las que iluminan historias que rara vez se cuentan. Y en ese sentido, el trabajo de Tubik Studio con Jailhouse Lawyers Initiative hace honor al nombre del proyecto: son auténticas linternas encendidas en un sistema que prefiere mantener muchas cosas en la sombra.

¿Quieres empezar un proyecto?

Trabaja con nosotros

Mantente inspirado con nuestra newsletter