Website
Trend Beers
This project was originally developed in 2023 during my time as a designer at the Lado Norte agency. This conceptual redesign was carried out in 2026 on my own initiative to improve upon the original proposal based on my current perspective.
Role
UI Designer
Tools
- Figma
- Illustrator
Timeline
- October 2023 [Original]
- May 2026 [Redesign]
Description
The main objective was to conceptualize and design the user interface (UI) for a new e-commerce site dedicated to the import and sale of premium Belgian beers (brands such as Straffe Hendrik, Brugse Zot, and Blanche De Bruges).
The client was looking for a platform that balanced e-commerce functionality with a rich, immersive visual design.
Design Process
For this project, the goal was to optimize the information hierarchy and enhance the visual appeal to reflect the exclusivity of the beers. The key changes were:
Graphic references
For the moodboard, I looked for websites with unique features that resonated with the brewery’s theme. The main focus was on finding dynamic, rather than static, layouts that presented information in a functional way while incorporating distinctive visual elements.
Although the initial concept explored colors like red and yellow on a gray background, I ultimately decided to shift the aesthetic toward a dark, formal tone. This decision allows the design to complement the product photography of the beers, highlighting their quality and maintaining a consistent visual identity.
Navigation Map
Before focusing on the design, I created a navigation map to guide me through the pages that would make up the entire website.
Guia de estilo
See Design system in FigmaTo ensure consistency and facilitate the scalability of the project, I developed a design system that includes a color palette optimized for dark environments, a clear typographic hierarchy, and modular components.
Wireframes
See Mockups in FigmaBefore starting the mockup, I designed a sketch of the 5 most important screens within the navigation, to then define them correctly in a mockup by integrating the graphic codes defined in the design system.
Mockups
See Mockups in FigmaI created the components of each page, reusing them and assembling each page based on the graphic codes defined in the design system.
