Diseño web para arquitectos y estudios de arquitectura: guía completa 2026

Un estudio de arquitectura español que no cuida su web pierde proyectos antes de que suene el teléfono. En 2026 el prescriptor y el cliente final llegan por Google, por Instagram o por una recomendación que terminan verificando en la web antes de decidir si merece la pena una llamada. La página se ha convertido en el filtro silencioso que separa a los estudios que entran en la lista corta de los que ni siquiera llegan a la segunda ronda. Esta guía resume cómo construirla: desde el tipo de arquitectura narrativa que mejor encaja con tu práctica hasta los presupuestos reales de 2026, pasando por diez referentes españoles que vale la pena estudiar antes de empezar a diseñar.

Tres tipologías de web para un estudio de arquitectura

No hay un único modelo correcto de web para arquitectos. Hay tres grandes tipologías, y la elección condiciona la estructura, el CMS y el presupuesto. La primera es el portfolio puro: una web que casi no habla, solo muestra. Página de inicio con una rejilla de proyectos, ficha individual con fotografía a sangre, página de contacto y poco más. Es la elección natural del arquitecto autor o del estudio pequeño cuya marca personal es ya un activo. Funciona cuando los proyectos están fotografiados a nivel editorial y cuando el nombre del arquitecto vende por sí mismo.

La segunda tipología es la agencia con casos. Aquí la web explica procesos, equipo, servicios y pensamiento, además de mostrar obra. Las fichas de proyecto no son solo imágenes: incluyen ficha técnica, superficie, cliente, equipo, premios y, cuando es posible, un texto que cuente la decisión de proyecto. Es la elección de los estudios medios de interiorismo y arquitectura comercial que compiten por briefs, no por autoría, y necesitan transmitir fiabilidad además de talento.

La tercera es el showroom digital: una web pensada para interactuar con el espacio, con recorridos virtuales, planimetría descargable, materiales catalogados y, en ocasiones, un pequeño ecommerce para producto editado por el estudio. La utilizan los estudios de interiorismo con tiendas físicas (Masquespacio, Vilablanch) y los estudios que han convertido ciertos elementos de proyecto en productos de edición limitada. Es la tipología más cara y la que menos sentido tiene si el estudio no mueve producto propio.

Antes de encargar la web, el estudio debe decidir en cuál de las tres tipologías juega. Mezclar las tres suele acabar en una web lenta, confusa y cara de mantener. Nuestra guía sobre visual branding para estudios de interiorismo y arquitectura entra en cómo esta elección afecta a toda la identidad.

Elementos obligatorios de una web de estudio

Al margen de la tipología, hay un repertorio de elementos que una web de arquitectura seria incluye casi siempre. El hero es el primero: una imagen a pantalla completa (vídeo loop solo si está bien iluminado y pesa poco) con una frase breve que resuma la práctica del estudio. No es el sitio para listar servicios. Es el sitio para decidir si el visitante quiere seguir mirando. El error más común es poner un collage de proyectos como hero: dispersa en lugar de atraer.

El bloque de proyectos es el centro de la web. Rejilla de miniaturas con nombre, ciudad, año y tipología. La ficha interna de cada proyecto incluye galería (idealmente entre 8 y 15 imágenes), ficha técnica, un texto corto de 150 a 300 palabras y, cuando es posible, planimetría a baja resolución. La forma de navegar entre proyectos (siguiente, anterior, volver al listado) merece atención: una navegación sucia dispara el abandono.

La filosofía o pensamiento del estudio es un texto breve, no un ensayo. Dos o tres párrafos que respondan a qué pregunta intenta responder el estudio en cada proyecto. El visitante medio no lee páginas de teoría. Un párrafo bien escrito pesa más que un manifiesto de 2.000 palabras. El bloque de equipo necesita fotos reales, nombres completos y roles. Nada de siluetas, nada de "nuestro equipo". Esa transparencia construye confianza en una fase de la decisión en que el cliente apenas conoce al estudio.

Los servicios deben estar en una página aparte si la práctica es diversa (reforma integral, obra nueva, dirección facultativa, retail design, consultoría). Si el estudio es monotemático, basta con una línea en la home. Las publicaciones y prensa suman cuando existen: menciones en medios, premios, conferencias. Y el contacto cierra la web: un formulario corto, un email directo, dirección física y, opcionalmente, redes. El teléfono grande en la cabecera es cosa de servicios de reparación de urgencia, no de arquitectura.

Diez referentes españoles que vale la pena estudiar

Antes de encargar una web conviene estudiar lo que han hecho los estudios que mejor comunican en España. No para copiar: para ver cómo decisiones distintas sirven a propuestas distintas. Esta es una selección de diez referencias con un apunte sobre lo que hace cada una.

Lagranja Design construye su web alrededor de la narrativa del lugar: cada proyecto tiene un prólogo largo y una tipografía con mucho aire. La rejilla de proyectos no es exhaustiva, está curada. Es un ejemplo de que menos cantidad bien editada vence a más cantidad presentada en masa.

Lázaro Rosa-Violán apuesta por una experiencia inmersiva con galerías a sangre y navegación horizontal en algunos proyectos. La web respira el mismo lujo detallista que firma su trabajo. El tono visual es inseparable del tono del estudio.

Sandra Tarruella mantiene una línea sobria con tipografía serif y mucho blanco. La página de proyectos funciona como un libro: títulos jerárquicos, pocos elementos distractores, lectura cómoda en pantalla grande y móvil.

El Equipo Creativo trabaja con portadas muy cinematográficas y textos que cuentan la decisión de proyecto. Su web demuestra que el interiorismo de restauración se defiende tanto en la imagen como en el relato.

Estudio 4B opta por una presentación limpia, con fichas técnicas visibles de un vistazo. Pensamiento práctico, con un visitante medio (promotor, propietario) en mente. Es un buen ejemplo para estudios de arquitectura con enfoque residencial de alta gama.

Masquespacio empuja la web hacia el showroom digital: color pleno, animación justa, catálogos de materiales. Encaja con una práctica que ha convertido el color y el pattern en una firma reconocible.

Vilablanch combina proyectos y tienda en una misma propuesta. La navegación distingue claramente los dos mundos sin romper la unidad visual. Útil para estudios que venden proyecto y producto.

Fran Silvestre Arquitectos presenta sus obras con una fotografía de autor casi exclusiva. La web se parece a un libro de arquitectura: cada proyecto tiene su propio tono cromático y su propio ritmo de maquetación.

Luis Puerta opta por una web minimal, casi silenciosa, con énfasis en el detalle textil y el ambiente. La tipografía fina y la escasez de texto refuerzan la idea de serenidad.

Isabel López Vilalta apuesta por la calidez cromática y una navegación muy sencilla, pensada para un visitante no profesional (cliente final residencial). Es un buen contraejemplo de la web extremadamente conceptual.

Qué CMS elegir en 2026

La elección del CMS condiciona el presupuesto, el mantenimiento y lo que el estudio podrá actualizar sin depender de un desarrollador. En 2026 la foto es la siguiente: Webflow ha pasado a dominar el segmento premium de estudios creativos (en torno al 42% de cuota según estimaciones del sector en Europa Occidental), WordPress mantiene presencia en estudios con blog editorial, Cargo y Cargo+ son estándar entre estudios jóvenes y Framer está escalando rápido entre estudios de autor que valoran la micro-animación.

La decisión no es solo técnica. Es también sobre quién va a mantener la web durante los próximos tres años. Un Webflow autogestionado por el equipo del estudio dura más y envejece mejor que un WordPress a medida que depende de un desarrollador externo que puede dejar de dar servicio. La ergonomía de edición del CMS pesa tanto como su potencia.

Presupuestos reales en España, 2026

Los rangos cambian según la agencia, la ciudad y el nivel de personalización. Esta tabla resume los márgenes realistas en el mercado español en 2026, sin extremos (ni plantillas gratis ni proyectos de 60.000 euros con integraciones corporativas).

Un apunte sobre el coste total de propiedad. El presupuesto inicial es solo una parte de la factura real. Entre hosting, dominios, mantenimiento, iteraciones menores, fotografía nueva y traducciones, la web se come entre 1.500 y 4.000 euros al año en costes operativos para un estudio medio. Ignorar esa partida es la causa número uno de webs abandonadas tras doce meses. Para contextualizar los rangos de identidad visual que suelen acompañar a estos proyectos, revisa nuestra guía de precios de visual branding para estudios creativos en 2026.

Core Web Vitals cuando la galería pesa

Las webs de arquitectura cargan muchas imágenes de alta resolución. Si no se trabajan bien, el rendimiento se desploma y Google lo nota. En 2026 los Core Web Vitals siguen siendo tres: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) y CLS (Cumulative Layout Shift). Para un portfolio de arquitectura los dos que suelen fallar son LCP y CLS. El culpable casi siempre es la imagen pesada del hero y la galería sin dimensiones declaradas.

La solución pasa por cuatro palancas. Primera, formato: AVIF cuando el CMS lo soporta en servido automático, WebP con fallback a JPG progresivo si no. PNG solo para plantas y detalles con texto. Segunda, tamaño servido: ninguna foto por encima de 300 KB en la versión que ve el navegador. El original de 12 MB puede quedar guardado en el gestor documental, pero no debe cargarse en la web.

Tercera, lazy loading: las imágenes fuera del viewport se cargan solo cuando el usuario se acerca a ellas. Es nativo en HTML (loading="lazy") y los CMS modernos lo activan por defecto. El hero no debe llevar lazy loading, porque es la primera imagen visible y necesita cargar de inmediato. Cuarta, CDN: Cloudflare o Vercel servido desde el edge más cercano al visitante reduce el LCP entre un 30 y un 50% en pruebas reales. Para un estudio con tráfico internacional (publicaciones, premios, visitantes de América Latina) es casi obligatorio.

Para evitar el CLS, cada imagen debe tener declaradas sus dimensiones (width y height en el HTML) o un contenedor con proporción fija (aspect-ratio en CSS). Si no, el navegador deja un hueco que se mueve cuando la imagen termina de cargar y la experiencia percibida se degrada. Pequeño detalle, impacto grande en el ranking.

SEO local y Google Business Profile para arquitectos

Mucho estudio asume que trabajar en toda España significa prescindir del SEO local. Es un error. Una parte importante de las búsquedas de arquitectos y estudios de interiorismo lleva un modificador geográfico (ciudad, barrio, provincia). Cliente final residencial, promotores de obra pequeña y prescriptores locales buscan así. Google Business Profile sigue siendo la vía más rápida y gratuita de aparecer en esos resultados.

La ficha debe incluir dirección física (aunque sea un espacio compartido), horario, teléfono, categoría principal y secundarias (arquitecto, estudio de interiorismo, diseñador de interiores según toque), foto de la fachada o del espacio de trabajo, al menos 10 fotos de proyecto y actualizaciones periódicas. Pedir reseñas al cliente final después de la entrega del proyecto es más eficaz que cualquier estrategia pagada en los primeros meses.

En la web, el SEO local se refuerza con una página de contacto que incluya dirección física en texto plano (no solo imagen), un mapa embebido y datos estructurados LocalBusiness en JSON-LD. Si el estudio tiene varias oficinas (Madrid, Barcelona, Valencia), conviene tener una página por sede, con contenido específico y no un simple duplicado traducido. Esta misma lógica funciona en todos los sectores locales y la cubrimos a fondo en nuestra guía de branding industrial en Barcelona.

Las palabras clave realistas para un estudio en 2026 son combinaciones de servicio más ciudad (reforma integral Madrid centro, interiorismo retail Barcelona, arquitecto residencial Valencia). El volumen individual de cada una es bajo, pero la intención de compra es muy alta y la competencia por posicionarse es menor que en términos genéricos. Un buen trabajo de SEO on-page sobre 20 o 30 combinaciones de este tipo rinde más que intentar competir por "estudio de arquitectura" a secas.

El formulario RFQ que convierte

El formulario de contacto es el punto de fricción máximo de la web. Un formulario demasiado largo mata la conversión. Un formulario demasiado corto trae leads de mala calidad. El equilibrio óptimo para un estudio de arquitectura en 2026 está en seis campos.

Los campos que sí deben aparecer:

1. Nombre y apellido (un solo campo o dos, da igual)
2. Email
3. Tipo de proyecto (selector con 5 a 7 opciones: reforma, obra nueva, interiorismo residencial, retail, oficina, otro)
4. Rango de presupuesto (selector: menos de 30.000 €, 30.000 a 100.000 €, 100.000 a 300.000 €, más de 300.000 €)
5. Horizonte temporal (selector: ya, 3 a 6 meses, más de 6 meses, exploratorio)
6. Campo de mensaje libre (sin obligar a mínimos de caracteres)

Los campos que no deben aparecer en el primer formulario:

1. Teléfono obligatorio (opcional sí, obligatorio reduce la conversión entre un 20 y un 40%)
2. Dirección completa (irrelevante en primer contacto)
3. Subida de documentos o planos obligatoria (barrera enorme, se pide después)
4. Preguntas abiertas múltiples ("Cuéntanos tu proyecto", "¿Qué esperas de nosotros?", "¿Cómo nos has conocido?")
5. Casillas de marketing precargadas (ilegal según RGPD y mata la confianza)

El selector de rango de presupuesto es el campo que más estudios se resisten a incluir y, a la vez, el que mejor pre-cualifica al lead. Un visitante que marca "menos de 30.000 €" para una obra nueva se descarta solo. Un visitante que marca "más de 300.000 €" se trata con prioridad. Para profundizar en la arquitectura de conversión de este tipo de formularios, nuestra guía sobre web portfolio para arquitectos y diseñadores que convierte entra en detalle.

Errores comunes que vemos cada mes

Después de analizar decenas de webs de estudios españoles, los errores se repiten con una regularidad que llama la atención. Esta lista no es exhaustiva pero cubre el 80% de los problemas serios.

1. Hero con un collage de proyectos en lugar de una sola imagen potente.
2. Fotografía mezclada: profesional en algunos proyectos, de móvil en otros. Corrompe la percepción del conjunto.
3. Fichas de proyecto sin datos técnicos (superficie, año, cliente, equipo).
4. Texto corporativo vacío en la sección "sobre nosotros": frases de tipo "estudio multidisciplinar que apuesta por la calidad".
5. Formulario de contacto con más de ocho campos y validación agresiva.
6. Blog con el último post de hace tres años. Peor que no tener blog.
7. Ausencia de versión móvil decente. Más del 60% del tráfico de un estudio llega por móvil.
8. Imágenes sin compresión, de 4 a 8 MB cada una, que disparan el tiempo de carga.
9. Falta de página individual por proyecto. Rejilla sin ficha interna.
10. Dirección y datos de contacto solo como imagen (invisibles para Google y para lectores de pantalla).
11. Colores y tipografías de identidad distintos a los del estudio en redes y materiales impresos.
12. Multiidioma mal implementado: traducciones automáticas evidentes o versión inglesa con la mitad del contenido.

Hoja de ruta de 8 semanas para rehacer la web

Un rebranding completo con web puede durar seis meses. Una renovación centrada solo en la web, con identidad existente respetada, se hace en 8 semanas si el equipo responde a tiempo. Esta hoja de ruta es la que utilizamos en DoDanco cuando un estudio nos encarga la web desde cero.

1. Semana 1. Kick-off, auditoría de la web actual, lista maestra de proyectos a incluir, recopilación de fotografía existente y detección de huecos.
2. Semana 2. Benchmark de referentes, árbol de contenidos definitivo, wireframes de bloques principales (home, listado de proyectos, ficha, filosofía, equipo, servicios, contacto).
3. Semana 3. Diseño visual de la home y de una ficha de proyecto piloto. Validación de tipografía, retícula y paleta sobre pantalla real.
4. Semana 4. Diseño del resto de páginas internas. Preparación de los textos finales por parte del estudio con guía editorial.
5. Semana 5. Montaje en Webflow (o CMS elegido) de la home y plantillas de proyecto. Alta de la Collection de proyectos.
6. Semana 6. Carga de los 10 a 20 proyectos iniciales con fotografía optimizada, ficha técnica y textos editados.
7. Semana 7. Montaje del resto de páginas (filosofía, equipo, servicios, publicaciones, contacto). Alta del formulario con integración de email y CRM si procede.
8. Semana 8. QA en navegadores y dispositivos, Core Web Vitals, SEO on-page, redirecciones desde la web antigua, puesta en producción y migración de dominio.

La semana 9 (no planificada pero imprescindible) es la de ajustes posteriores a la salida: pequeños cambios de copy, correcciones de erratas, afinado del SEO. Ningún lanzamiento está terminado el día del lanzamiento. Si el estudio quiere coordinar la nueva web con un movimiento más amplio de marca en redes, nuestra guía sobre estrategia de Instagram para arquitectos y interioristas ayuda a sincronizar los dos frentes. Y para medir qué está pasando en redes mientras la nueva web respira, apóyate en Instagram Insights 2026.

Qué viene después del lanzamiento

Lanzar la web es el principio, no el final. Un error habitual es tratar la web como un proyecto cerrado con una entrega única. Las webs de estudios de arquitectura envejecen rápido si no se cuidan. En el primer mes conviene revisar Google Search Console a diario, atender indexación y errores 404 de la migración, y monitorizar el rendimiento (los Core Web Vitals pueden degradarse al cargar proyectos nuevos sin la misma disciplina de peso).

A partir del segundo mes la rutina pasa a ser quincenal: alta de proyectos nuevos, actualización de prensa y publicaciones, revisión del formulario de contacto (número de envíos, tasa de spam, calidad de lead). Un pequeño ritual trimestral de revisión global (contenidos obsoletos, enlaces rotos, nuevos premios o colaboraciones) mantiene la web viva sin esfuerzo excesivo.

El indicador más honesto del éxito de la web no es el tráfico. Es la calidad de los leads que entran por el formulario y el tiempo medio hasta que firmáis la propuesta con esos leads. Una web bien hecha baja ambos: trae clientes mejor alineados y acorta la primera conversación comercial. Si la nueva web no mueve esos dos indicadores en seis meses, el problema no está en el diseño, está en la propuesta de valor que la web intenta comunicar. Y eso ya es un tema de posicionamiento, que empieza fuera de la pantalla. Nuestra guía general sobre branding industrial 2026 y nuestro manual de identidad corporativa cubren esa capa estratégica. Y si lo que buscas es coordinar web, redes y lanzamiento de proyectos, el playbook de lanzamiento de proyectos en LinkedIn encaja justo encima de todo esto.

Cuándo un estudio necesita rehacer la web, no solo retocarla

No todas las webs necesitan un rediseño completo. Hay señales claras de cuándo basta con una actualización y cuándo hay que empezar de cero. Si la web tiene menos de tres años, el CMS sigue soportado, el rendimiento es aceptable y lo único que falla son contenidos atrasados, la solución es un refresco: actualizar proyectos, mejorar el formulario y afinar el SEO. Si la web pasa de los cinco años, el CMS está desactualizado, el móvil funciona mal y la identidad ha cambiado desde entonces, es momento de rehacer.

Otra señal: cuando la fotografía nueva del estudio no entra bien en la plantilla antigua (proporciones, orientación, color), la plantilla manda sobre el proyecto. Eso es síntoma de web obsoleta. Si el estudio ha hecho un giro en su propuesta (de interiorismo residencial a retail, por ejemplo), la web antigua lo oculta y la nueva lo evidencia. Un cambio así justifica un rediseño. Para los estudios de interiorismo que están en este punto, la guía sobre rebranding de estudio de interiorismo cubre el proceso completo.