Escenario · Web a medida · Estudio de arquitectura
Un portfolio a la altura
de los proyectos que cuenta.
Un estudio con proyectos de calidad y una web parada desde hace años: imágenes lentas, textos difíciles de actualizar y sin versión en inglés. La transformo en un portfolio editorial que carga rápido y que el equipo gestiona por su cuenta.
Escenario web — estudio de arquitectura
Un trabajo de calidad,
mal contado.
El escenario: un estudio con una trayectoria sólida —decenas de proyectos, algunos clientes en el extranjero, alguna publicación del sector—. Y sin embargo la web se quedó parada hace seis o siete años: una plantilla con fotos comprimidas y pixeladas, textos estáticos y ninguna forma de actualizarla por su cuenta.
El problema no es solo estético. Cada vez que un socio quiere actualizar un proyecto o añadir una foto tiene que llamar al webmaster externo y esperar días. La web se convierte en un coste fijo en lugar de una herramienta de trabajo.
El encargo típico es breve: "Queremos algo que se parezca a nosotros, no un tema de WordPress." Ahí empieza la conversación que define todo el proyecto.
"Tenemos clientes internacionales que miran la web antes de decidir. Cuando la abren en una reunión queremos quedar bien, no tener que disculparnos."
— La petición que más oigo a los estudiosRequisitos del portfolio online de un arquitecto
Lo que hacía falta
de verdad.
De una primera reunión con los socios y del análisis de la web actual (y de sus datos en Analytics) suelen salir seis áreas de trabajo claras.
Presencia editorial de alto nivel
La web tiene que transmitir la calidad del trabajo antes de que el visitante lea una palabra. Diseño minimalista pero rotundo, tipografía fuerte, imágenes a pantalla completa, sin concesiones a las plantillas.
Portfolio filtrado por categoría
Tres macrocategorías (Residencial, Comercial, Instalaciones temporales) con navegación fluida. Cada proyecto: galería de fotos, datos técnicos, año, ubicación y equipo implicado.
CMS propio sin webmaster
Los socios tienen que poder añadir un proyecto, cambiar un texto o subir fotos nuevas por su cuenta, sin depender de nadie, sin código y sin suscripciones a un CMS de pago.
Web bilingüe italiano e inglés
Clientes y colaboradores internacionales. Hacía falta una versión EN completa, fácil de actualizar, sin duplicar la web ni recurrir a plugins de traducción automática que empeoran la calidad de los textos.
Animaciones de scroll cinematográficas
Los estudios más fuertes del sector usan las animaciones para crear una sensación de "tiempo lento" que encaja con su trabajo. El objetivo es la misma calidad percibida.
Rendimiento y SEO técnico de alto nivel
Las fotos de arquitectura pesan mucho. Aun así la web tiene que cargar rápido —Lighthouse en verde en todo— y aparecer en las búsquedas locales y del sector.
Retos técnicos de un portfolio de arquitectura
Dónde se esconden
los problemas de verdad.
Las webs editoriales con galerías en alta resolución parecen sencillas por fuera. En realidad concentran algunos de los retos más interesantes del desarrollo frontend. Estos son los cinco principales.
Proceso de desarrollo para un estudio de arquitectura
Cómo
organizo el trabajo.
Entre ocho y diez semanas en cuatro fases. Cada fase con un resultado concreto y una llamada de validación con los socios de referencia. Sin sorpresas en el lanzamiento.
Análisis de la web actual, comparación con los mejores estudios internacionales, mapa de contenidos, sitemap y estructura de datos para el CMS.
Definición del sistema de diseño: paleta (p. ej. blanco, negro y un color de acento), combinación de fuentes (serif editorial + mono para los datos técnicos), retícula asimétrica, reglas tipográficas. Wireframe interactivo compartido en Figma.
Desarrollo completo: HTML semántico, CSS basado en custom properties, JavaScript vanilla para interacciones e i18n. CMS basado en JSON con documentación paso a paso. Optimización de imágenes con pipeline WebP + srcset automático.
Pruebas en Chrome, Safari y Firefox, en móviles iOS y Android reales, formación del equipo en el CMS, cambio de DNS y publicación. Seguimiento activo los 7 días siguientes.
Soluciones para un portfolio de arquitectura rápido
Cómo resuelvo
cada problema.
Pipeline de optimización automática
Cada imagen subida al CMS pasa por un script de Node.js que genera automáticamente tres versiones WebP (320px, 768px, 1440px) y conserva el JPEG original como fallback para navegadores antiguos. La etiqueta <img srcset> sirve el formato adecuado a cada dispositivo.
El lazy loading nativo (loading="lazy") combinado con un placeholder difuminado generado en el servidor (una versión de 40×40px en base64 inline) elimina el layout shift y mantiene la página visualmente sólida durante la carga.
Objetivo: imágenes de 3–5 MB reducidas a unos 80–180 KB sin pérdida visible de calidad en pantalla, y un primer renderizado por debajo del segundo.
Basado en JSON: sin base de datos, cero dependencias
La solución es un CMS basado en archivos JSON que los socios editan directamente, con un editor sencillo o un pequeño panel. Cada proyecto es un objeto con todos sus datos: título, descripción, categoría, año, lugar, lista de imágenes, textos IT/EN.
Un pequeño script lee estos archivos y construye el portfolio, las fichas de proyecto y los filtros. Sin backend, sin base de datos, con hosting barato. Una web así puede estar en un hosting estático de pocos euros al mes.
Bilingüe nativo, sin plugins
Cada texto del HTML tiene un atributo data-i18n="clave" enlazado a un diccionario JSON por idioma. El cambio IT/EN sustituye los textos en milisegundos sin recargar la página, y la elección queda guardada.
Los textos traducidos los revisan los propios socios: nada de traducción automática ni plugins. Para los clientes internacionales, la calidad del inglés es un requisito, no un detalle.
El mismo mecanismo gestiona también los metadatos SEO (<title>, <meta description>, hreflang) para garantizar la correcta indexación de ambas versiones.
IntersectionObserver + CSS: sin librerías, frame rate perfecto
Un sistema de animaciones al hacer scroll hecho a medida, con IntersectionObserver y transiciones CSS. Cada elemento entra con un efecto combinado: fundido, desplazamiento vertical de 24px y un ligero escalado de 0.97 a 1, en 0.7s con cubic-bezier(0.22, 1, 0.36, 1), una curva suave típica de las interfaces de Apple.
El parallax de las imágenes usa solo CSS transform: translateY(), con una variable CSS que actualiza un único requestAnimationFrame. Ninguna librería externa: objetivo de unos 15 KB de JavaScript en total.
opacity: 0;
transform: translateY(24px) scale(0.97);
transition: all 0.7s cubic-bezier(.22,1,.36,1);
}
.reveal.in-view {
opacity: 1;
transform: none;
}
Stack tecnológico para una web de arquitectura
Tecnologías elegidas, no impuestas.
Cero frameworks frontend, cero dependencias en tiempo de ejecución. Cada elección tecnológica tiene un motivo preciso: nada de sobreingeniería, ninguna librería "por si acaso".
Objetivo de peso: HTML, CSS y JS por debajo de 60 KB en total, comprimidos. Sin frameworks, sin runtime, sin dependencias que dentro de dos años puedan convertirse en un problema de seguridad o mantenimiento.
Objetivos de ejemplo — web de arquitectura
Qué esperar
en los primeros meses.
Cifras de ejemplo, no resultados de un cliente: son objetivos realistas para un escenario como este, a medir con Google Analytics 4 y Google Search Console comparando el mismo periodo antes y después del lanzamiento.
"Un cliente nos eligió después de ver la web, sin necesidad de una presentación." Ese es el resultado al que apuntar: una web que trabaja como la primera reunión.
— El objetivo de negocio, más que cualquier métricaLecciones para un portfolio profesional
Lo que aplico
en cada proyecto así.
Son los puntos que siempre tengo presentes al construir un portfolio editorial.
No existe un CMS "correcto" por defecto. Para un estudio así, un JSON editable a mano puede ser mucho mejor que WordPress: sin vulnerabilidades, sin plugins que actualizar, sin hosting que gestionar. La pregunta no es "qué CMS", sino "cuánta autonomía necesita de verdad este cliente".
La velocidad no se negocia en los sectores de gama alta. Un estudio que proyecta obras de cientos de miles de euros no puede permitirse una web que tarda 4 segundos en cargar. El tiempo de carga es una señal de calidad, incluso antes que el diseño.
Una buena i18n requiere planificación antes de escribir la primera línea de HTML. Añadir el segundo idioma a posteriori es un refactoring devastador. La estructura de datos debe diseñarse multilingüe desde el principio, aunque en ese momento solo haga falta el italiano.
La guía del CMS forma parte de la entrega. Una guía paso a paso con capturas para los socios vale un día de trabajo. Sin ella, hasta el CMS más sencillo del mundo deja de usarse tras el lanzamiento.
La métrica más importante a menudo no está en el encargo. Casi nadie pide medir los "clientes nuevos que llegan por la web", pero es la que convence al socio más escéptico. Mide lo que importa al negocio, no solo lo que es fácil de medir.
¿Tienes en mente un proyecto parecido?
Cuéntamelo: partimos de objetivos y prioridades, y la primera llamada es gratuita.