Infused by LEVO
Una tienda de gomitas con cannabinoides donde la fruta, el color y el movimiento llevan la marca y el producto sigue al centro: concebida, diseñada y construida desde la dirección creativa hasta producción.
- Cliente
- Infused by LEVO
- Rol
- Dirección de arte, Diseño UX/UI, Desarrollo full-stack
- Sitio en línea
- infusedbylevo.com (se abre en una pestaña nueva)
Introducción
Infused by LEVO vende gomitas con cannabinoides en línea. Concebí, diseñé y construí su tienda: el concepto creativo y las composiciones en Photoshop, el UX/UI en Figma, el diseño de motion e interacción, y el frontend y backend en Shopify.
Mi aporte
- Diseño visual
- Diseñador principal
- Front-end
- Desarrollador principal
- Back-end y sistemas
- Desarrollador principal
Concepto creativo, diseño visual, diseño de motion e interacción, desarrollo frontend y backend. La identidad de marca, el packaging y los productos pertenecen al cliente.
Con Realizado para un cliente de The Limitless Agency
Experiencia responsive
01 · El desafío
Luminosa, honesta y fácil de comprar.
Los productos con cannabinoides arrastran códigos visuales que fácilmente se adueñan de una marca, y un vocabulario técnico de proporciones y nombres de cannabinoides que es un punto de partida difícil para la mayoría de los compradores.
Me propuse construir una tienda donde el sabor marque el tono y la información del producto siga completa y fácil de encontrar. La marca podía sentirse cercana sin ocultar lo que contiene cada frasco, incluidas las fórmulas con CBN.
02 · La idea creativa
Que el sabor lidere.
Los compradores reconocen una frutilla antes que una fórmula. Por eso construí el mundo visual a partir de lo que hay dentro de cada producto (fruta, color y textura), para que cada sabor explique su frasco.
Esa sola idea le dio una razón a cada decisión posterior: la paleta, la composición, el movimiento e incluso la navegación.
03 · Dirección de arte
Compuesta en torno al producto.
Un mundo visual audaz puede sepultar lo que se vende, así que cada decisión expresiva también apunta de vuelta al producto.
-
Cada línea lleva al frasco. Las franjas irradian desde detrás del packaging; el titular y el llamado a la acción van a la izquierda, el producto a la derecha. -
Los ingredientes rompen el marco. Fruta y gomitas cruzan los bordes de las tarjetas, los divisores ondulados y el footer, para que la página se lea como una sola escena continua. -
Calma entre momentos intensos. “Why we’re different” cambia a un fondo crema, tarjetas con borde y fotografía real de ingredientes: un lugar para leer antes del catálogo.
El color sigue al sabor.
Frutos rojos
El campo radial del hero y el rojo frutilla que lo ancla.
-
Rosa frutos rojos
#E84474 -
Rojo de franja
#CA5350 -
Durazno
#EAAB98 -
Frutilla
#D00204
Cítricos y fondo
Calidez cítrica para sus fórmulas, un fondo crema para la lectura y el arándano como contrapunto frío.
-
Cítrico
#FEBF1E -
Naranja
#F18929 -
Crema
#FFF4E9 -
Arándano
#3D526F
Muestreados de las composiciones originales en Photoshop.
04 · Descubrimiento interactivo
Descubrir por sensaciones.
Partir por los nombres de los cannabinoides obliga a descifrar una fórmula antes de encontrar algo que te guste. En cambio, diseñé la entrada en torno a momentos cotidianos: cuatro opciones ilustradas (Be well, Positive energy, Berry fun y Sweet dreams), cada una ligada a una escena, desde pasear al perro un domingo hasta las cortinas blackout.
Elegir una reescribe el titular, cambia la fotografía y trae al frente la fórmula correspondiente. Ocasión, imagen y producto cambian juntos, así que el vínculo entre ellos nunca se pierde, y el detalle completo del producto queda a un clic. Es una forma de explorar el catálogo, no una recomendación sobre efectos.
Una elección, tres cambios: los cuatro estados originales.
-
Be well → “The first day back from being sick.” Be Well, naranja. -
Positive energy → “Walking the dog on a Sunday.” Positive Energy, açaí. -
Berry fun → “Moonlight walks on the beach.” Berry Fun, frutilla. -
Sweet dreams → “Blackout shades.” Sweet Dreams, mora.
Del descubrimiento a la compra.
-
Tarjeta de producto: dos acciones para dos intenciones. -
Página de producto: primero la compra, el detalle de ingredientes a una pestaña de distancia.
Escritorio y móvil
Una composición, dos layouts.
En móvil la composición se reordena en lugar de achicarse: las tres razones para creer pasan de una fila a una sola columna, cada tarjeta conserva su fotografía, y la fruta sigue rompiendo el marco.
-
Escritorio: tres razones para creer en una fila. -
Móvil: una sola columna; la fruta sigue rompiendo el marco.
05 · Movimiento
Diseñada para moverse.
Un layout estático habría devuelto los ingredientes al marco del que fueron diseñados para escapar. Por eso planifiqué la profundidad en Photoshop como capas separadas (un campo radial, fruta nítida y fruta desenfocada) y le di un comportamiento a cada una.
En el catálogo, la fruta se desplaza a tres velocidades de scroll distintas. Cuando “Why we’re different” llega al centro de la pantalla, su fruta se agrupa, se reduce y gira; una rotación lenta y continua evita que se quede quieta.
El scroll pasa a ser parte de la composición: la página gana profundidad sin agregar un solo elemento.
La profundidad se diseñó antes de animarse.
-
Capa 1: el campo radial que dirige cada línea hacia el producto. -
Capa 2: fruta desenfocada para el plano de fondo. -
Capa 3: fruta nítida para el primer plano.
06 · Del diseño al código
De la composición a producción.
Las interacciones descritas en un archivo estático suelen perder sus tiempos, distancias y curvas de aceleración en el camino a producción. Construí la tienda yo mismo en Shopify, extendiendo su base Dawn con secciones y componentes a medida para el descubrimiento y el movimiento, y traduje cada capa e interacción del diseño al código.
Un solo valor controla el movimiento: qué tan cerca está la sección del centro de la pantalla. Posición, escala y rotación se calculan a partir de él, así que el movimiento mantiene sus proporciones en cualquier tamaño de pantalla.
// Why section — published theme script (formatted excerpt)
const progress = 1 - Math.min(Math.abs(distanceFromCenter / (innerHeight / 2)), 1);
elements.forEach((el, index) => {
const toCenterX = maxToCenterX * progress * 0.25;
const toCenterY = maxToCenterY * progress * 0.25;
const scale = 1.2 - progress * 0.2;
const rotation = progress * (10 + index * 10);
el.style.transform =
`translate(${toCenterX}px, ${toCenterY}px) scale(${scale}) rotate(${rotation}deg)`;
});Cierre
Donde el diseño y el código se encuentran.
Trabajar entre diseño y desarrollo me permitió llevar esta visión creativa desde la primera composición hasta la tienda en vivo. Saber construirla no limita lo que diseño: amplía lo que puedo proponer.