Projetos

2026

Capa do case da Escola Alemã Corcovado: o topo da landing page de ex-alunos num tablet, em close, sobre um fundo azul com luz suave.

Escola Alemã Corcovado

  • UX/UI
  • Landing page
  • Design system

Uma vez Corcovado, sempre Corcovado.

Landing page de recadastro de ex-alunos para os 61 anos da escola: mobile primeiro, em português e alemão, com um formulário de dois minutos e uma narrativa para despertar o orgulho de pertencer.

Ano
2026
Papel
UX/UI Designer · pesquisa, direção visual, design system, layout, protótipo e handoff
Estúdio
Estúdio Sync
Entregas
Landing page em mobile e desktop, em português e alemão, página de agradecimento, 8 estados do formulário, protótipo navegável e design system

Contexto

A Escola Alemã Corcovado, no Rio de Janeiro, é o encontro de duas culturas: oferece as conclusões brasileira e alemã e tem uma tradição forte nas artes. Em 2026 completa 61 anos, com milhares de ex-alunos de várias gerações e nacionalidades. A escola lançava uma campanha para recadastrar esses ex-alunos, e a landing page é o destino dela.

Desafio

Fazer pessoas que saíram da escola há anos, ou décadas, pararem o que estão fazendo no celular e preencherem um formulário. O briefing pedia um sentimento: orgulho de pertencer. Era um convite de reencontro, não uma venda.

A página

Gente em primeiro plano, frase curta por cima e o amarelo só no botão.

Estrutura

Onze dobras, uma ideia por vez

Topo

TopoUm encontro real de ex-alunos e a frase da campanha.

Formulário

Oito estados, todos desenhados

O formulário é o coração da página. Cada estado foi desenhado para o desenvolvimento não precisar adivinhar.

O estado padrão, com exemplos nos campos.

Formulário: Vazio
Idiomas

Duas línguas, uma página

O seletor PT/DE troca a página inteira. Quem mora na Alemanha lê na língua em que vive hoje.

PTDE
Agradecimento

O obrigado que chama a turma

Logo depois do envio, quando a pessoa está mais engajada, a página convida a seguir a escola e a chamar a própria turma.

O obrigado que chama a turma
Design system

A base, antes das telas

Variáveis com nome de CSS, estilos e cerca de 20 componentes com variantes, prontos para o desenvolvimento.

Tipografia

Uma vez Corcovado,

sempre Corcovado.

Barlow
Bold 70 · SemiBold 32 · Regular 16
Caveat Brush
Regular 40 · 30

Cores

  • color/bg/brand#005EBC
  • color/bg/brand-deep#062A52
  • color/action/primary#FFCC00
  • color/action/primary-hover#F2BE00
  • color/text/success#077A28
  • color/bg/section-green#E7F5EB
  • color/bg/paper#F6F3EC
  • color/bg/brand-subtle#EAF2FB
  • color/text/secondary#44546A
  • color/text/danger#B3261E

Espaçamento

4812162432486496

Raios

sm8
md12
lg20
full999

Componentes

Página de componentes do Figma: ícones, botões, chips, checkbox de LGPD, seletor de idioma, campos, cards, mensagens e números.

O que foi feito

Interface
Imersão no site e nas referências do cliente, direção visual validada em uma tela, mobile primeiro e depois desktop. O formulário recebeu todos os estados, e o protótipo navegável funciona como a página real, com rolagem até o formulário, validação, envio, agradecimento e troca de idioma.
Design system
Base montada no Figma antes das telas: variáveis de cor, espaçamento e raio com nome de CSS, estilos de texto e sombra e cerca de 20 componentes com variantes, como botão, campo, lista, escolha única, chips, checkbox de LGPD, seletor de idioma, cards e mensagens.

Decisões importantes

  • Uma única cor de ação: o amarelo só aparece em "Quero me recadastrar" e "Enviar recadastro".
  • O topo mostra gente, não prédio: a primeira imagem é um encontro real de ex-alunos.
  • Números logo depois do topo e a história logo antes do formulário, para chegar a ele com a memória aquecida.
  • Formulário curto de verdade: seis campos obrigatórios, o resto opcional.
  • Erro que ajuda: cada mensagem diz o que falta e como corrigir, sem perder o que já foi digitado.
  • Duas línguas de verdade: o seletor PT/DE troca a página inteira.
  • Página de agradecimento que multiplica: convida a seguir a escola no LinkedIn e a chamar a turma.

Próximo projeto

Capa do case da Sonhe Gramado: o logotipo em linho sobre a foto de um chalé de madeira em Gramado, ao entardecer.

Sonhe Gramado2026

Uma marca de hospitalidade com alma, da identidade à experiência digital.

Criei a identidade visual da Sonhe, uma marca de refúgios e hospitalidade de experiência em Gramado, e desenhei a experiência do site: da paleta e da tipografia às telas que apresentam as hospedagens, a Loja Conceito e ajudam o hóspede a planejar a estadia.

  • Branding
  • UI/UX
  • Web design