Sitio web
Trend Beers
Proyecto originalmente desarrollado en 2023 durante mi etapa como diseñadora en la agencia Lado Norte. Este rediseño conceptual fue realizado en 2026 por iniciativa propia para mejorar la propuesta original bajo mi criterio actual.
Rol
Diseñador UI
Herramientas
- Figma
- Illustrator
Tiempo
- Octubre 2023 [Original]
- Mayo 2026 [Rediseño]
Descripción general
El objetivo principal fue conceptualizar y diseñar la interfaz de usuario (UI) para un nuevo e-commerce dedicado a la importación y venta de cervezas belgas de alta gama (marcas como Straffe Hendrik, Brugse Zot y Blanche De Bruges).
El cliente buscaba una plataforma que equilibrara la funcionalidad de venta directa con una estética visual rica y envolvente.
Proceso de diseño
Para este proyecto, el objetivo fue optimizar la jerarquía de información y elevar la estética visual para alinearla con la exclusividad de las cervezas. Los cambios clave fueron:
Referentes gráficos
Para el moodboard de referentes gráficos, busqué sitios con características únicas que conectaran con la temática de la cervecería. El enfoque principal fue encontrar layouts dinámicos y no estáticos, que presentaran la información de manera funcional pero con elementos visuales diferenciadores.
Aunque el concepto inicial exploraba colores como rojo y amarillo sobre gris, finalmente decidí llevar la estética hacia un tono oscuro y formal. Esta decisión permite que el diseño coincida con la fotografía de producto de las cervezas, resaltando su calidad y manteniendo una identidad visual coherente.
Mapa de navegación
Antes de enfocarme en el diseño, creé un mapa de navegación para orientarme en las páginas que iban a conformar todo el sitio web.
Guia de estilo
Ver Design system en FigmaPara garantizar la coherencia y facilitar la escalabilidad del proyecto, desarrollé un sistema de diseño que incluye una paleta cromática optimizada para entornos oscuros, una jerarquía tipográfica clara y componentes modulares.
Wireframes
Ver Wireframes en FigmaAntes de comenzar el mockup, diseñé un bosquejo de las 5 pantallas mas importandes dentro de la navegación, para luego definirlas correctamente en un Mockup integrando los códigos gráficos definidos en el Sistema de diseño.
Mockups
Ver Mockups en FigmaCreé los componentes de cada página, reutilizandolos y armando cada página en base a los códigos gráficos definidos en el sistema de diseño.
