Hans Werner · Portfólio Fale comigo

Case · Terra Porã · 2026

Marca, site e manual de marca. Em menos de 5 horas.

A Terra Porã precisava aparecer como uma empresa pronta: identidade visual, site institucional e um manual para manter tudo coerente daqui para frente. Entreguei as três peças numa única janela de trabalho, sem pular nenhuma etapa que um projeto desses pede.

Cliente
Terra Porã
Setor
Consultoria socioambiental
Entregas
Marca · Site · Manual
Prazo
Menos de 5 horas
Menu do site no celular, em tela cheia marrom

O desafio

Muito conteúdo, nenhuma cara.

A Terra Porã conecta empresas e organizações sociais a projetos socioambientais bem planejados. Tinha plano de negócios, apresentação institucional e um selo redondo com grafismo. Faltava o que faz alguém confiar à primeira vista: uma marca que funcionasse em qualquer tamanho, um site claro e um padrão para tudo o que viesse depois.

O objetivo foi resolver as três frentes de uma vez, com o mesmo raciocínio, para que marca, site e manual contassem a mesma história.

01

Identidade visual

O selo virou um logotipo horizontal: símbolo de grafismo e nome em letras geométricas, vetorizado para uso em tela e impressão.

  • 6 versões do logotipo
  • Paleta de 14 cores com contraste calculado
  • Sistema gráfico: losango, linha do horizonte e selo das etapas
02

Site institucional

Onze páginas com copy revisada, pensadas para celular, tablet e desktop, prontas para subir.

  • Menu em tela cheia no celular e megamenu no desktop
  • Selo interativo que explica o método
  • Formulário com validação e acessibilidade AA
03

Manual de marca

Um brandbook em HTML, navegável e exportável em PDF, para a equipe e para quem for produzir qualquer peça.

  • 14 capítulos, do contexto ao tom de voz
  • Usos corretos e incorretos do logotipo
  • Aplicações: cartão, e-mail e redes sociais

Em números

O tamanho da entrega.

Velocidade só vale quando o resultado aguenta inspeção. Cada página foi auditada em três tamanhos de tela antes de ir para o pacote final.

5hmenos que isso, do briefing ao pacote pronto para publicar
11páginas no site, todas responsivas
14capítulos no manual de marca
33combinações de página e tela auditadas
0erros, rolagens laterais ou links quebrados na auditoria final
AAde contraste em todo texto, padrão WCAG 2.2

Processo

Rápido, sem atalho.

O segredo não é pular etapa. É fazer cada uma na ordem certa, para que uma decisão alimente a seguinte.

01

Conteúdo antes da forma

Revisão da copy inteira para clareza e tom humano, com um guia de vocabulário. "Parceria" virou palavra para parceria de verdade, não para dinheiro.

02

Base visual sólida

Uma referência de layout institucional reconstruída componente por componente, com paleta terrosa ajustada onde não passava nos critérios de leitura.

03

Marca que vira sistema

O logotipo foi vetorizado e desdobrado em símbolo, losango, linha do horizonte e no selo das etapas, que transforma o símbolo no desenho do método.

04

Interface e movimento

Textura de terra, degradês, micro-interações e transições suaves, todas desligadas para quem pede menos movimento no aparelho.

05

Auditoria

Contraste, área de toque de 44 px, hierarquia de títulos e comportamento em celular, tablet e desktop. O que não passou foi corrigido antes da entrega.

06

Documentar e empacotar

Manual de marca com 14 capítulos e uma pasta de publicação limpa, testada sozinha, pronta para a hospedagem.

Página de soluções do site da Terra Porã
Site. Página de soluções, com índice em etiquetas e oito soluções detalhadas.
Grade de destaques da página inicial
Site. Grade de destaques na página inicial.
Rodapé do site em degradê marrom com marca-d'água do símbolo
Site. Rodapé com textura de terra e o símbolo como marca-d'água.
Página inicial no celularEtapas do método em cartas empilhadas no celularMenu em tela cheia no celular
Celular. Hero com foto enquadrada, etapas em cartas que se empilham ao rolar e menu em tela cheia.

O detalhe que faz diferença

O símbolo que explica o método.

O círculo do logotipo foi dividido em seis faixas de grafismo, uma para cada etapa de trabalho da Terra Porã. Ao passar o mouse ou tocar numa etapa, a faixa acende em terracota. O losango do centro é o impacto, onde todas as etapas se encontram.

A marca deixa de ser só assinatura e passa a ensinar como a empresa trabalha.

Selo das etapas: círculo com seis faixas de grafismo e lista das etapas do método

Manual de marca

Para a marca continuar inteira depois de mim.

Contexto, método de criação, logotipo, cores, tipografia, ícones, fotografia, interface, movimento, tom de voz e aplicações. Tudo com os arquivos reais, contrastes calculados e exemplos do que não fazer.

Capa do manual de marca da Terra Porã
Manual. Capa e navegação por capítulos.
Versões do logotipo no manual
Manual. Seis versões do logotipo e onde usar cada uma.
Usos incorretos do logotipo
Manual. Usos incorretos, desenhados de verdade.
Fichas de cores com HEX, RGB, CMYK e contraste
Manual. Cores com HEX, RGB, CMYK e contraste já calculado.
Aplicações da marca: cartão de visita, assinatura de e-mail e posts
Manual. Aplicações: cartão, assinatura de e-mail e posts.

Como eu trabalho

Entrega de agência, no tempo de uma tarde.

Junto direção criativa, estratégia de conteúdo e desenvolvimento num fluxo só. Uso inteligência artificial como acelerador de produção, e cada decisão de marca, texto e interface passa pelo meu critério, por revisão e por teste antes de chegar ao cliente.

Critério de designer

Hierarquia, contraste, ritmo e coerência. A velocidade nunca decide o que fica bonito ou legível.

Texto que vende sem prometer

Copy clara, humana e honesta. Nada de número, caso ou depoimento sem comprovação.

Pronto para usar

Arquivos vetoriais, site auditado e pacote de publicação. O cliente sai com tudo na mão.

Próximo projeto

Precisa de marca, site ou os dois?

Se o seu projeto precisa sair do papel com cara de empresa pronta, eu sei o caminho. E chego lá rápido.

Vamos conversar