Acerca de
OFFSET / BAJA es un estudio de arquitectura, diseño de interiores y galería de arte y mobiliario con sede en Los Cabos (Cabo San Lucas, B.C.S.). Hero Software desarrolló su sitio web institucional: una single-page editorial, bilingüe (inglés/español) y totalmente administrable desde un panel propio, construida sobre un stack moderno —Payload CMS 3, Next.js 16 y React 19— y desplegada con infraestructura serverless de alto rendimiento. El diseño estuvo a cargo de Serrano Comunicación, en colaboración con Hero Software.
Servicios
- Desarrollo web full-stack
- CMS a medida
- Internacionalización (i18n)
- Hosting y certificados SSL
Industria
- Arquitectura
- Diseño de interiores
- Galería de arte y mobiliario
Tipo de proyecto
- Sitio web institucional
- Single-page editorial bilingüe (ES/EN)
Overview
El reto era trasladar un diseño de marca de alto nivel —tipografía propia, escala tipográfica fluida, paleta cálida tierra/papel y una estética de “galería”— a un producto web real que el propio estudio pudiera mantener sin programar, en dos idiomas y con tiempos de carga mínimos. Hero Software materializó ese diseño como una plataforma completa: gestor de contenidos a medida, internacionalización real, optimización automática de imágenes y vista previa en vivo, todo servido de forma estática desde un CDN.
2
idiomas (ES/EN) con contenido localizado y fallback automático
100%
sitio estático servido por CDN; se regenera solo al publicar (ISR on-demand)
0
líneas de código para editar: panel propio con vista previa en vivo
El reto
El diseño de Serrano Comunicación proponía una experiencia de “galería”: tipografía autohospedada, una escala tipográfica fluida, una paleta cálida y un ritmo editorial cuidado, sostenido por animaciones sutiles. El desafío de Hero Software era convertir esa pieza de marca en un producto vivo, sin sacrificar ni un detalle del diseño y, al mismo tiempo, dejándolo en manos del estudio: bilingüe de extremo a extremo, editable sin tocar código, accesible y veloz. Había que conciliar dos exigencias que suelen estar en tensión —una estética de altísimo acabado y un sitio 100% administrable— con tiempos de carga mínimos y una experiencia consistente en cualquier dispositivo.
Estrategia
La estrategia se centró en construir una plataforma fiel al diseño, pero gobernable por completo desde el panel, con el rendimiento y la accesibilidad como base.
En el gestor de contenidos a medida (Payload CMS) se trabajó en:
- Un panel de administración en español, con etiquetas localizadas en cada colección y campo
- Un modelo de datos híbrido por “disciplinas”: un mismo proyecto puede alimentar los grids de Arquitectura e Interiores, cada uno con su propia imagen y etiqueta
- Colecciones de Proyectos, Medios y Usuarios, más globals editables de Navegación y Contacto, con control de orden, destacados, categorías y galería
En la internacionalización y el flujo editorial el enfoque estuvo en:
- Sitio bilingüe inglés (por defecto) / español, con contenido localizado por idioma y fallback automático para evitar campos vacíos
- SEO multilingüe completo: metadatos por idioma, hreflang, x-default, URLs canónicas, Open Graph y Twitter Cards
- Live Preview en iframe con previsualización por breakpoints, más borradores con autoguardado para publicar solo cuando esté listo
Y en rendimiento e infraestructura se construyó:
- ISR on-demand: el sitio se sirve 100% estático y solo se regenera cuando el contenido cambia en el CMS
- Pipeline de imágenes con conversión automática a WebP/AVIF, derivados responsivos y punto focal, servidos por CDN
- Fuentes autohospedadas (WOFF2) con estrategia anti-CLS y patrones de React Server Components
El resultado es un sitio que se ve y se siente como la pieza de marca original, pero que el estudio puede actualizar por completo —en dos idiomas— sin escribir una sola línea de código.
Solución
Galería
Una pieza de marca de galería, convertida en un sitio bilingüe que el estudio administra sin programar.