Estúdio de arquiteturaCidade do México
chiluca.
Site de um estúdio de arquitetura da Cidade do México que trabalha com pedra vulcânica, cal e madeira da região. O site precisava mostrar como o estúdio pensa a luz e o material, além das fotos das obras.
Estudo de caso
O desafio.
Em sites de arquitetura, a fotografia faz quase todo o trabalho: a obra aparece pronta, e o raciocínio que levou até ela fica de fora. Para quem vai construir uma casa ou reabilitar um edifício, isso diz pouco sobre como o estúdio decide. A chiluca tem um argumento concreto, o material da região e o sol de cada lugar como matéria do projeto, e o site precisava demonstrá-lo com desenho, dado conferido e o andamento real de uma obra.
- 01 Foto que não explicaA fotografia mostra a sombra pronta, mas não diz por que ela cai ali nem como foi calculada.
- 02 Material como argumentoChiluca, tezontle, cal, parota e barro precisavam de origem e uso conferidos em fonte, sem lenda nem exagero.
- 03 Obra além do renderQuem contrata quer saber quanto tempo leva uma obra e por quais etapas ela passa até a entrega.
- 04 Regras do paísRegistro profissional, licença de obra e o aviso de privacidade da lei mexicana de 2025 tinham de estar corretos.
Método Flowt
O diagnóstico.
O site mostra como o estúdio decide, com o material, a luz e o corte de cada obra, e não apenas a fotografia do projeto pronto.
- VelocidadeFontes servidas pelo próprio site, com reservas de métrica ajustada, fotos em AVIF e WebP em várias larguras e cortes de sol desenhados em SVG.
- Acessibilidade verificávelLighthouse 100 e axe sem violações.
- Serviço e primeiro passoOs quatro serviços (residências, hospitalidade, espaços culturais, mobiliário) e a área de atuação estão no Estudio, com o começo em 3 passos: conversa, visita e proposta escrita com alcance, etapas e honorários.
- Conteúdo que informaO explorador mostra origem, uso e um fato conferido de cada material; as obras trazem corte com a altura real do sol e linha de obra com prazos e licenças.
Ver análise completa
Os 13 critérios, com a evidência de cada ponto: o que atende, o que atende em parte e o que depende de uma empresa real. Como a marca é um conceito, não existe um "antes" nem nota somada.
Ser encontrado
Título e descrição por página, um H1, JSON-LD de ProfessionalService, lista das obras e CreativeWork em cada obra. Parcial: noindex de propósito, sem menções de terceiros e endereço só com o bairro.
Marca conceito, sem avaliações reais. Num projeto real, volume, recência e respostas das avaliações do Google são medidos antes e depois.
Marca conceito, sem Perfil do Google. Num projeto real, completude, fotos, categoria e horário do perfil são medidos antes e depois.
Ser escolhido
Diz o que faz e onde (estúdio de arquitetura em Roma Norte, CDMX) e o diferencial: cada obra começa pelo estudo de sombra. Não diz para quem; o tipo de obra só aparece no índice.
5 de 6 checagens
Sócios com nome, papel, cédula profissional e registro de DRO marcados como exemplo, e cinco obras com ficha, corte de sol e linha de obra. Numa empresa real entram obras e fotos próprias.
Não há canais externos para comparar. Dentro do site, bairro, ano de fundação e nomes dos sócios são iguais no rodapé, no Estudio e nas fichas das obras.
Marca conceito, sem perfil no Instagram. Num projeto real, mede-se se o perfil é encontrável pelo serviço e pela cidade e se leva ao site.
Os quatro serviços (residências, hospitalidade, espaços culturais, mobiliário) e a área de atuação estão no Estudio, com o começo em 3 passos: conversa, visita e proposta escrita com alcance, etapas e honorários.
O explorador mostra origem, uso e um fato conferido de cada material; as obras trazem corte com a altura real do sol e linha de obra com prazos e licenças.
Ser chamado
Fontes servidas pelo próprio site, com reservas de métrica ajustada, fotos em AVIF e WebP em várias larguras e cortes de sol desenhados em SVG.
Lighthouse 99 no celular · LCP 2,0 s
Lighthouse 100 e axe sem violações. No índice, a linha em foco pelo teclado mostra o anel por fora e a capa sem cobrir o texto; as abas de materiais respondem às setas.
axe: 0 violações
Aviso de privacidade integral em página própria e aviso simplificado junto ao formulário, como pede a lei mexicana de 2025; nenhum rastreador. Fica parcial porque não há medição instalada, por ser conceito.
O contato fica a 2 toques (Menú, Contacto) ou no fim da home, a 7.000 px; 8 toques até enviar. Diz que a resposta traz proposta de visita, sem prazo nem WhatsApp ou telefone.
2 toques até o formulário · 8 até enviar
Obrigações do setorA cédula profissional da arquiteta responsável e o registro de DRO aparecem marcados como exemplo, e o aviso de privacidade segue a lei mexicana de 2025, com a versão simplificada junto ao formulário.
Num projeto real, cada critério é medido antes e depois, com a mesma régua e a evidência de cada ponto. Não há nota: o que se vê é quantos pontos continuam abertos.
Estratégia
Estratégia e mapa do site.
A home abre com um muro: as fotos das obras se assentam fiada por fiada, como cantaria. Depois vêm um índice tipográfico das cinco obras, o manifesto e um explorador dos cinco materiais, com origem conferida. Todas as obras seguem o mesmo molde: ficha em formato de etiqueta de museu, um corte com estudo de sol calculado para a latitude do lugar e uma linha de obra com etapas e meses. O contato pergunta o tipo de projeto e em que etapa ele está, para que a primeira resposta já proponha uma visita.
01Início
- Muro de fotos
- Índice de projetos
- Manifesto
- Explorador de materiais
- O estúdio
02Obra (cinco páginas)
- Cabeçalho com ficha resumida
- Capa e texto
- Estudo de sombra
- Ficha e materiais
- Linha de obra
- Próxima obra
03Estúdio
- Abertura
- Sócios e o porquê do nome
- O que fazemos e como começa um projeto
- Contato com aviso de privacidade
04Aviso de privacidade
- Aviso integral
Sistema visual
Tipografia, cor e ritmo.
Syne, no peso em que se alarga, ocupa a linha inteira do índice e dá aos nomes das obras escala de fachada; Work Sans mantém fichas e textos legíveis. O fundo basalto, quase preto, trata a sombra como espaço, e a cal aparece nas seções de desenho e de materiais. O ocre fica nos detalhes e o tezontle só em formas. As fotos surgem por uma borda diagonal, inclinada como o sol de dezembro.
- Muro de fotos em fiadas
- Índice com capa que segue o cursor
- Explorador de materiais
- Corte com estudo de sol
- Linha de obra
Momento assinatura
Muro, índice e materiais.
Ao rolar, as fotos se assentam como silhares de um muro. No índice, a capa de cada obra segue o cursor e as outras linhas se apagam; pelo teclado, a capa aparece ao lado do nome em foco. O explorador abre os cinco materiais em close, com lupa, origem conferida e as obras em que cada um aparece. O visitante vai da imagem ao material e do material à obra sem sair da home.
No celular
Feito para a tela pequena.
Três telas do site num celular de 390 px de largura, a mais comum hoje.
Recibos
Desempenho medido.
As notas abaixo são do site publicado, medidas pelo Lighthouse do Google. Não são uma promessa: são o estado do site no dia da medição. As demonstrações são apresentadas em vídeo. As medições registram o estado do projeto na data indicada.
No celular
- Maior elemento visível (LCP)
- 2.0 s
- Estabilidade (CLS)
- 0
- Bloqueio (TBT)
- 0 ms
No computador
- Maior elemento visível (LCP)
- 0.4 s
- Estabilidade (CLS)
- 0
- Bloqueio (TBT)
- 0 ms
Medido em 03/10/2026 com o Lighthouse 13.5.0, celular simulado e computador. *O SEO fica abaixo de 100 de propósito: o site conceito leva a instrução noindex para não aparecer no Google nem competir com empresas reais. Acessibilidade conferida também com o axe (zero violações) e alinhamento revisado em 7 larguras de tela.
Bastidores
Ficha técnica.
- Páginas
- Início, cinco páginas de obra, Estúdio, Aviso de privacidade e página 404
- Idiomas
- Espanhol (México)
- Tecnologia
- HTML, CSS e JavaScript sem framework, gerados por um script próprio em Python
- GSAP e ScrollTrigger para o muro, o índice e a linha de obra
- Rolagem nativa, sem biblioteca de suavização
- Cortes com estudo de sol gerados em SVG a partir da latitude de cada lugar
- Fotos em AVIF com WebP de reserva
- Fontes servidas pelo próprio site, com métrica de reserva ajustada
- Imagens
- Fotografias geradas por IA a partir de material e luz, sem imitar obras de escritórios reais, reveladas como uma série única; cortes, estudos de sol e o desenho de montagem da mesa feitos em SVG no código.
- Acessibilidade
- Índice e abas de materiais operáveis por teclado, capa visível no foco sem cobrir a linha, versão sem movimento, contraste AA calculado e zero violações no axe.
- Regras do setor
- Segue a LFPDPPP de 2025, com aviso simplificado junto ao formulário e aviso integral em página própria; registros profissionais aparecem como exemplo e as obras, como fictícias.
Comece agora
Vamos colocar o seu digital no nível do seu serviço.
Comece pelo diagnóstico gratuito: a gente mede a sua presença digital e mostra, ponto a ponto, o que corrigir primeiro.
Agenda aberta para novos projetos
Conte sobre o seu projeto
Poucas informações bastam. O resto a gente pergunta.