Quando o web design revela a história oculta do sistema judicial
Na nossa rubrica destaque de web design da semana, analisamos projetos digitais que não se destacam apenas pelo impacto visual, mas também mostram como uma boa experiência de utilizador pode transformar a nossa perceção do mundo. Hoje damos destaque a Flashlights, uma criação do Tubik Studio em colaboração com a Jailhouse Lawyers Initiative da NYU School of Law.
Flashlights é uma secção interativa integrada num site já existente, que conta a história e o impacto dos jailhouse lawyers: pessoas privadas de liberdade que, sem formação jurídica formal, aprenderam direito de forma autodidata e se tornaram defensores legais dentro das prisões. O desafio era enorme: transformar um conteúdo denso, histórico e jurídico numa experiência clara, acessível e emocionalmente envolvente.
O resultado é um exemplo notável do que uma agência de web design pode alcançar ao unir UI/UX, motion design, design gráfico e desenvolvimento sob uma visão narrativa comum. Para estúdios como o nosso, em Barcelona, especializados em web design, branding digital e storytelling interativo, Flashlights é uma referência incontornável.
Quem está por trás: Tubik Studio e uma equipa dedicada à experiência digital
Flashlights é da autoria do Tubik Studio, um estúdio internacional reconhecido pelo seu enfoque em produtos digitais com forte componente conceptual. O projeto reúne uma equipa multidisciplinar que mostra como o web design de excelência é sempre fruto de trabalho coletivo.
- Direção e conceito: Vladyslav Taran.
- UI/UX design: Daria Tsehelna e Artem Meshkov.
- Desenvolvimento e Webflow: Oleksii Dubrov.
- Design gráfico: Maryna Solomennykova.
- Motion design: Ladamyra Kuntysia.
- Gestão de projeto: Anastasiia Ostapenko.
O facto de o estúdio dar visibilidade a estes créditos diz muito sobre a sua cultura: este não é apenas um “site bonito”, mas sim o resultado de uma colaboração coordenada entre design, conteúdo, tecnologia e gestão — algo essencial em projetos web complexos para instituições, ONG ou iniciativas culturais.
O desafio: condensar uma narrativa histórica complexa numa experiência navegável
A Jailhouse Lawyers Initiative dispunha de uma quantidade massiva de informação: datas, casos, marcos jurídicos, biografias, citações, recursos académicos… Uma narrativa rica, mas difícil de consumir para o público em geral. O briefing para a Tubik foi claro: criar uma secção dentro do site existente que funcionasse como um percurso histórico interativo, sem sobrecarregar o utilizador nem comprometer o design global do site.
Havia ainda restrições técnicas: a secção teria de se integrar numa estrutura pré-existente em Webflow, respeitando a identidade visual base e, ao mesmo tempo, trazendo personalidade própria. A equipa teve também de gerir um grande volume de imagens e recursos, garantindo tempos de carregamento aceitáveis e compatibilidade com os principais browsers.
Em termos de estratégia digital, o desafio resume-se numa frase: transformar informação em experiência. E é precisamente aqui que Flashlights se destaca.
Design visual: estética de arquivo vivo e cartazismo ativista
O universo visual de Flashlights inspira-se em cartazes vintage, colagens, recortes de imprensa, fotografias de arquivo e apontamentos manuscritos. Esta fusão cria uma estética simultaneamente documental e emotiva: não estamos perante um site corporativo tradicional, mas sim diante de um mural digital em constante movimento.
A paleta cromática assenta em dois tons principais destacados nos Awwwards: #F1EADA, um marfim quente que evoca papel envelhecido, e #DF4359, um vermelho intenso usado para títulos, detalhes e elementos de destaque. A combinação sugere, ao mesmo tempo, memória histórica e energia ativista.
A tipografia reforça este conceito: conjuga fontes de inspiração editorial com títulos marcantes que remetem para a imprensa e cartazes de protesto. O resultado é um sistema gráfico coeso, que foge do aspeto assético e se alinha com a causa social representada.
UX e arquitetura de informação: a linha do tempo como fio condutor
Para gerir a densidade do conteúdo, a Tubik recorre a um recurso clássico — e extremamente eficaz quando bem executado: uma linha do tempo interativa. Em vez de um texto longo e difícil de navegar, a história dos jailhouse lawyers é dividida em etapas e momentos-chave, permitindo ao utilizador explorar de forma sequencial ou saltar diretamente para os marcos que mais lhe interessam.
Cada bloco da linha do tempo combina texto curto, imagem, colagem e composição tipográfica. Isto cria pequenas “cápsulas” narrativas, fáceis de ler, rápidas de percorrer e visualmente distintas. A sensação é de progresso: o utilizador vai avançando, página a página, sem nunca perder o fio à meada.
Do ponto de vista de UX design, esta abordagem reduz a carga cognitiva de um tema complexo, respeita diferentes níveis de profundidade — leitura rápida ou exploração detalhada — e evita o scroll infinito e desestruturado tão comum em projetos de conteúdo.
Motion design e scroll: ritmo, tensão e emoção
Flashlights não seria o mesmo sem o trabalho de motion design liderado por Ladamyra Kuntysia. Cada transição, efeito de entrada e microanimação tem um propósito narrativo. Não há movimentos gratuitos: tudo serve o ritmo de leitura.
À medida que se avança na linha do tempo, os elementos surgem com animações suaves que evocam o universo do collage físico: peças que deslizam, molduras que se encaixam, fotografias sobrepostas. Isto reforça a sensação de folhear um arquivo vivo.
O scroll é usado como ferramenta de storytelling. Não serve apenas para “descer” na página: ativa mudanças de composição, destaca números, reposiciona mapas e revela citações. É um recurso cada vez mais presente em projetos premiados nos Awwwards e encaixa perfeitamente na tendência do scroll narrativo.
Integração técnica em Webflow e performance
Apesar do resultado parecer leve, o projeto é tecnicamente exigente. O programador Oleksii Dubrov teve de integrar esta secção num site Webflow já existente, trabalhando com um grande volume de imagens otimizadas em WebP, camadas e blend modes para simular texturas, animações personalizadas e compatibilidade entre browsers, sem sacrificar a riqueza visual.
O equilíbrio entre impacto visual e desempenho é mais uma razão para Flashlights ter recebido o Awwwards Developer Award. É um lembrete de que o web design contemporâneo exige uma relação próxima entre designers e developers, sobretudo em experiências ricas em conteúdo.
Conteúdo e tom: pedagogia, respeito e compromisso
Para além do visual, o sucesso do projeto assenta num tom editorial muito bem afinado. O conteúdo é rigoroso, com dados, datas e contexto histórico bem fundamentados; acessível, evitando jargão jurídico desnecessário; respeitador das pessoas retratadas e das suas vivências; e claramente comprometido, no sentido em que convida à reflexão e à tomada de posição.
O design gráfico de Maryna Solomennykova serve de ponte entre o conteúdo e o utilizador: cada elemento visual reforça a voz do texto e impede que o projeto se torne frio ou excessivamente académico. É um equilíbrio delicado, mas muito bem conseguido.
Reconhecimentos: um projeto pequeno em dimensão, gigante no impacto
Flashlights conquistou diversos prémios internacionais que atestam a sua excelência: Awwwards Site of the Day, Awwwards Honorable Mention, Awwwards Developer Award, nomeação para Site of the Month nos Awwwards e nomeação nos Webby Awards. Não é por acaso: reúne tudo o que hoje se valoriza no web design de topo — ideia sólida, responsabilidade social, execução visual irrepreensível, experiência de utilizador cuidada e desempenho técnico de excelência.
Aprendizagens para marcas, instituições e estúdios de design
Flashlights deixa várias lições que qualquer estúdio de web design ou instituição pode aplicar: conteúdos complexos tornam-se acessíveis quando bem estruturados e suportados por um sistema visual coerente; o design não deve suavizar o problema, mas sim ajudar-nos a encará-lo com mais contexto e empatia; a narrativa interativa é especialmente poderosa em projetos educativos, de memória histórica ou justiça social; e a integração técnica é tão importante quanto a estética.
Conclusão: Flashlights como exemplo de web design com propósito
Flashlights prova que o web design com propósito pode ser belo, emotivo e tecnicamente avançado. Não é apenas uma secção de um site institucional: é um pedaço de memória digital, um recurso pedagógico e uma ferramenta de ativismo.
Para quem trabalha em web design, branding e experiência digital, este projeto confirma que as melhores interfaces não são as que mais se impõem, mas sim as que iluminam histórias raramente contadas. E, nesse sentido, o trabalho do Tubik Studio com a Jailhouse Lawyers Initiative faz jus ao nome do projeto: verdadeiras lanternas acesas num sistema que prefere manter muitas realidades na sombra.