Saltar al contenido

Alzado, estudio de arquitectura · Arquitectura

La web de un estudio de arquitectura que está abriendo

Alzado es un estudio de arquitectura que está arrancando. Un estudio que empieza no tiene años de historia que contar, pero sí sus primeras obras, su forma de trabajar y a quién atiende. Le preparé la web para eso: que las fotos hablen, que cada proyecto tenga su página y que pedir la primera reunión cueste un clic. Al estudio le ha gustado la propuesta y la web se publicará en su dominio cuando abra.

  • Diseño web
  • Dirección de arte
  • Logotipo
  • Movimiento y transiciones
  • Página por proyecto
  • Opiniones de Google
  • SEO técnico
En preparación: se publicará cuando el estudio abra
Portada de la web de Alzado: una casa de hormigón visto a pantalla completa con el nombre del proyecto, Casa Rocafort, abajo a la izquierda
La misma portada en un móvil, con el logo y el botón de menú sobre la foto

El planteamiento

Lo que se quería evitar

Lo que más se repite en las webs del sector

  • Una pantalla de carga o un carrusel que hay que esperar antes de ver nada.
  • Proyectos en una cuadrícula de fotos iguales, sin año, sin lugar y sin página propia.
  • Iconos genéricos y frases que podrían ser de cualquier empresa.
  • Opiniones de Google metidas con un widget externo que pesa más que la propia página.

El objetivo

Que un estudio sin años de historia transmita oficio desde la primera pantalla, con sus primeras obras como protagonistas, y que la web cargue rápido en un móvil.

Lo que se hizo

Pieza a pieza, sin dejar nada a medias

Dirección de arte

  • Paleta «cal y cianotipo»: un lienzo claro casi neutro, tinta y un único azul de plano técnico.
  • Titulares en Funnel Display fina y texto en Hanken Grotesk, alojadas en el propio dominio.
  • Logotipo con la marca de alzado de los planos: un círculo partido por la línea de tierra.
  • Sin tarjetas, sin sombras y sin esquinas redondeadas: la jerarquía la hacen el tamaño, el aire y los filetes.

Proyectos

  • Retícula asimétrica: cada foto con su proporción, nunca cuatro iguales seguidas.
  • Una página por obra con ficha técnica (tipo, lugar, año, superficie y estado), texto y galería.
  • Filtro por tipo de proyecto sin recargar la página.
  • Al pasar el ratón, la foto se acerca, se vela y aparece «Ver proyecto».

Movimiento

  • El nombre del proyecto de portada sube palabra a palabra al cargar.
  • Las fotos se descubren desde su lado al aparecer y se asientan con un zoom suave.
  • Al entrar en un proyecto, su foto viaja desde la retícula hasta la cabecera de su página.
  • La cabecera se esconde al bajar y vuelve al subir. Con «reducir movimiento» activado, solo fundidos.

Confianza

  • Opiniones al estilo de Google, hechas a mano: nota media, estrellas y tarjetas, sin widget externo.
  • Preguntas frecuentes de quien encarga una casa: honorarios, plazos y licencia.
  • El proceso en cuatro fases, para que el cliente sepa en cuál está.

Contacto

  • Una sola llamada a la acción en toda la web: «Pedir una primera reunión».
  • Formulario que avisa de cada error en el momento y que pregunta antes de salir si está a medias.

Técnica

  • HTML estático y unas decenas de líneas de JavaScript: ninguna librería de animación.
  • Fotos en WebP en tres tamaños y con su hueco reservado: la página no salta al cargar.
  • Datos estructurados del estudio, mapa del sitio y páginas legales.

En movimiento

Medio minuto de recorrido

Así se ve la portada al llegar y al bajar: el nombre del proyecto sube palabra a palabra, las fotos se descubren desde su lado y, al entrar en una obra, su foto viaja hasta la cabecera de la página.

Todo el movimiento respeta la opción de reducir movimiento del sistema: quien la tiene activada ve fundidos, no desplazamientos.

Grabación de la web en un navegador de escritorio, a velocidad real.

En el móvil

Pensada para el pulgar

En el móvil, el menú se abre a pantalla completa, las fotos conservan su proporción y el carril de opiniones se desliza con el dedo.

Botones de al menos 44 píxeles, textos que no se salen de la pantalla y nada que haya que pellizcar para leer.

Grabación de la web en un móvil emulado, a velocidad real.

Confianza

Opiniones como en Google

Un estudio que empieza vive de lo que cuentan sus primeros clientes. Las opiniones se ven como en Google, con nota media, estrellas y «hace X meses», pero sin cargar ningún widget externo: la página no pesa más ni rastrea a nadie.

Opiniones de clientes en un móvil: tarjeta con estrellas, logo de Google y flechas para pasar
Las opiniones en el móvil: se pasan con el dedo o con las flechas.

En cifras

Lo que hay detrás

Hechos del trabajo, no resultados de negocio: esos se publican cuando haya datos reales.

15
páginas, una por cada proyecto
100
en accesibilidad, buenas prácticas y SEO (Lighthouse, medido en local)
44
pruebas automáticas en escritorio y móvil, todas en verde
0
librerías de animación: el movimiento es CSS

Más pantallas

Cómo se ve

Retícula de proyectos con fotos de distintas proporciones y el texto Ver proyecto sobre la foto señalada
Retícula de proyectos: cada foto con su proporción. Al pasar el ratón, la foto se vela y aparece «Ver proyecto».
Sección Qué hacemos con una foto a la izquierda y la lista de servicios a la derecha
«Qué hacemos»: la foto de la izquierda cambia según el servicio que se señala.
Banda oscura con las cuatro fases del trabajo numeradas
El proceso en cuatro fases, en la única banda oscura de la página.
Opiniones de clientes sobre una foto de arquitectura, con la nota media a la izquierda y tarjetas de reseña a la derecha
Opiniones sobre una foto a sangre: nota media a la izquierda y tarjetas al estilo de Google a la derecha.
Cabecera de la página de un proyecto con su nombre en grande y la foto de portada
Cada proyecto tiene su página: nombre, entradilla, ficha técnica y galería.
Pie de la web en oscuro con el logotipo a todo el ancho
El pie, con el logotipo a todo el ancho como firma.

Cómo se trabajó

Del primer día a funcionar

  1. Primero

    Referencias y dirección

    Webs de estudios de arquitectura e interiorismo como punto de partida: qué funciona y qué sobra. De ahí salieron la paleta, las tipografías y las reglas.

  2. Luego

    Estructura

    Retícula de doce columnas, una escala de espacios fija y una página para cada cosa que busca quien encarga una obra.

  3. Después

    Identidad y movimiento

    Logotipo, opiniones al estilo de Google y el movimiento: palabras que suben, fotos que se descubren y transiciones entre páginas.

  4. Al final

    Auditoría y pruebas

    Lighthouse y pruebas automáticas de cada flujo: menú, filtro de proyectos, formulario, opiniones y transiciones.

Dónde está ahora

El estado, sin maquillar

En preparación: se publicará cuando el estudio abra

La web está preparada y al estudio le ha gustado. Se publicará en su propio dominio cuando abra, con su logotipo, sus obras, sus fotos y sus datos. Es pronto para hablar de resultados y no los voy a inventar. Si tienes un estudio de arquitectura o de interiorismo, te la enseño entera en la primera reunión.

Otro proyecto

También puedes ver

Portada de la web de fita en un ordenador: vídeo aéreo de campos y una planta solar de fondo, el titular «Topografía y cartografía para grandes proyectos» y el botón Solicitar propuesta técnica

fita · Cartografía con dron · Topografía y cartografía con dron

Web, SEO y blog para una empresa de cartografía con dron

Web con vídeo en portada, una página por servicio y por producto cartográfico, versión en inglés y un blog con artículos nuevos con regularidad. Con el posicionamiento hecho desde el primer día.

  • Diseño web
  • SEO y posicionamiento
  • Blog
  • Versión en inglés
En vivo desde el 16 de octubre de 2026 Ver el caso
Portada de la web de Clotoides en un ordenador: el titular «Topografía para conocer tu propiedad y dar el siguiente paso con confianza» junto a un plano del parcelario de La Costera en líneas doradas

Clotoides · Topografía · Topografía, Catastro y Registro

Web nueva y SEO para una empresa de topografía que ya aparecía en Google

Web nueva que conserva las 119 direcciones de la antigua para no perder el posicionamiento, con un plano catastral real en cada zona, versión en inglés y un blog de 74 artículos que sigue creciendo.

  • Diseño web
  • SEO y posicionamiento
  • Blog
  • Migración sin perder SEO
En vivo desde el 17 de octubre de 2026 Ver el caso
Portada de la web de Sandra de la Casa en un ordenador: titular, botón de reservar cita y valoraciones de Google y Booksy

Sandra de la Casa · Taller de Imagen · Peluquería de autor · València

Web, SEO local y ficha de Google para una peluquería de autor

Tenía 137 reseñas y ninguna web. En una semana: una página por servicio con su precio, reserva en Booksy, la ficha de Google completa y versión en inglés.

  • Diseño web
  • SEO local
  • Ficha de Google
  • QR para reseñas
En vivo desde el 30 de septiembre de 2026 Ver el caso
Portada de la app OunFodmap con el logotipo de OunClinic y los botones de entrar y pedir acceso

OunClinic · Clínica de nutrición

Una app para seguir la dieta FODMAP, con panel para la nutricionista

App instalable para los pacientes y panel en tiempo real para la nutricionista: 222 alimentos, reintroducción automática, informes en dos idiomas y datos de salud protegidos.

  • App a medida
  • Panel en tiempo real
  • IA aplicada
  • Datos de salud
En uso en la clínica Ver el caso

Todos los casos

Empieza por aquí

¿Algo parecido para tu negocio?
Cuéntamelo en media hora.

Sin coste y sin compromiso. Salimos con qué tendría sentido hacer primero y, si encaja, una propuesta con precio cerrado.