Stucco.

02O pedido do cliente

O estúdio vivia de indicação e redes sociais. Não havia um lugar que reunisse as obras, explicasse cada serviço ou deixasse claro em quais cidades a empresa atende. O cliente pediu:

• um site com cara de escritório de arquitetura, não de prestador genérico;
• rápido e fácil de usar no celular, onde está a maior parte do público;
• um caminho curto até o orçamento, direto no WhatsApp;
• presença nas buscas do Google nas cidades atendidas;
• uma forma simples de conseguir mais avaliações no Google.

No meio do projeto, a marca mudou de nome para homenagear o fundador. Todo o sistema visual foi adaptado ao nome novo.

03Objetivos

1. Valorizar o trabalho com fotos grandes e uma galeria organizada por serviço.
2. Explicar os cinco serviços de forma clara, cada um com sua página.
3. Gerar pedidos de orçamento qualificados, que já chegam com as informações da obra.
4. Ganhar visibilidade nas buscas locais da região.
5. Manter a mesma identidade no site, nos impressos e nas redes.

04O que foi feito

• Identidade visual
• Logo em blocos tipográficos com um ponto amarelo, que funciona em positivo, em negativo e sobre amarelo.
• Uma versão animada do logo, em que o ponto cai no lugar e os blocos se reorganizam. Ela virou a assinatura do site.
• Paleta de grafite, preto, bege e amarelo, tipografia Barlow e uma linguagem de blocos e “pixels” que se repete em toda a marca.
• Guia de estilo com cores, tipografia, componentes e regras de uso.
• Site
• 25 páginas: home, página geral de serviços, uma página para cada um dos cinco serviços, galeria de projetos, sobre, regiões atendidas, oito páginas de cidade, contato, FAQ, avaliação, política de privacidade e página 404.
• Galeria em mosaico com mais de 45 obras, filtros por serviço e detalhes de cada projeto ao toque.
• Formulário de orçamento em três etapas, com opções clicáveis para serviço, tipo de imóvel, etapa da obra e área. Ao enviar, o WhatsApp abre com a mensagem já escrita.
• Botão de orçamento sempre visível, cabeçalho compacto que aparece na rolagem e botão flutuante do WhatsApp.
• Animações de revelação ligadas à rolagem, como blocos sobrepostos e fotos que se abrem como cortina. Elas respeitam a configuração de redução de movimento do sistema.
• SEO local
• Uma página de serviço para cada especialidade, com conteúdo próprio, perguntas frequentes e links para os outros serviços.
• Página de regiões atendidas com mapa dos 165 municípios num raio de 150 km, montado a partir de dados oficiais do IBGE, com links para as páginas de cidade.
• Oito páginas de cidade com texto, distância e perguntas frequentes próprios, ligadas entre si e aos serviços.
• Títulos e estrutura de cabeçalhos organizados por página, texto alternativo descritivo em todas as fotos e imagens otimizadas para carregar rápido no celular.
• Fluxo de avaliações no Google, que fortalece o perfil da empresa nas buscas locais. A página de avaliação fica fora do índice do Google.
• Avaliações
• Página dedicada que leva o cliente direto para avaliar a empresa no Google.
• QR code impresso no cartão de avaliação e num adesivo de 20 × 28 cm para os carros da equipe.
• Impressos e redes
• Cartão de visita e cartão de avaliação no formato 9 × 5 cm, com sangria e marcas de corte, prontos para a gráfica.
• Adesivo de QR code para os carros, que já são envelopados com a marca.
• Ícone de perfil, carrossel de primeiro post e sugestão de bio para as redes.
• Favicon em todos os tamanhos.
• Entrega para desenvolvimento
• Pacote de referência em inglês com todas as páginas, tokens de cor e tipografia, imagens nomeadas e o logo animado pronto para uso.

05A marca

Peças impressas e de redes sociais feitas para o estúdio, mostradas com o nome fictício Stucco. Todos os QR codes levam para um endereço de exemplo reservado.

06Tecnologias

Site

Astro

Demo do portfólio

HTML, CSS e JavaScript puros, sem build e sem dependências

Animações

CSS com animações ligadas à rolagem

Fonte

Barlow, hospedada no próprio site

Mapa

Dados de municípios do IBGE

Repositório

GitHub

07Resultado

Marca, site e materiais funcionam como um único sistema, do logo ao formulário de orçamento. O estúdio passou a ter:

• um portfólio organizado por serviço;
• páginas pensadas para aparecer nas buscas de cada cidade da região;
• um caminho de dois toques até o orçamento no WhatsApp;
• um fluxo de avaliações que começa num cartão ou no carro da equipe e termina no Google.