Marca e site do Instituto Guardiões da Cultura, com motion que conta o método
O Instituto Guardiões da Cultura nasceu pra vender uma jornada de consultoria de cultura pra diretores e RH sênior. Desenhei a marca do zero e depois o site, onde cada animação explica um pedaço do método. O resultado é uma landing que passa autoridade sem ficar fria, e um diagnóstico que já chega como lead qualificado.
O problema
Os três sócios tinham um método pronto e nenhuma marca. O método é uma jornada de consultoria que transforma líderes em guardiões da cultura da empresa, vendida por trimestre, semestre ou ano direto pra diretoria e RH.
O desafio era de tom. O público é sênior e tradicional, decide com calma e não tolera ambiguidade. Se a marca fosse séria demais, virava mais um treinamento de liderança. Se fosse simbólica demais, escorregava pro esotérico. E cultura é um assunto abstrato: precisava ganhar forma pra ser vendido como investimento.
A decisão
Comecei pela marca. O selo junta um escudo, que é a função do guardião, com elipses entrelaçadas, que são as camadas da cultura se construindo em ciclos. Os arquétipos são o Sábio, que dá a profundidade, e o Governante, que segura o tom no campo do institucional. A paleta ficou em azul profundo, papel e ouro envelhecido. Verde, amarelo e vermelho ficaram proibidos, porque no Brasil puxam associação política.
Depois, o site virou o próprio sistema da marca rodando em código, com as regras do manual dentro dos componentes. E o motion entrou com uma função clara: explicar o método sem precisar de mais texto. Cada animação conta uma ideia.
Os seis pilares do método aparecem como um templo desenhado em pontos, que surge conforme a página rola.
Na chamada pro diagnóstico, os pilares começam amontoados dentro do círculo e se espalham em órbita. É a cultura saindo do caos e se organizando.
A regra do movimento
Com público sênior, legibilidade vem antes do efeito. Nenhuma animação esconde texto ou atrasa a leitura: o conteúdo já está ali, o movimento só reforça. E quem prefere menos movimento no sistema recebe a página parada, com tudo visível de uma vez e o mesmo conteúdo.
O cuidado com desempenho também foi parte do desenho. O dither do templo é calculado em WebGL, e os arcos do final são pré-calculados, pra que as animações não travem a página. Depois de uma rodada de otimização, a landing ficou duas vezes mais rápida no celular.
O diagnóstico
O site não é só vitrine. O Diagnóstico de Prontidão tem 18 perguntas sobre os seis pilares e leva uns 3 minutos. No fim, a pessoa vê o resultado num radar e entende qual pilar está segurando o crescimento da empresa. O cadastro é salvo antes do envio, os sócios recebem um e-mail a cada novo lead e tudo fica num painel próprio. A conversa comercial já começa com um diagnóstico na mão.
O resultado
O site entrou no ar em 16 de outubro em institutoguardioes.com.br, com 100 em acessibilidade, SEO e boas práticas no PageSpeed, e 99 de desempenho no computador. A marca saiu do papel e virou um sistema que funciona em tela, com o mesmo cuidado do manual.
E o projeto continuou: depois do lançamento, o Instituto seguiu comigo num contrato de consultoria recorrente.
Identidade visual completa do Instituto (selo, arquétipos, paleta e regras de uso) e site construído como o próprio sistema da marca rodando em código. Motion pensado como narrativa: pilares que se organizam em órbita, templo desenhado em pontos, cartas dos sócios sendo dadas e arcos que se encontram. Diagnóstico de Prontidão com 18 perguntas, resultado em radar e painel de leads. Tudo com versão pra quem prefere menos movimento, 100 de acessibilidade e 99 de desempenho no computador.