Restaurante Annua Hero

annua

HTML5 CSS3 JAVASCRIPT RESPONSIVE DISEÑO WEB

Digitalización de la experiencia gastronómica para restaurante con 2 Estrellas Michelin. Enfoque en minimalismo visual y diseño adaptativo pionero.

Descubrir
Contexto · 2012

Minimalismo visual.

Digitalización de alta cocina mediante interfaces limpias y optimización de activos visuales. Enfoque en la usabilidad y la fluidez de navegación.

Establecimiento de un lenguaje visual propio sin referencias previas en el sector.

Home Annua 2012
Tecnología

Diseño adaptativo (Responsive).

Implementación de arquitectura web multipantalla. Optimización de la visualización en dispositivos móviles y de escritorio.

Soluciones Custom

  • srcset manual vía JavaScript
  • Detección de viewport antes de asignar fuentes de imagen
  • Breakpoints empíricos probados en dispositivos reales
  • Sin DevTools: testing en hardware físico
// Lógica simulada de detección de viewport manual en 2012
function loadResponsiveBackground() {
  var width = window.innerWidth;
  var bgSrc = 'bg-mobile.jpg';

  if (width > 1200) {
    bgSrc = 'bg-xl.jpg';
  } else if (width > 768) {
    bgSrc = 'bg-tablet.jpg';
  }
  document.getElementById('fullscreen-bg').src = bgSrc;
}

Stack Limitado

  • Sin Flexbox.
  • Sin CSS Grid.
  • Media queries inestables.
  • background-size: cover sin soporte universal.
Arquitectura Visual

Sistema de galería fullscreen custom

27 fotografías por temporada a pantalla completa. Arquitectura con imagen background 100% viewport, thumbnails navegables en banda inferior, navegación por flechas + teclado y transiciones suaves.

JavaScript vanilla puro. Sin plugins. Gestión manual de inconsistencias cross-browser: IE9, Firefox 12, Chrome 18, Safari 5.

Plato Annua 1
Atmósfera Annua
Detalles Gastronómicos
Testing Responsive 2012
Filosofía Estética

Minimalismo radical

En 2012 los clientes pedían "más cosas". Annua pidió quitar hasta que solo quedara la imagen.

  • Negro #000000 absoluto
  • Tipografía blanca weight 100-200
  • Sin bordes, sin botones visibles, sin fondos de color
  • Navegación fantasma: aparece/desaparece
  • Jerarquía visual solo por luz fotográfica

Desarrollo + fotografía integrados

Viaje a Cantabria para coordinar sesión in situ.

Las fotos no se adaptaron al diseño. El diseño nació con las fotos.

Requisitos técnicos condicionaron encuadre, composición y zona de foco para garantizar visualización fullscreen en cualquier resolución.

Mantenimiento Continuo

4 años de evolución continua

El proyecto no terminó el día de la entrega (2012-2016).

4

Años de soporte activo

Gestión de la infraestructura de los servidores, hosting y dominio.

Gestión Hosting & Dominio

Gestión de la infraestructura de los servidores.

Actualización de Galerías cada Temporada

Cada primavera = nuevos platos = nueva galería antes del primer servicio.

Coordinación Operativa

Ajustes de ciclo de apertura del restaurante y compatibilidad de nuevas versiones de navegadores.

"

La apuesta del chef y propietario Oscar Calleja es clara: refinamiento absoluto. Y lo consigue con creces.

— Pepe Barrena, Metropolitan · El Mundo, oct. 2010

Restaurante cerrado en 2022 · Chef Óscar Calleja continúa en Ment, Salamanca
Fullscreen view