Estudio de arquitecturaCiudad de México
chiluca.
Sitio de un estudio de arquitectura de la Ciudad de México que trabaja con piedra volcánica, cal y madera de la región. El sitio tenía que mostrar cómo el estudio piensa la luz y el material, además de las fotos de las obras.
Caso de estudio
El desafío.
En los sitios de arquitectura, la fotografía hace casi todo el trabajo: la obra aparece terminada, y el razonamiento que llevó a ella queda fuera. Para quien va a construir una casa o rehabilitar un edificio, eso dice poco sobre cómo decide el estudio. El estudio chiluca tiene un argumento concreto, el material de la región y el sol de cada lugar como materia del proyecto, y el sitio tenía que demostrarlo con dibujo, datos verificados y el avance real de una obra.
- 01 Foto que no explicaLa fotografía muestra la sombra terminada, pero no dice por qué cae ahí ni cómo se calculó.
- 02 Material como argumentoChiluca, tezontle, cal, parota y barro necesitaban origen y uso verificados en fuentes, sin leyendas ni exageraciones.
- 03 Obra más allá del renderQuien contrata quiere saber cuánto tarda una obra y por qué etapas pasa hasta la entrega.
- 04 Reglas del paísEl registro profesional, la licencia de construcción y el aviso de privacidad de la ley mexicana de 2025 tenían que estar correctos.
Método Flowt
El diagnóstico.
El sitio muestra cómo decide el estudio, con el material, la luz y el corte de cada obra, y no solo la fotografía del proyecto terminado.
- VelocidadFuentes servidas por el propio sitio, con fuentes de respaldo de métrica ajustada, fotos en AVIF y WebP en varios anchos y cortes de sol dibujados en SVG.
- Accesibilidad verificableLighthouse 100 y axe sin violaciones.
- Servicio y primer pasoLos cuatro servicios (residencias, hospitalidad, espacios culturales, mobiliario) y la zona de trabajo están en Estudio, con el inicio en 3 pasos: conversación, visita y propuesta escrita con alcance, etapas y honorarios.
- Contenido que informaEl explorador muestra el origen, el uso y un dato verificado de cada material; las obras traen un corte con la altura real del sol y una línea de obra con plazos y licencias.
Ver el análisis completo
Los 13 criterios, con la evidencia de cada punto: lo que cumple, lo que cumple en parte y lo que depende de una empresa real. Como la marca es un concepto, no existe un "antes" ni una nota total.
Ser encontrado
Título y descripción por página, un H1, JSON-LD de ProfessionalService, lista de las obras y CreativeWork en cada obra. Parcial: noindex a propósito, sin menciones de terceros y dirección solo con la colonia.
Marca conceptual, sin reseñas reales. En un proyecto real, el volumen, la recencia y las respuestas de las reseñas de Google se miden antes y después.
Marca conceptual, sin Perfil de Google. En un proyecto real, la completitud, las fotos, la categoría y el horario del perfil se miden antes y después.
Ser elegido
Dice qué hace y dónde (estudio de arquitectura en Roma Norte, CDMX) y el diferencial: cada obra empieza por el estudio de sombra. No dice para quién; el tipo de obra solo aparece en el índice.
5 de 6 verificaciones
Socios con nombre, rol, cédula profesional y registro de DRO marcados como ejemplo, y cinco obras con ficha, corte de sol y línea de obra. En una empresa real entran obras y fotos propias.
No hay canales externos para comparar. Dentro del sitio, la colonia, el año de fundación y los nombres de los socios son iguales en el pie de página, en Estudio y en las fichas de las obras.
Marca conceptual, sin perfil en Instagram. En un proyecto real, se mide si el perfil se puede encontrar por el servicio y la ciudad y si lleva al sitio.
Los cuatro servicios (residencias, hospitalidad, espacios culturales, mobiliario) y la zona de trabajo están en Estudio, con el inicio en 3 pasos: conversación, visita y propuesta escrita con alcance, etapas y honorarios.
El explorador muestra el origen, el uso y un dato verificado de cada material; las obras traen un corte con la altura real del sol y una línea de obra con plazos y licencias.
Ser contactado
Fuentes servidas por el propio sitio, con fuentes de respaldo de métrica ajustada, fotos en AVIF y WebP en varios anchos y cortes de sol dibujados en SVG.
Lighthouse 99 en celular · LCP 2,0 s
Lighthouse 100 y axe sin violaciones. En el índice, la línea enfocada con el teclado muestra el anillo por fuera y la portada sin tapar el texto; las pestañas de materiales responden a las flechas.
axe: 0 violaciones
Aviso de privacidad integral en página propia y aviso simplificado junto al formulario, como pide la ley mexicana de 2025; ningún rastreador. Queda parcial porque no hay medición instalada, por ser un concepto.
El contacto está a 2 toques (Menú, Contacto) o al final de la home, a 7.000 px; 8 toques hasta enviar. Dice que la respuesta trae una propuesta de visita, sin plazo, WhatsApp ni teléfono.
2 toques hasta el formulario · 8 hasta enviar
Obligaciones del sectorLa cédula profesional de la arquitecta responsable y el registro de DRO aparecen marcados como ejemplo, y el aviso de privacidad sigue la ley mexicana de 2025, con la versión simplificada junto al formulario.
En un proyecto real, cada criterio se mide antes y después, con la misma regla y la evidencia de cada punto. No hay nota: lo que se ve es cuántos puntos siguen abiertos.
Estrategia
Estrategia y mapa del sitio.
La home abre con un muro: las fotos de las obras se asientan hilada por hilada, como sillería. Después vienen un índice tipográfico de las cinco obras, el manifiesto y un explorador de los cinco materiales, con origen verificado. Todas las obras siguen el mismo molde: ficha con formato de etiqueta de museo, un corte con estudio de sol calculado para la latitud del lugar y una línea de obra con etapas y meses. El contacto pregunta el tipo de proyecto y en qué etapa está, para que la primera respuesta ya proponga una visita.
01Inicio
- Muro de fotos
- Índice de proyectos
- Manifiesto
- Explorador de materiales
- El estudio
02Obra (cinco páginas)
- Encabezado con ficha resumida
- Portada y texto
- Estudio de sombra
- Ficha y materiales
- Línea de obra
- Siguiente obra
03Estudio
- Apertura
- Socios y el porqué del nombre
- Qué hacemos y cómo empieza un proyecto
- Contacto con aviso de privacidad
04Aviso de privacidad
- Aviso integral
Sistema visual
Tipografía, color y ritmo.
Syne, en el peso en que se ensancha, ocupa la línea entera del índice y da a los nombres de las obras escala de fachada; Work Sans mantiene legibles fichas y textos. El fondo basalto, casi negro, trata la sombra como espacio, y la cal aparece en las secciones de dibujo y de materiales. El ocre queda en los detalles y el tezontle solo en formas. Las fotos aparecen por un borde diagonal, inclinado como el sol de diciembre.
- Muro de fotos en hiladas
- Índice con portada que sigue el cursor
- Explorador de materiales
- Corte con estudio de sol
- Línea de obra
Momento distintivo
Muro, índice y materiales.
Al desplazarse, las fotos se asientan como sillares de un muro. En el índice, la portada de cada obra sigue el cursor y las demás líneas se apagan; con el teclado, la portada aparece junto al nombre enfocado. El explorador abre los cinco materiales en primer plano, con lupa, origen verificado y las obras en las que aparece cada uno. El visitante va de la imagen al material y del material a la obra sin salir de la home.
En el celular
Hecho para la pantalla pequeña.
Tres pantallas del sitio en un celular de 390 px de ancho, el más común hoy.
Comprobantes
Rendimiento medido.
Las puntuaciones siguientes se midieron en el sitio publicado con Google Lighthouse. No son una promesa: reflejan el estado del sitio en la fecha de medición. Las demostraciones se presentan en video. Las mediciones registran el estado del proyecto en la fecha indicada.
En el celular
- Elemento visible más grande (LCP)
- 2.0 s
- Estabilidad (CLS)
- 0
- Bloqueo (TBT)
- 0 ms
En computadora
- Elemento visible más grande (LCP)
- 0.4 s
- Estabilidad (CLS)
- 0
- Bloqueo (TBT)
- 0 ms
Medido el 03/10/2026 con Lighthouse 13.5.0, en celular simulado y en computadora. *El SEO queda por debajo de 100 a propósito: el sitio conceptual lleva la instrucción noindex para no aparecer en Google ni competir con empresas reales. La accesibilidad también se verificó con axe (cero violaciones) y la alineación se revisó en 7 anchos de pantalla.
Detrás de escena
Ficha técnica.
- Páginas
- Inicio, cinco páginas de obra, Estudio, Aviso de privacidad y página 404
- Idiomas
- Español (México)
- Tecnología
- HTML, CSS y JavaScript sin framework, generados por un script propio en Python
- GSAP y ScrollTrigger para el muro, el índice y la línea de obra
- Desplazamiento nativo, sin biblioteca de suavizado
- Cortes con estudio de sol generados en SVG a partir de la latitud de cada lugar
- Fotos en AVIF con WebP de respaldo
- Fuentes servidas por el propio sitio, con métrica de respaldo ajustada
- Imágenes
- Fotografías generadas con IA a partir de material y luz, sin imitar obras de estudios reales, reveladas como una serie única; cortes, estudios de sol y el dibujo de montaje de la mesa hechos en SVG en el código.
- Accesibilidad
- Índice y pestañas de materiales operables con teclado, portada visible en el foco sin tapar la línea, versión sin movimiento, contraste AA calculado y cero violaciones en axe.
- Reglas del sector
- Sigue la LFPDPPP de 2025, con aviso simplificado junto al formulario y aviso integral en página propia; los registros profesionales aparecen como ejemplo y las obras, como ficticias.
Empieza ahora
Llevemos tu presencia digital al nivel de tu servicio.
Empieza con el diagnóstico gratuito: medimos tu presencia digital y te mostramos, punto por punto, qué corregir primero.
Agenda abierta para nuevos proyectos
Cuéntanos sobre tu proyecto
Con poca información basta. Lo demás te lo preguntamos.