Desarrollo web para un estudio de arquitectura

En julio de 2026 pusimos en marcha pedreiraestudio.com, la web de un estudio de arquitectura de Vitoria-Gasteiz con más de 25 años de ejercicio. No usamos WordPress, ni Wix, ni una plantilla. Este es el recorrido completo, con las cifras de la web tal y como está publicada hoy.

Escribimos esto porque casi nadie cuenta la parte de en medio. Se ven webs terminadas y se ven precios, pero rara vez el razonamiento: por qué este fondo y no otro, qué se hizo con las fotos que mandó el cliente, cómo se evita que una animación bonita se convierta en una molestia. Aquí está todo, con nombres de archivo y números.

Pedreira Arquitectura es un estudio dirigido por un arquitecto con dos trayectorias poco habituales a la vez: 25 años de ejercicio liberal y 18 como arquitecto municipal en varios ayuntamientos de Álava. Es decir, alguien que ha estado a los dos lados del expediente. Ese era el activo que la web tenía que transmitir, y es un activo difícil de contar sin sonar a currículum.

El material de partida eran 54 fotografías de obra en carpetas, sin ordenar y sin pies de foto, y una idea muy clara de lo que el estudio no quería parecer: ni un catálogo de renders genéricos, ni una web de constructora con banner de teléfono.

La pregunta llega siempre, y la respuesta honesta es que WordPress habría funcionado. Habría sido más barato de arrancar y el cliente podría tocar textos desde un panel. No lo elegimos por tres motivos concretos, no por prejuicio.

El tercer punto es el que decidió: la galería de proyectos era el corazón del encargo. Con 22 proyectos agrupados por tipo, filtros por categoría y fichas con varias fotos cada una, cualquier plugin nos habría obligado a pelearnos con su forma de entender una galería. Escribirla desde cero costó menos que doblegar una ajena.

Cuatro paquetes. Comparado con una instalación típica de WordPress con su tema comercial y su docena de plugins, la superficie de mantenimiento es de otro orden. Dentro de tres años esta web seguirá compilando igual, sin un plugin abandonado que rompa nada.

Lo que sí perdimos

Conviene ser honesto: el cliente no puede cambiar un texto por su cuenta. Fue una decisión conversada. Un estudio de arquitectura no publica cada semana; cuando hay obra nueva, la añadimos nosotros. A cambio, no paga cuota de mantenimiento ni tiene un panel expuesto a internet.

Esta es la ventaja de escribir el código desde cero que menos se menciona y más se nota: no hay ninguna decisión estética fuera de tu alcance. Con una plantilla trabajas dentro de lo que su autor previó, y antes o después toca renunciar a algo o pelearse con una hoja de estilos ajena. Aquí la conversación fue al revés: primero qué quería el estudio, después cómo se programa.

Y el cliente tenía criterio formado, que para eso vive del diseño. Nos pidió sobriedad, que la obra mandara y nada de artificio. Nuestro trabajo no fue convencerle de una estética, sino traducir la suya a decisiones concretas.

Fondo claro, negro como material

La tentación en arquitectura es hacerlo todo negro: queda sofisticado en una captura y es lo que hacen la mitad de los estudios. Salió lo contrario, y por partida doble: el estudio lo prefería y además era lo correcto técnicamente. Las fotos de obra son a color, y el blanco es el único fondo que no compite con ellas. Sobre negro, una fachada de ladrillo rojo se apaga y un cielo azul se convierte en una mancha.

El negro entra solo donde cumple una función: la barra de navegación, el pie, el formulario de contacto y los paneles de servicios. Es material de estructura, como una viga vista. Nunca es el fondo de una sección. Y el acento es un único ámbar, reservado a los cuadrados de sección, el punto final de cada titular y el barrido de los botones. Cuando solo tienes un color de acento, cada aparición significa algo.

Una sola tipografía

Toda la web usa Montserrat, y nada más. Lo comprobamos al medirla: no hay una segunda familia cargada en ninguna página. Los titulares van en negrita máxima, en mayúsculas y con el interletrado muy apretado; el texto corrido va en peso normal. La misma familia haciendo dos trabajos opuestos.

Combinar dos o tres tipografías es lo habitual, y también la vía rápida para que una web parezca hecha por acumulación. Con una sola familia bien explotada, la jerarquía la marcan el tamaño y el peso, y la página gana una coherencia que no se puede fingir. De propina, una fuente menos que descargar antes de poder leer nada.

Sin esquinas redondeadas, sin sombras

Ni un solo redondeo en toda la web. Ni una sombra. Las separaciones son reglas de un píxel. Es una decisión que suena severa escrita, pero que en pantalla produce el efecto contrario al esperado: la página se ve ordenada, como un plano técnico. Y encaja con un estudio cuyo trabajo es precisamente la línea recta.

Hasta el gesto de los botones sigue esa norma: al pasar el ratón, una lámina ámbar sube desde abajo y rellena el botón. Está hecho con dos propiedades de CSS, escalando en vertical desde el borde inferior. Sin JavaScript y sin librería de animación: se ejecuta en la tarjeta gráfica y no provoca ni un recálculo de la página.

La web abre con un telón: un lienzo negro con una cruz de coordenadas, el logotipo dibujándose, un contador de 0 a 100 % y una salida en cuatro paneles verticales. Dura unos cinco segundos y medio.

Una intro de cinco segundos es, en general, una idea terrible. Es exactamente el tipo de floritura que hace que la gente cierre la pestaña. La incluimos con una condición que lo cambia todo: solo se reproduce en una carga real de la web.

Cómo se decide, en concreto

La lógica vive en una función que se ejecuta antes de pintar nada y responde a una única pregunta: ¿esta persona acaba de llegar, o ya estaba dentro?

Ese matiz convierte un capricho en una presentación. La primera vez que alguien llega al estudio se encuentra un telón que dice "esto está cuidado". A partir de ahí, la web es instantánea: navegar a una página de servicio y volver no vuelve a costar cinco segundos.

Los dos efectos secundarios que hubo que resolver

• El scroll. Durante la intro la página está bloqueada: si no, el visitante baja a ciegas detrás del telón y aparece a mitad de la web. Se libera en el momento exacto en que se abren los paneles.
• La entrada del hero. El titular tiene un retardo para aparecer justo cuando el telón se abre, pero ese retardo solo se aplica si la intro se ha reproducido. Sin intro, el hero entra en 0,15 segundos.

Aquí está el trabajo invisible que decide si una web de arquitectura funciona o se arrastra. El cliente nos pasó 54 fotografías en PNG que pesaban 127 MB en total. Puestas tal cual en una web, esa galería habría sido inusable en un móvil con datos.

El proceso fue el mismo que aplicamos siempre:

• Convertir de PNG a JPEG. El PNG es excelente para logotipos y capturas, y una elección pésima para fotografía: guarda cada píxel sin pérdida y multiplica el peso por diez.
• Limitar el lado mayor a 1920 píxeles. Ningún visitante va a ver más resolución que esa, ni en una pantalla 4K, porque la foto nunca ocupa el ancho completo.
• Dejar los originales fuera de la carpeta pública. Siguen en el repositorio para reprocesarlos cuando haga falta, pero no se suben al servidor.
• Carga diferida en toda la galería: el navegador solo descarga cada foto cuando se acerca a la pantalla.

El resultado es que la home muestra su primer contenido en 0,8 segundos y necesita solo 29 peticiones para estar completa, con la galería entera detrás cargándose a medida que bajas.

Un detalle que parece menor y no lo es: los campos de año y superficie que el estudio todavía no había confirmado no se muestran vacíos, simplemente no se muestran. Una ficha con un guion donde debería ir un dato transmite descuido. Preferimos enseñar menos y que todo lo que se vea sea cierto.

La web declara 28 direcciones distintas en su mapa del sitio y se sostiene con 20 componentes. La relación no es casual: casi nada está escrito dos veces.

Un archivo de datos, 22 fichas

Toda la obra del estudio vive en un único archivo. Cada proyecto es una entrada con su nombre, sus categorías y sus fotos. De ahí salen a la vez la galería de la home, los filtros y las 22 fichas individuales. Añadir una obra nueva es añadir una entrada: no hay que tocar ninguna página.

Lo mismo con las páginas legales. Las tres salen de una plantilla de 133 líneas que numera las cláusulas sola y construye el índice lateral a partir del contenido. Si mañana hay que añadir un apartado al aviso legal, la numeración y el índice se recolocan sin tocarlos.

Todo se genera antes, no al vuelo

Las páginas se compilan a HTML en el momento del despliegue, no cada vez que alguien las visita. Cuando llega una petición, el servidor entrega un archivo ya hecho. Por eso el tiempo de respuesta es de 133 milisegundos: no hay base de datos que consultar ni plantilla que montar.

Una web de un estudio local se juega mucho en las búsquedas de su provincia. Esto es lo que lleva puesto de serie, sin ningún plugin de SEO:

• Mapa del sitio y archivo de robots generados por código: hoy declara 28 direcciones y se actualiza solo cuando se añade una obra.
• Datos estructurados del estudio en todas las páginas, para que Google entienda que es un estudio de arquitectura con una dirección física.
• Datos estructurados propios en cada una de las 22 fichas de proyecto, declarando cada obra como una pieza de trabajo con su nombre.
• Migas de pan estructuradas en las fichas, que son las que hacen que Google muestre la ruta en vez de la URL cruda.

El punto de los datos estructurados por proyecto es el más rentable a medio plazo: cada ficha se convierte en una página con entidad propia, con su nombre y su tipo de obra, en lugar de una galería anónima.

Una home con siete secciones, dos páginas de servicio, 22 fichas de proyecto y tres páginas legales. Veinte componentes y cuatro dependencias para sostenerlo todo.

Sobre el móvil merece la pena detenerse. Es donde llega la mayoría del tráfico de un negocio local, y es donde más webs se rinden y enseñan una versión encogida de la de escritorio. Aquí el hero es el mismo, la fotografía ocupa toda la pantalla igual, y lo que cambia son los tamaños de letra y los márgenes.

Lo que no hicimos

• No metimos un panel de administración, por lo explicado más arriba.
• No pusimos chat, ni banner de suscripción, ni ventana emergente de descuento. Nada de eso pinta nada en un estudio de arquitectura.
• No usamos fotos de banco de imágenes en la obra. Todo lo que se ve construido es obra real del estudio.
• No añadimos un carrusel automático. Los proyectos se recorren cuando el visitante quiere, no cuando lo decide un temporizador.

Cuatro cosas que confirmamos con este proyecto y que aplicamos ya por defecto:

1. El peso de las imágenes es el 80 % del rendimiento

Se habla mucho de frameworks y muy poco de esto. Pasar de 127 a 16 MB no requiere ninguna tecnología especial: requiere abrir las fotos, convertirlas y redimensionarlas. Es la hora de trabajo con mejor retorno de todo el proyecto.

2. Una animación cara se paga si se cobra una sola vez

La intro habría sido un error si apareciera en cada navegación. Condicionada a la primera carga real, se convierte en la mejor parte de la primera visita. La pregunta correcta ante cualquier animación no es "¿cuánto dura?", sino "¿cuántas veces la va a ver la misma persona?".

3. Un archivo de datos vale por veinte páginas

Separar el contenido de la presentación no es una elegancia de programador: es lo que hace que añadir la obra número 23 sea una entrada en un archivo y no una página nueva que mantener. El esfuerzo se paga en el segundo cambio.

4. Restringirse es más rápido que elegir

Una tipografía, un color de acento, cero esquinas redondeadas. Cada norma que te pones al empezar es una discusión que no tienes después. El proyecto avanza más rápido y el resultado es más coherente que si cada sección se decide por separado.

Puedes ver el resultado en pedreiraestudio.com.