Web · Propuesta
Els Cafès del Manel
Una propuesta de web para una marca de café de especialidad: tres cafés con nombre de calle de Gràcia, una barra de café en 3D que se recorre bajando y la compra conectada al Shopify que ya tenían.
- Para
- Els Cafès del Manel
- Año
- 2026
- Qué hice
- Diseño, desarrollo y 3D
- Tecnología
- Generador propio, Three.js y Shopify
- En línea
- elscafesdelmanel.vercel.app
En uso La portada de arriba abajo: la barra de café en 3D, del grano a la taza, y los tres cafés.
El encargo
Del grano a la taza, bajando
La portada es una barra de café en 3D que se recorre con el scroll: el grano, la molienda y la taza, cada paso con su frase. La marca enseña su oficio antes de vender nada.
Los tres cafés llevan el nombre de una calle de Gràcia —Verdi, Gran de Gràcia y Torrent de l'Olla— y cada uno tiene su ficha con la bolsa en 3D, que se gira con el dedo.
Las decisiones
Tres decisiones que explican el resto
-
a
La compra va a su Shopify
La cesta es de la web nueva, pero el pago se hace en el Shopify que ya tenían, con un enlace de cesta. No hay que migrar la tienda.
-
b
Tostado en Cardona
La marca nace en Gràcia, pero el café se tuesta en Cardona en lotes pequeños. La web lo cuenta: el pedido sale de la tostadora en 24–48 horas laborables.
-
c
El 3D, ligero en el móvil
La portada en un móvil pesa 436 KB, motor 3D incluido. Los efectos de luz y sombra se quedan para el escritorio.
En cifras
Tres cafés y una barra en 3D
Medido con Lighthouse en móvil. No se deja indexar en Google a propósito: es una propuesta, no la web oficial de la marca.
- 3
- Cafés, cada uno con su bolsa en 3D
- 436 KB
- La portada en un móvil
- 96
- Accesibilidad en móvil
- 100
- Buenas prácticas
- 96 Accesibilidad
- 100 Buenas prácticas
El sistema
Bricolage, Geist y el marrón del café
Bricolage Grotesque en negrita para los titulares, y estrecha para la marca. Geist para leer las fichas. El marrón es el de comprar; el rojo, solo el punto final.
#2B1D14Café#F6F3EFFondo#F0E3D2Arena#68452DMarrón#B5473ARojo
La web entera
De arriba abajo
Pasa el ratón por encima de cada página para recorrerla.Desliza dentro de cada página para recorrerla.
