GCA Website
Um site novo para um escritório de arquitetura reposicionado para pequenos incorporadores, construído sobre um design system próprio.
Um escritório, três frentes.
A Guilherme Conte Arquitetura se reposicionou para pequenos incorporadores e construtores. O trabalho agora corre em três frentes: GC Ventures, com estudos de mercado, vocação e viabilidade, GC Build, com a arquitetura de casas, edifícios, interiores e sinalização, e a plataforma de viabilidade Projeto Simples.
O site antigo mostrava um portfólio. O novo precisava explicar um método que liga as três frentes, do lote à documentação, para um público que pensa em números.
Nove etapas, cada uma fechada antes da próxima.
Cada etapa teve sua entrega e uma revisão antes de seguir: a pesquisa definiu a referência de grid, o copy foi aprovado no Figma antes de qualquer layout, e as mudanças depois entraram como change requests que reabriram só o que dependia delas.
- 01 Discovery
- 02 Pesquisa
- 03 Copy
- 04 Design system
- 05 Figma
- 06 Motion
- 07 Build
- 08 QA
- 09 Entrega
Quatro decisões que definiram o site.
- 01
Um grid que se vê.
Cada seção fica num container emoldurado com linhas de 1 px visíveis, e as células encostam nas linhas, como num desenho técnico.
- 02
Um método, três frentes.
O Sistema GC organiza o trabalho em três squads, Descoberta, Desenvolvimento e Documentação, comuns a todos os serviços.
- 03
Uma jornada que se rola.
Um diagrama evolui sobre o mesmo lote conforme o visitante rola, do terreno vazio a um edifício com lajes e janelas.
- 04
Nenhum formulário sem saída.
Um formulário em três etapas qualifica o contato e abre o WhatsApp com a mensagem pronta, para todo pedido chegar a uma pessoa.
408 variáveis, geradas direto no código.
Os tokens vivem no Figma e um script os escreve no CSS do site, então mudar uma cor ou um espaçamento chega a todas as páginas de um lugar só. Tipografia e espaçamentos escalam de forma fluida entre 1280 e 1920 px, com degraus de tablet e mobile em 1024 e 768.
- 408
- variáveis no total
- 307
- tokens semânticos
- 32
- conjuntos de componentes
- 3
- breakpoints: desktop, tablet, mobile
Uma curva, um ritmo.
Todo o movimento roda em GSAP com ScrollTrigger e rolagem suave do Lenis, numa única curva expo.out. Cada padrão é ligado no HTML por um atributo data-motion, os elementos do hero entram na ordem de leitura e tudo respeita o prefers-reduced-motion.
Do terrenoao projeto.
P1Letra a letra
Títulos do hero · blur 16 → 0 · escala 0.8 → 1 · 0,6 s · 25 ms por letra
Dados para decidir,arquitetura para executar.
P2Palavra a palavra
Títulos de seção · blur 16 → 0 · escala 0.85 → 1 · 0,5 s · 60 ms por palavra
Estudo de mercado, viabilidade earquitetura para pequenos incorporadorese construtores. Casas, edifícios einteriores.
P3Linha a linha
Texto corrido · sobe 24 px · 0,9 s · 80 ms por linha
- GC VENTURES
Saiba o que construir
antes de investir.P4Eyebrow
Rótulos de seção · sobe 12 px · 0,4 s
- GC VenturesGC BuildPlataforma
P5Filhos em sequência
Cards e listas · sobem 40 px · 0,7 s · 120 ms entre eles
P6Imagem
Fotos · escala 1.15 → 1 com fade · 1,2 s, depois parallax de ±4% na rolagem
- R$ 232 miem VGV estudado
P7Números
Números · a barra de carga enche e os dígitos sobem · 0,9 s
- Estudo preliminarEtapa 03AnteprojetoEtapa 04
P8Jornada
Palco fixo · a próxima etapa toma o lugar da anterior e o diagrama evolui com a rolagem
- Dados do loteEstudo de massaIndicadores financeiros
P10Pilha fixa
Painéis de funcionalidade · cada um prende abaixo do header e o próximo o cobre por inteiro
- Primeiro estudo gratuitoPrimeiro estudo gratuito
HoverBotão push
O fundo novo desce de cima e empurra o rótulo · 0,5 s
- Ver o método
HoverLink
O sublinhado cresce da esquerda · 0,4 s
prefers-reduced-motion:
reduceA11yMovimento reduzido
Com prefers-reduced-motion ligado, cada elemento aparece no estado final e a rolagem suave é desligada
Os mesmos nomes no Figma e no código.
32 conjuntos de componentes, de botões e tags à etapa da jornada, ao card de projeto e ao formulário em três etapas.
- Button
Button
Hover em push: o fundo novo desce de cima.
- Button
Button · hover
O estado de hover, como chega.
- Saiba mais
ButtonLink
O sublinhado cresce da esquerda.
- Arquitetura
Tag
Eyebrows e rótulos, raio de 4 px.
- R$ 232 miem VGV estudado
Stat
Números que resumem o escritório.
- 01TerrenoO que a legislação permite construir no lote.Você recebe: potencial construtivo e estudo de massa do lote.
JourneyStep
Uma etapa da jornada, cinco estados.
- GC BuildArquitetura para casas, edifícios e interioresDo estudo preliminar ao executivo, com disciplinas compatibilizadas antes da obra e cada decisão registrada pelo Sistema GC.CasasEdifíciosInterioresSinalizaçãoConhecer o GC Build
ServiceCard
Cada frente, como card ou como célula.
- Vocês são uma incorporadora?Não. A gente estuda e projeta. A decisão e o empreendimento são seus.
AccordionItem
Perguntas que abrem sob demanda.
- Nome completoGuilherme ConteComo podemos te chamar.
FormField
Campos, selects e áreas de texto.
- Construtor ou incorporadorQuero avaliar um terreno para construir.
ChoiceCard
Escolhas do formulário em três etapas.
- Em projetoResidencial MontereyResidencial multifamiliar · Caxias do Sul · 2026
ProjectCard
Cards do portfólio com zoom no hover.
- Squad 01DescobertaBriefing, estratégia e levantamentos antes de qualquer desenho.BriefingEstratégiaLevantamentosPrograma
MethodCard
O Sistema GC, um card por squad.
Home
A home apresenta as três frentes, a jornada do lote ao projeto, o método, os projetos selecionados e as perguntas que o incorporador faz primeiro.
GC Ventures e GC Build
Cada frente tem sua página com a mesma estrutura: o que entrega, a jornada sobre o mesmo lote, as etapas e um convite direto para o primeiro estudo.
Plataforma
A página da plataforma mostra cada funcionalidade com uma navegação fixa ao lado e mocks animados que redesenham telas reais do app.
As outras páginas
O método explica os três squads passo a passo, o portfólio filtra projetos por tipologia e o contato funciona como um formulário em três etapas.
Mobile
Toda página tem seu layout mobile em 375 px, com a imagem acima do texto no hero e os mesmos componentes redimensionados pelos tokens responsivos.
Lançar sem perder o que já funcionava.
O site novo manteve o contêiner do Google Tag Manager e a verificação do Search Console do anterior, e cada endereço antigo redireciona para a página nova. Política de privacidade, 404, sitemap e robots fizeram parte do build, não de um ajuste depois.
- /galeria → /portfolio
- /processo → /metodo
- /servicos → /
- /para-quem → /
- /politica-de-privacidade → /privacidade
Obrigado pela leitura.
- Design
- Guilherme Conte
- Front end
- Guilherme Conte, com ajuda de IA
- Ano
- 2026