Celestial
Urban
Burgers
Una web que se come con los ojos: diseño y desarrollo completo para la hamburguesería con mejor nota de Getafe.
- Cliente
- Celestial Urban Burgers
- Servicios
- Dirección de arte · Diseño web · Desarrollo
- Sector
- Restauración · Getafe, Madrid
- En línea
- celestialburgers.es ↗
01 · El reto
Tenían la
hamburguesa.
Faltaba el
escaparate.
Celestial llevaba desde 2022 haciendo el trabajo duro: carne madurada, salsas propias, pan brioche y una nota de 4,8 en Google. Pero todo eso vivía en fotos de Instagram y en un PDF de carta que nadie abría dos veces.
El encargo era simple de enunciar y difícil de ejecutar: que alguien entre en la web y a los dos segundos tenga hambre. Y que sepa exactamente qué hacer después.
- 01Antojo inmediato
- 02Carta legible, sin PDF
- 03Un camino claro a pedir
02 · Dirección visual
Noche de neón
Fondo casi negro para que la comida sea lo único que brilla. Un rosa eléctrico como acento único, tipografía condensada de cartel de barrio y una cursiva fina para las notas de sala.
03 · Estructura
Una página,
siete tiempos
Ningún menú que esconda nada. El scroll está montado como un menú degustación: cada sección responde a una pregunta y empuja a la siguiente.
- 01 Hero en vídeo Carne a fuego lento a pantalla completa. Cero texto de más.
- 02 La carta Lista numerada, ingredientes completos y etiquetas de “la más pedida”.
- 03 Plato estrella Una sola pieza a media pantalla con sus datos y su botón.
- 04 Sobre nosotros La historia, la dirección y el teléfono, sin obligar a ir al footer.
- 05 Galería Dos filas en bucle cruzado con toda la producción de foto.
- 06 Reseñas de Google Seis opiniones reales y la nota media, como prueba antes del pedido.
- 07 Pedir a domicilio Pantalla rosa a sangre. Un solo botón y ninguna duda.
04 · Movimiento
Todo se mueve
Marquee infinito
Una cinta rosa que repite el menú sin descanso y separa los bloques oscuros.
Reveal por scroll
Los titulares entran línea a línea, con el retardo justo para leerlos.
Hover en la carta
Cada hamburguesa se subraya, se ilumina y adelanta su ficha.
Galería en bucle
Dos filas cruzándose a distinta velocidad: profundidad sin peso.
Toda la animación respeta prefers-reduced-motion y se apoya en transformaciones de CSS: movimiento sin coste de rendimiento.
05 · Resultado
Carta, reservas
y delivery en
el mismo scroll
Siguiente proyecto
¿Hablamos
del tuyo?
Cuéntame qué haces y a quién se lo vendes. Te digo si puedo ayudarte y cómo lo plantearía.