firmaMotion (motion.dev)
Mesa giratoria
Un disco con cinco platos reales que se arrastra por ángulo con inercia, encaja, gira solo cada 4,5 s y enciende el plato del frente con su precio en vivo.
~/portafolio/restaurante-jean-carlos$ git log --reverse
Restaurante / delivery · En producción · septiembre 2026
Hecho por MontreachInvestigación de marcaDirección creativaDiseño UX/UIDesarrolloPruebas
Un chifa-pollería con pedidos en línea. Rediseñamos su web para que la portada gire como la mesa giratoria de un chifa, y llevamos ese mismo lenguaje a la carta, al carrito, al seguimiento del pedido y a su panel de administración.
- 77 → 1,7 MBpeso de la carta tras optimizar sus fotos
- 69fotos de platos optimizadas
- 28animaciones diseñadas para el sitio
- 13dispositivos en cada ronda de pruebas
- 16/16pruebas de seguridad del acceso con Google
/01 El encargo
Una web que se distinga de la típica de restaurante y que haga más fácil y atractivo pedir desde el celular.
- Para quién
- Clientes que piden delivery o recojo desde el celular.
- Tarea principal
- Ver la carta y hacer un pedido; después, seguir su estado.
- Qué investigamos
- Su web y su sistema de pedidos actual
- Su carta, precios y fotos de platos
- La fachada y el local
- Su color naranja y su propuesta: pollo a la brasa, chifa y comida criolla
/02 Investigación
Antes de diseñar una sola pantalla investigamos la marca a fondo: su historia, sus símbolos, su color, su tono y a quién le habla. De ahí sale todo lo demás.
Su propuesta
Pollo a la brasa, chifa y comida criolla en Chosica: abundante, familiar y para compartir.
El símbolo
La mesa giratoria del chifa, donde todos se sirven de todo. Se convirtió en la idea central del sitio.
Su color
Un naranja intenso que asociamos al fuego de la brasa, sobre fondo oscuro para que los platos resalten.
Su cliente
Familias que piden delivery o recojo desde el celular y quieren saber en qué va su pedido.
La investigación, la dirección creativa, el diseño, el desarrollo y las pruebas los hicimos íntegramente en Montreach. Los referentes nos ayudan a entender el rubro; el resultado es siempre propio de cada marca.
/03 Del boceto al diseño
Primero la estructura: jerarquía, bloques y recorrido, sin color ni fotos. Desliza para ver cómo esa misma estructura se convierte en la portada final.
/04 Sistema de diseño
Los colores y tipografías que salen de la marca y se usan como tokens en todo el sitio.
- Noche
#0e0c0cFondo general - Superficie
#1e1b1aTarjetas y bandejas - Hueso
#f3f0edTexto principal - Gris cálido
#b0a7a0Texto secundario - Naranja Jean Carlos
#f47a29Acento de marca y botones - Verde abierto
#51c28dEstado «abierto ahora»
Unbounded · Titulares y wordmark
Geist · Texto e interfaz
Geist Mono · Detalles y cifras
/05 Movimiento
Cada sitio tiene un gesto que solo puede ser suyo y nunca repetimos el de otro proyecto. Cada efecto usa la herramienta adecuada, no la de costumbre.
- Navegación en píldora flotante que se compacta al bajar
Motion (motion.dev) - Foto que se abre como un iris ligado al scroll
Motion (motion.dev) - Carta como libro que se hojea
page-flip - Categorías que desfilan en horizontal al bajar
Motion (motion.dev) - Nombre y precio que cambian con desenfoque
Motion (motion.dev) - Carrito que se sacude al agregar un producto
CSS (nativo)
/06 Tecnologías
- React
v19.2Interfaz del sitio y del panel - Vite
v7.3Compilación - React Router
v7.13Rutas - Motion
v13.4Mesa giratoria y movimiento - Supabase
v2.98Carta, pedidos, usuarios y acceso con Google - page-flip
v2.0Carta en forma de libro
/07 Cómo lo hicimos
- 01
Investigación
Estudiamos su carta, su sistema de pedidos y cómo piden sus clientes, casi siempre desde el celular.
- 02
Concepto
Tomamos la mesa giratoria del chifa como idea central: cinco platos reales con su precio al día.
- 03
Fotografía
Optimizamos las fotos de la carta: la página bajó de 77 MB a 1,7 MB sin perder calidad visible.
- 04
Diseño y desarrollo
Llevamos el mismo lenguaje a la carta, la ficha de producto, el carrito, el pago y el seguimiento del pedido.
- 05
Revisión con el cliente
Iteramos la sección de ubicación con el cliente hasta llegar a la foto de la fachada con vista 360°.
- 06
Publicación
Lo publicamos en su dominio con punto de restauración y actualización automática para sus clientes.
- 07
Pruebas
Lo probamos en 13 dispositivos sin generar nunca un pedido real.
- 08
Panel de administración
Rediseñamos su panel con el mismo estilo y añadimos acceso con Google y aprobación de usuarios.
/08 Calidad
Pruebas: 13 dispositivos en el sitio y 11 en el panel de administración.
/09 Pantallas
~/siguiente-paso$ montreach contact
Cuéntanos qué necesitas y te proponemos un primer paso concreto.