UMBRA · Velas artesanales

Diseño web y UX/UI de una tienda online de velas artesanales, con estructura de e-commerce completa y una identidad que transmite calma.

Tipo

Sitio web de una página

Alcance

Diseño web y UX/UI de tienda, en escritorio y móvil.

Entregable

Web de tienda con demo navegable: menú, vista rápida, carrito y modo oscuro.

Ver la web demoVer más proyectos
Portada de la tienda UMBRA en escritorio: barra de anuncio, menú, carrusel con el titular «La calma también se enciende» junto a una vela ámbar y una fila de valores de marca.

El concepto

La web busca que comprar una vela se sienta como parte del ritual: fotografía cálida de gran formato, mucho espacio vacío y un titular en serif con una palabra en cursiva azul, acompañado de etiquetas pequeñas en sans serif.

Lo que debía lograr

  • Transmitir calma y «objetos para vivir despacio».
  • Ayudar a elegir una vela por aroma o ambiente, con filtros y vista rápida.
  • Funcionar igual de bien en el móvil, en modo claro y en oscuro.

Estudio de marca

Paleta

Blanco niebla

#F6F9FB

Fondo principal

Azul cielo

#E4EEF5

Bloques y portada

Menta

#D5E8DF

Iconos y secciones suaves

Lavanda

#E4DDF0

Etiquetas y detalles

Azul sereno

#3F6585

Acentos y botones

Azul noche

#26394D

Titulares, texto y pie

Tipografía

Titulares · Cormorant Garamond

La calma también se enciende.

Textos y etiquetas · DM Sans

Velas artesanales para acompañar tus pequeños rituales y transformar cualquier rincón en un espacio propio.

Objects for slow living

Tono de voz

Suave, íntimo y sin exageraciones, con frases cortas que invitan a bajar el ritmo: «La calma también se enciende».

Decisiones de diseño

1

Estructura de tienda real

Barra de anuncio, menú con submenú de aromas, carrusel de portada, valores de marca, pestañas por categoría, más vendidos con filtro por aroma, opiniones, colecciones y blog. Es el recorrido que espera quien compra online.

2

Comprar sin salir de la página

Cada tarjeta tiene segunda foto al pasar el cursor, vista rápida y botón de añadir. El carrito lateral muestra la barra de envío gratis y sugiere productos que combinan.

3

Colores que calman, tienda ordenada

Una paleta de azul cielo, menta y lavanda sobre blanco transmite serenidad y deja que la llama cálida de las fotos sea lo único cálido. Con Cormorant Garamond y tarjetas uniformes (misma proporción de imagen) para que el catálogo se lea de un vistazo.

4

Claro u oscuro, accesible

Modo claro y oscuro con buen contraste, enlace para saltar al contenido, foco visible, menú móvil, paneles que se cierran con Escape y animaciones que respetan «reducir movimiento».

Resultado

Algunas pantallas de la web. Puedes recorrerla completa en la demo.

Menú «Velas» desplegado en UMBRA con aromas, tamaños, colecciones y una novedad destacada.
Sección «Los aromas más buscados» de UMBRA: tarjetas de producto con insignias de novedad, oferta y agotado.
Carrito lateral de UMBRA con barra de envío gratis, productos añadidos y botón para finalizar el pedido.
Vista rápida de la vela SLOW con foto, precio rebajado, notas, tamaño y botón de añadir.
Portada de UMBRA en móvil: menú, buscador, logotipo, carrito y la vela ámbar con el titular debajo.

¿Quieres una web así para tu negocio?

Cuéntame qué haces y diseño una pantalla de tu web en Figma con la promo de lanzamiento.

Escríbeme por WhatsApp

Proyecto referencial.