Azimut Estructuras

Sitio corporativo · Arquitectura modular premium y construcción sostenible

Contexto

Azimut Estructuras es un proyecto de portfolio que simula la presencia digital de un estudio boutique de arquitectura modular y construcción sostenible en España. No es un template genérico de agencia: es un recorrido completo de marca, desde la primera impresión hasta la conversión, pensado para demostrar criterio en diseño, experiencia de usuario y desarrollo frontend.

La premisa del proyecto era responder a una pregunta concreta: ¿cómo debería sentirse en la web un estudio de construcción premium que vende precisión, materiales nobles y compromiso ambiental? El resultado es un sitio corporativo ficticio pero creíble, con contenido coherente, estética propia y una arquitectura técnica sólida detrás.

Objetivo

Diseñar y desarrollar una experiencia digital que transmita confianza, solvencia técnica y sensibilidad estética, sin caer en los clichés del sector (fotos de stock genéricas, layouts saturados, tipografías impersonales). El usuario debe poder:

  • Entender en segundos qué hace el estudio y en qué se diferencia.
  • Explorar una cartera de obras con profundidad real.
  • Conocer al equipo, los servicios y el enfoque sostenible.
  • Llegar al contacto de forma natural, sin fricción.

Todo ello sin backend: contenido estático, rendimiento alto y listo para desplegar.

Identidad visual y sistema de diseño

La paleta parte de una base carbón y crema con acento terracota (#c75b3a). Es una decisión deliberada: evoca materiales naturales (piedra, arcilla, madera) y el mundo de la construcción, pero con un tratamiento contemporáneo y minimalista. El alto contraste refuerza la sensación de solidez y premium.

La tipografía combina Barlow Condensed para titulares — mayúsculas, tracking ajustado, escala generosa — y DM Sans para cuerpo de texto. La jerarquía es clara: los titulares impactan como piezas editoriales; el texto corrido mantiene legibilidad y calma.

Las secciones alternan tres variantes de fondo (crema, arena y carbón), lo que crea ritmo visual en scroll largo sin romper la coherencia. Los acentos terracota aparecen con moderación: etiquetas, palabras clave en el hero, estados activos y selección de texto.

Decisiones de UI y UX

Hero a pantalla completa

La home abre con un hero casi a viewport completo: imagen arquitectónica con overlay oscuro, titular en tres líneas y dos CTAs diferenciados (Ver proyectos / Solicitar presupuesto). La jerarquía guía al visitante hacia exploración o conversión desde el primer segundo. Una animación sutil de entrada (fade + desplazamiento) da vida sin distraer.

Navegación clara y persistente

Cabecera fija con blur y borde ligero. En desktop, menú horizontal; en móvil, menú desplegable animado. La navegación cubre el recorrido completo: proyectos, servicios, nosotros y contacto. En la home, anclas internas (#servicios, #proceso, #certificaciones) permiten saltar a secciones sin recargar.

Home como narrativa de marca

En lugar de una landing de una sola pantalla, la home es un storytelling en capas: cifras de impacto, vista previa de servicios, proyectos destacados, pilares de sostenibilidad, certificaciones, colaboradores, proceso en cuatro pasos, testimonios y CTA final. Cada bloque responde a una objeción o interés distinto del visitante (¿tienen experiencia?, ¿son sostenibles?, ¿cómo trabajan?, ¿qué dicen otros clientes?).

Portfolio filtrable con detalle rico

El listado de 20 proyectos incluye filtros por categoría (residencial, comercial, modular) con transiciones suaves al cambiar. Cada obra tiene ficha propia: galería, reto/solución, ficha técnica (superficie, plazos, materiales, sostenibilidad) y proyectos relacionados. La estructura imita cómo un estudio real presentaría su obra, no solo una cuadrícula de imágenes.

Páginas de servicios, equipo y contacto

Los servicios se presentan en tres líneas de negocio claras (arquitectura modular, construcción sostenible, reformas premium), cada una con imagen, descripción y enlace al formulario. Nosotros humaniza la marca con grid de equipo, valores y métricas. Contacto cierra el funnel: formulario validado, datos de contacto, mapa embebido y FAQ en acordeón para resolver dudas antes de escribir.

Microinteracciones y motion

Framer Motion se usa con criterio: entradas al hacer scroll (whileInView, una sola vez), transiciones de página, filtros del portfolio y menú móvil. El movimiento acompaña la lectura; no compite con ella.

Accesibilidad y detalle

Skip link para saltar al contenido, landmarks ARIA en navegación, formularios etiquetados, roles en filtros tipo tabs. Son decisiones que no se ven en capturas, pero reflejan un enfoque profesional del producto digital.

Arquitectura de la información

Home → Proyectos → Detalle de obra
     → Servicios → Contacto
     → Nosotros  → Contacto
     → Contacto (conversión)

El flujo prioriza exploración (portfolio, servicios) y confianza (equipo, certificaciones, testimonios) antes de conversión (formulario). Los CTAs están repartidos en puntos naturales del recorrido, no solo al final.

Desarrollo (capa técnica)

Construido con Next.js 16 (App Router), TypeScript, Tailwind CSS v4 y Framer Motion. El contenido vive en módulos tipados (projects, services, team, faq…), con tests unitarios (Vitest) y E2E (Playwright). Las páginas de proyecto se generan en build time (SSG), con SEO estructurado (JSON-LD, sitemap, Open Graph) e imágenes optimizadas. Pipeline de CI en GitHub Actions.

La separación entre datos, componentes y configuración permite escalar el contenido sin tocar la UI, y viceversa.

Qué demuestra este proyecto

  • Capacidad de diseñar una identidad visual coherente para un sector exigente.
  • Criterio en UX de sitio corporativo: jerarquía, narrativa, conversión y exploración.
  • Dominio de frontend moderno con código mantenible, tipado y tests.
  • Atención al detalle: motion, accesibilidad, SEO y rendimiento, no solo la capa visual.