Seance: Una tienda de matcha diseñada en Figma con un tema personalizado
Diseñamos Seance en Figma, planificamos cada página antes de construirla y luego creamos el tema de Shopify para que coincidiera con el diseño. La demo muestra todo el proceso, desde la planificación hasta una tienda funcional.
Resumen del proyecto
Seance es una marca de matcha de demostración que creamos para mostrar un proceso completo de diseño y desarrollo en Shopify. El objetivo era una tienda tranquila y centrada en la marca, diseñada primero y luego construida como un tema personalizado en lugar de ensamblarla con secciones predeterminadas.
Planificación y diseño en Figma
Empezamos con wireframes. Cada plantilla tuvo su propio marco en tres anchos: escritorio (1440), tablet (768) y móvil (375). Esto incluye la página de inicio, colecciones, productos, carrito, búsqueda, blog, artículos, páginas estándar y la página de contacto, además de las partes que comparten todas las páginas: la barra de anuncios, el encabezado con su mega menú, el pie de página, el cajón del carrito (con un estado vacío) y los cajones de navegación.
Junto a los marcos se encuentra una página de componentes: botones, filas de acordeón, tarjetas de productos, tarjetas de reseñas, tarjetas de contenido, el encabezado y el pie de página en cada tamaño. Los marcos utilizan texto de relleno para los productos y las reseñas, para que el diseño pudiera revisarse antes de que el texto y la fotografía estuvieran definitivos.
Construcción del tema personalizado
Construimos el tema sobre la base del tema Horizon de Shopify y escribimos secciones personalizadas para las partes que debían seguir el diseño:
- Una sección principal y una barra de beneficios para la página de inicio
- Una sección de «ritual» con los tres pasos de preparación, una sección de categorías y una sección de reseñas de clientes
- Una ruta de navegación para la página de producto y una tarjeta de preparación situada debajo de la foto del producto
- Elementos adicionales dentro del cajón del carrito, un fragmento de calificación con estrellas y una hoja de estilos para los colores y la tipografía de la marca
Los marcos de Figma sirvieron como referencia durante toda la construcción, para que se pudieran comprobar las páginas frente al diseño en cada ancho.
Pruébalo
La tienda de demostración está en línea y se abre tras una página con contraseña. La contraseña es seance.
