Seis estudios de arquitectura con la obra en la portada.
Ninguno abre con un eslogan sobre «espacios que inspiran» ni con tres tarjetas de servicios. Abren con un edificio, una ciudad y un nombre de proyecto: lo que hacen, mostrado en lugar de descrito.
Un estudio de arquitectura vende algo que se puede fotografiar, y aun así muchas webs de servicios hechas con IA esconden el trabajo detrás de íconos, degradés y párrafos de valores. Estas seis hacen lo contrario, cada una a su manera.
Elegí estudios con estilos muy distintos a propósito: fondo negro y fondo blanco, mucho texto y casi nada, menú a la vista y menú escondido. Lo que tienen en común no es una estética, es un orden de prioridades.
Snøhetta
Snøhetta usa el título para decir qué es en una frase completa, sin adjetivos de marketing: una práctica transdisciplinaria que trabaja en proyectos de todas las escalas. Debajo, una tira de fotos que no son del mismo tamaño ni están alineadas en una grilla pareja. La del centro lleva el nombre del proyecto y una línea que lo explica.
La idea: si tus fotos tienen tamaños distintos, no las fuerces a tarjetas iguales. La diferencia de tamaño ya ordena qué se mira primero.
MVRDV
MVRDV pone un proyecto propio a pantalla completa y nada más: el logo, el menú y, abajo, un título en letra condensada con una sola línea que dice lo que hacen (arquitectura, interiores, urbanismo e investigación). Los puntitos de la derecha avisan que hay más proyectos detrás.
La idea: una foto real del trabajo, grande, vale más que cualquier composición de fondo. Si la foto es buena, el texto puede ser corto.
Olson Kundig
Olson Kundig no muestra el edificio desde afuera: muestra lo que se ve desde adentro, el agua y un ferry a través de los marcos de los ventanales. Así cuenta cómo se vive el espacio sin escribirlo. Los proyectos siguen en diapositivas grandes con el nombre y el lugar, por ejemplo Beaverton, Oregon.
Un detalle de oficio: si tu sistema pide reducir el movimiento, la web lo detecta, lo dice («Reduced Motion Detected») y te deja activarlo si lo quieres.
La idea: respeta prefers-reduced-motion y dilo. Es una línea de CSS y una de texto.
Herzog & de Meuron, Basilea
Herzog & de Meuron convierte el menú en la portada. Arriba están todas las secciones (News, Projects, Practice, Exhibitions, Writings y más) y debajo los temas (Sustainability, Sport, Interiors, Art Spaces), todo a la vista y no escondido en una hamburguesa. Después viene un buscador y un listado largo de proyectos y noticias, cada uno con número, nombre, lugar y fecha.
La idea: si tienes mucho trabajo, deja que la gente lo filtre desde el primer momento. Un archivo bien ordenado también es diseño.
Studio Gang, Chicago
Studio Gang es la más de texto de las seis, y funciona porque cada frase es verificable: quién lo fundó y lo dirige (Jeanne Gang), qué hace (arquitectura y diseño urbano) y dónde (sede en Chicago, oficinas en Nueva York, San Francisco y París). Los enlaces van en un solo azul, dentro de la frase. A la derecha, la noticia más reciente con su imagen.
La idea: la primera frase de tu web debería pasar la prueba de cambiar el nombre. Si sirve igual para la competencia, no dice nada.
BIG, Bjarke Ingels Group
BIG lista sus proyectos uno debajo del otro, y cada uno lleva su propio pictograma negro al lado del nombre y la ciudad: el Suzhou Museum of Contemporary Art, Refugee Future Cities en Uganda, el National Juneteenth Museum en Fort Worth. Es lo contrario de un ícono genérico de librería: cada símbolo es distinto y pertenece a un solo proyecto.
La idea: si vas a usar íconos, que sean tuyos y que signifiquen algo concreto. Uno por cosa real, no uno por párrafo.
Lo que se repite en las seis
- El trabajo va primero. Foto o proyecto en la primera pantalla, no una promesa.
- Nombres y lugares en lugar de adjetivos. Shanghái, Basilea, Fort Worth, Jeanne Gang.
- Ninguna grilla de tres tarjetas con ícono. Cuando hay listas, cada elemento es un proyecto real, con su foto.
- Cada una tiene una decisión que la distingue: la letra condensada de MVRDV, la monoespaciada de Herzog & de Meuron, los pictogramas de BIG.
Si tu web no muestra nada propio, el Slop Score te lo marca como «Sin imágenes propias». Mídela, y si buscas más ejemplos de otro rubro, los hoteles resuelven el mismo problema con habitaciones en lugar de edificios.
Preguntas frecuentes
¿Qué debe tener la web de un estudio de arquitectura?
Fotos reales de los proyectos desde la primera pantalla, el nombre y el lugar de cada obra, quién dirige el estudio y dónde está. Las seis webs de este post resuelven eso antes que cualquier eslogan.
¿Cómo hago que mi portfolio no parezca una plantilla?
Deja que el trabajo ocupe el espacio, usa fotos de tamaños distintos en lugar de tarjetas iguales y toma una decisión propia de tipografía o de navegación, como hacen MVRDV, Herzog & de Meuron o BIG.