Aprendi a construir site criando um de verdade.
Concebi, desenhei e entreguei um portal acadêmico inteiro, descobrindo o que cada etapa pedia enquanto andava por ela.
Uma iniciativa que precisava de uma casa.
O OBAM reúne professores e alunos da Universidade de Brasília em torno de um tema urgente: a relação entre sistemas alimentares e mudança climática. Já tinham produção acadêmica, rede ativa e pesquisas em andamento, mas faltava um lugar próprio no mundo digital, com a visibilidade que uma iniciativa como essa merece.
O ponto de partida
Um grupo de professores da UnB decidiu criar um portal institucional para o observatório, um lugar onde a pesquisa pudesse existir no mundo digital e servir de base para os ciclos de projetos que viriam. A ideia era clara, mas toda a execução ainda estava por construir.
O desafio
O projeto ainda estava se construindo: não havia material finalizado nem uma direção visual clara. O cliente queria algo limpo, editorial, longe da poluição visual que domina boa parte dos portais acadêmicos. E referências para esse tipo específico de plataforma são escassas porque a maioria dos observatórios com esse cunho ou é pesada demais visualmente ou não tem nenhuma presença digital relevante. Boa parte do trabalho foi estudar esse ecossistema, entender que tipo de conteúdo fazia sentido e criar uma estrutura coerente onde ainda não existia nenhuma.
Por que WordPress e Elementor
Não foi limitação técnica, foi escolha contextual. O time precisaria de autonomia real para publicar conteúdo sem depender de ninguém depois da entrega. A pergunta certa nunca é qual é a stack mais moderna, e sim qual stack serve melhor este projeto, este cliente e este momento.
Curadoria de imagens integrada ao design do site.
Três versões. Um resultado.
Cada fase tinha uma razão de ser. Não foram tentativas soltas, e sim etapas de um processo em que a identidade foi sendo construída junto com o próprio projeto.
Estrutura antes da identidade
A primeira versão era deliberadamente sem cor, porque o objetivo era validar a arquitetura do site e a organização do conteúdo antes de qualquer decisão visual.
A primeira identidade emergindo
A equipe foi articulando o que queria: algo que remetesse a alimentos e clima, com degradê do amarelo ao vermelho. Chegamos juntos a uma paleta quente que traduzia bem essa visão.
A logo chegou e eu fiz acontecer.
Quando a equipe trouxe a logo definitiva, extraí a paleta, defini os tokens de design e apliquei com consistência em todas as páginas, fazendo muito com pouco e garantindo que tudo funcionasse de verdade.
A mesma página nas três versões
Os três eixos na versão final
Cada eixo ganhou uma cor própria dentro da paleta navy: diferenciação visual com consistência de sistema.
Sem cargo definido, com o projeto inteiro nas mãos.
Não existia um cargo formal nem um caminho pronto a seguir. Existia um projeto que precisava sair do zero, e eu assumi cada parte dele, da pesquisa inicial à entrega documentada. Em vez de esperar instruções, fui descobrindo o que cada etapa pedia e me adaptando rápido, que é exatamente o tipo de situação em que eu mais rendo.
Descoberta e estudo do contexto
Antes de desenhar qualquer tela, mergulhei em como outros observatórios acadêmicos se organizam no digital. Foi aí que percebi o que realmente faltava: uma estrutura de conteúdo clara, com tipos de publicação bem definidos, formas de curadoria e uma categorização que fizesse sentido para quem fosse acessar.
Arquitetura e identidade visual
Organizei o portal em 9 páginas distribuídas por 3 eixos temáticos, dando ao conteúdo uma lógica de navegação fácil de entender. A identidade visual foi amadurecendo junto, até chegar à paleta navy que define o site hoje.
Bibliotecas dinâmicas de conteúdo
Cada tipo de conteúdo (Publicações, Estudos, Eventos, Links Úteis e Projetos) ganhou sua própria biblioteca, com filtros por eixo temático para facilitar a busca. Tudo construído com HTML e JS customizados dentro dos widgets do Elementor, sem depender de plugin externo.
Conteúdo inicial para dar vida ao site
Antes da entrega, cadastrei 5 projetos, 10 publicações, 3 eventos e 4 notícias, para que o site não chegasse ao ar vazio e sim com vida desde o primeiro dia. A partir dali, a equipe assume e segue alimentando o portal.
Portal de gestão e handoff completo
Deixei toda a documentação hospedada no próprio domínio: acessos, identidade visual registrada e um guia de postagem passo a passo. Tudo pensado para que o time operasse com autonomia total, sem depender de mim para o dia a dia.
O site na versão final
Mais do que um site, entreguei autonomia.
Desde o começo, meu objetivo era construir algo que não dependesse de mim para continuar de pé. A stack que escolhi garante que o time publica e atualiza conteúdo por conta própria, sem precisar de um desenvolvedor a cada nova publicação.
Portal de Gestão
Acessos documentados, identidade visual registrada e guia de postagem com screenshots reais do WordPress. Tudo em um lugar, em obam.com.br.
Handoff completo entregue em 31/05/2026
Apresentado na V SEMAGEA, UnB, em maio de 2026
O portal foi apresentado na V Semana da Geografia da Universidade de Brasília, evento do Departamento de Geografia com mesas-redondas, oficinas e participação da comunidade acadêmica. O OBAM chegou nele com presença digital de verdade para mostrar.
Quando o jogo mudou, escolhi mudar junto.
No início de 2026, uma nova ferramenta surgiu e mudou o jogo para muita gente. Eu poderia ter ficado confortável com o que já funcionava, mas escolhi não ficar parada e abracei a chance de evoluir.
O que mudou na prática
Conectei MCP e reescrevi as bibliotecas dinâmicas com mais inteligência de código. Tarefas que levavam horas passaram a levar minutos, e o que já era funcional ficou mais elegante. Mesma stack de antes, só que em outro nível de execução.
A evolução visual e técnica do site
O que nenhum tutorial do YouTube ou curso ensina.
O difícil não é aprender a ferramenta, e sim desenvolver um jeito de pensar que continua funcionando mesmo quando o contexto e as possibilidades mudam.
Ferramenta se aprende. Pensar é que é o hard skill.
WordPress, Elementor, Claude Code: cada geração tem sua stack favorita. Mas o que diferencia uma tela funcional de uma experiência que realmente flui não está na ferramenta, e sim na base de quem usa. Formação em UX, visão de produto e entendimento de pessoas são o que dão coerência ao que se constrói. Qualquer um pode aprender a montar uma tela. O que muda o resultado é saber por que cada decisão existe.
A stack certa não é a mais nova. É a que serve o projeto.
Toda ferramenta tem um contexto em que faz mais sentido. Para um portal acadêmico que precisava de autonomia de publicação e estabilidade de longo prazo, WordPress e Elementor eram a escolha mais inteligente, não por falta de alternativa, e sim porque serviam melhor àquele cliente, naquele momento.
Decidir com intenção é tão importante quanto executar bem.
Cada escolha tem um custo que vai além do técnico: tempo, aprendizado, aderência do cliente. Quando construímos do zero, sem histórico para romper, a escolha da stack não era sobre o que era mais moderno, e sim sobre o que faria mais sentido durar. Isso é visão sistêmica aplicada na prática.
IA é uma camada, não uma ruptura.
Ela se acrescenta ao que já existe. Em qualquer nicho, em qualquer stack. Quem entende isso não entra em pânico. Avalia, decide e integra quando faz sentido.