SABESP — Hotsites institucionais digitais
transposição impresso → digital
Passe o mouse na imagem para ver o layout
Cliente
SABESP
(Casa 36)
Período
2011–2019
Entregas
2 hotsites
Mapas interativos · Longform editorial
Stack
HTML · CSS
JavaScript puro
Recortes do Projeto
Contexto
A SABESP é a maior empresa de saneamento básico do Brasil. Os dois hotsites chegaram via Casa Trinta e Seis — estúdio de criação de São Paulo que eu atendia, e pelo qual passaram também os projetos da TV Globo. A Casa Trinta e Seis entregava o material gráfico no mais alto nível de refinamento visual; meu papel era resolver o digital: arquitetura, interatividade e implementação técnica.
Os projetos eram campanhas institucionais com nome e conceito definidos pelo cliente: “Muito além da água” — sobre preservação de mananciais e biodiversidade na Região Metropolitana de São Paulo — e “Estratégias Resilientes” — sobre adaptação climática e gestão de recursos hídricos, campanha vigente. Ambos partiram de encadernações impressas produzidas para investidores. Minha missão era transpor esse material para uma experiência web navegável acessível ao grande público.
O problema
O material de origem era impresso — rico visualmente, denso em dados, pensado para leitura linear em papel. Transformá-lo em experiência digital significava resolver problemas que a encadernação não tinha: hierarquia de scroll, navegação não-linear, animações que dessem vida aos dados e interatividade que justificasse o meio.
Constraint técnica
Servidor da SABESP sem acesso root, sem frameworks externos. Toda a solução — incluindo animações e interações — precisava ser construída em HTML, CSS e JavaScript puro para garantir performance e autonomia.
Meu papel
Recebi o material gráfico da agência e a liberdade de escolher as soluções técnicas. As decisões de como animar, como estruturar a navegação, como tornar os dados interativos — tudo isso era meu. Sem stack imposta, sem documentação de UX de partida. O briefing era o impresso; o resto era diagnóstico e execução.
O que fiz
“Muito além da água”
Mapas interativos com pontos animados — cada marcador com animação visual contínua para chamar atenção e, ao clicar, abria um painel com informações sobre aquela área específica de preservação ou intervenção da SABESP. Interatividade contextual, construída em JavaScript puro, sem biblioteca de mapa.
“Estratégias Resilientes”
Infográfico circular de grande escala — diagrama de recursos hídricos com setores e camadas de informação — animado do zero em JavaScript com as ilustrações da agência como assets. Gráficos de evolução de dados e mapa de sistemas de abastecimento, compondo um longform editorial denso.
Em ambos, a lógica foi a mesma: pegar um artefato feito para papel e reconstruí-lo como experiência digital — mantendo o nível visual da Casa Trinta e Seis e adicionando a camada de interação que só o web permite.
Resultado
Dois hotsites entregues e publicados, acessíveis ao grande público — com o mesmo nível de acabamento visual das peças impressas que os originaram. “Estratégias Resilientes” segue vigente — o trabalho sobreviveu ao tempo e está acessível.
“Receber material de alto refinamento visual, entender o problema de comunicação por trás dele e entregar um hotsite que a Casa Trinta e Seis poderia assinar — com a camada de interação que só o digital permite.”