Proyecto web, 2025–2026
Todos los proyectosMG Spirit
Once sabores, cero seriedad.
Diseño web y desarrollo completo en WordPress para una gama de cócteles listos para beber.
Cliente
MG Spirit. Cócteles de vodka, ron y gin con fruta, 5,5 % vol., nacidos en Barcelona en una destilería con cinco generaciones de historia.
Qué hicimos
Diseño web (UI, dirección visual, animaciones), textos base a partir de sus guidelines y montaje completo en WordPress.
Año
2025–2026. El diseño arrancó en julio de 2025.
Idiomas
Castellano e inglés
Web
El encargo
MG Spirit quería salir del cliché de la destilería de toda la vida. Su producto son cócteles afrutados y burbujeantes, listos para abrir y beber, pensados para un público joven.
La web tenía que ser tan colorida y desenfadada como las botellas y presentar once sabores sin aburrir a nadie por el camino.
Fue un proyecto largo. Escribimos los textos base partiendo de las guidelines de la marca, y el equipo de MG Spirit los adaptó a su voz donde quiso.
Ahí entramos nosotros.
La home arranca con las botellas flotando entre rodajas de fruta. Al hacer scroll se recolocan y aparece el manifiesto.
Color y letra
Cuatro colores pop hacen de fondo de bloque, con negro y blanco para el texto. Cada sabor suma después el color de su fruta.
Violeta
HEX #6624BC
RGB 102 36 188
Lima
HEX #B8F361
RGB 184 243 97
Rosa
HEX #FB258A
RGB 251 37 138
Coral
HEX #FF6161
RGB 255 97 97
Roc Grotesk
Titulares y textos, incluida su versión condensada para los bloques en mayúsculas.
Vertikal
Display muy condensada para los nombres de sabor y el carrusel Choose your Spirit.
Los vídeos se presentan inclinados, como fotos pegadas sobre el fondo.
Bloque rosa con el producto y los premios (IWSC, The Spirits Business).
¿Tradición? Sí.
¿Serios? Jamás.
El tono de la marca, tal cual aparece en la home.
Papel rasgado sobre lima para contar la historia familiar sin ponerse solemne.
Un color por sabor
El carrusel cambia de fondo con cada sabor. Dentro, cada ficha usa el color de su fruta, la botella sobre el nombre en letra condensada gigante y las notas de cata en tarjetas.
Apple Vodka: verde manzana de arriba abajo.
Todas las fichas salen de una misma plantilla. Cambian el color, la botella y las notas de cata, así que añadir un sabor nuevo es rellenar campos.
once sabores, once fondos
La home entera
Escritorio a 1440 px y móvil a 375 px. El menú del móvil ocupa toda la pantalla, en verde y con los enlaces en cursiva gigante.
haz scroll dentro
Cómo llegamos aquí
El diseño empezó en Adobe XD en julio de 2025, con tres propuestas para la home y la ficha de producto. De ahí hasta la web publicada hubo muchas vueltas.
Propuesta 01
Bloques de color plano, papel rasgado y una ficha de sabor con el nombre gigante detrás de la botella.
de aquí salió la web
Propuesta 02
Hero en carrusel con un degradado por sabor, catálogo en mosaico y una ficha más editorial, con fotografía grande.
Propuesta 03
Hero fotográfico a pantalla completa, con los lemas de la marca en etiquetas sobre la imagen.
Cómo está hecha
Base
WordPress y Elementor con contenedores. Partimos del tema Bluebeard y lo rehicimos en un tema hijo propio hasta que de la plantilla no quedó nada a la vista. Widgets de Qi Addons y Qi Blocks.
Movimiento
Animación de cabecera ligada al scroll y textos que aparecen palabra a palabra.
Catálogo
WooCommerce con las categorías vodka, ron y gin, y una plantilla común para todas las fichas de sabor.
Legal
Verificación de edad con Age Gate y gestión de cookies con Complianz.
Idiomas
Versión completa en castellano e inglés.
