Projeto CEU: do sistema visual ao site publicado
Uma experiência digital para organizar quatro unidades dos CEUs, sua programação e os caminhos de participação da comunidade.
Um serviço público precisa orientar a próxima ação
O Projeto CEU foi estruturado como uma plataforma digital para quatro unidades dos CEUs de São Paulo: CEU Silvio Santos, CEU Rei Pelé, CEU Padre Ticão e CEU Papa Francisco.
Mais do que apresentar uma instituição, a experiência precisa ajudar cada pessoa a encontrar um caminho: escolher uma unidade, entender o que acontece naquele território e avançar para uma atividade, notícia, contato ou outro serviço.
O site público pode ser consultado em ceu.phorte.org.br.
Da informação dispersa para um caminho comum
Em um serviço distribuído por diferentes territórios, a informação não pode depender apenas de uma página bonita. Ela precisa responder rapidamente a perguntas concretas:
- Qual CEU atende meu território?
- Que atividades estão disponíveis?
- Como encontro uma programação ou uma notícia?
- Onde estão os contatos e os recursos de acessibilidade?
A arquitetura foi organizada para criar uma linguagem comum entre home, unidades, agenda, atividades, notícias, galeria, contato e páginas legais. As categorias de educação, esporte, lazer e cultura ajudam a orientar a leitura sem transformar cada fluxo em uma experiência isolada.
O raciocínio só fecha quando chega ao código
No estudo de caso, a atuação registrada passa por pesquisa, arquitetura de informação, UX/UI, fundamentos visuais, wireframes, componentes, implementação front-end, responsividade, recursos assistivos e validação de fluxos.
O front-end consultado foi organizado em React, Vite e TypeScript, com React Router para as rotas, Tailwind CSS para a camada visual, lucide-react para ícones e componentes locais para elementos recorrentes.
As rotas observadas incluem home, unidades, detalhes de CEUs, agenda, atividades, notícias, galeria, contato e páginas legais. Os dados de unidades e atividades aparecem localmente no código consultado. Backend, CMS, analytics e integrações de inscrição não estão confirmados como parte da entrega publicada e, por isso, não são apresentados aqui como resultados de produção.
A virada foi transformar estrutura em experiência
A principal virada do projeto foi levar o raciocínio do wireframe para uma experiência navegável. Menus, filtros, mapas, estados, responsividade e acessibilidade precisam continuar coerentes quando a interface passa a existir no código.
Também ficou mais claro que um sistema visual não serve apenas para padronizar telas. Ele ajuda a manter decisões de produto legíveis quando o projeto cresce, quando diferentes tipos de conteúdo convivem e quando a pessoa precisa chegar a uma ação concreta.
O material público mostra o site em funcionamento. A descrição do papel, dos créditos e das integrações deve ser lida em conjunto com as confirmações registradas antes da publicação definitiva.
CTA
Em um serviço público digital, o que mais precisa ser revisado antes da implementação: a arquitetura da informação, os recursos assistivos ou a integração com a operação?
