The project
Working in the design team at the Dexa agency, I participated in a project for the Paixão product line, from the company Coty. Two other designers and I were responsible for designing the website that would showcase the products from the brand's catalogue.
We received photographs and assets from the client to produce the content of the fragrances, each with corresponding colors. Therefore, it was possible to design the pages more freely, giving great emphasis to the elements that made up the aromas. As the website was developed, it was also adapted for the mobile version.
Part of the team structured the layout, while I was responsible for the creation and handoff of product assets that would be displayed in the website's catalog, as well as some layout adjustments that were requested by the client.
Products
Inside Figma, we composed several images that would be used on the product pages. All were created thinking about the handoff for developers with nomenclatures following a logic of product name and numbering.
Dynamic banners with a parallax effect were designed for the home page, in order to increase user immersion. The effect refers to lightness and diversity of aromas.
The big challenge was to align with the developers how each element would move when scrolling the page. The handoff was done in stages, with the element assets being exported in groups with position and numbering specifications, to facilitate implementation on the website.
Banners
Dynamic banners with a parallax effect were designed for the home page, in order to increase user immersion. The effect refers to lightness and diversity of aromas.
The big challenge was to align with the developers how each element would move when scrolling the page. The handoff was done in stages, with the element assets being exported in groups with position and numbering specifications, to facilitate implementation on the website.
Layouts
The final layouts were composed with a combination of textures, photographs and fragrance elements distributed across the pages. This way, the user would always be aware that they were browsing a page on the passion line website.
Many of the compositions were used to highlight the products on specific pages, as was the case with the fragrances page. Banner elements such as the photo, badge, and curvy design were exported separately, so developers could adjust for responsiveness.
I was also tasked with designing the “About Paixão” page, where I applied some photographs from the photo shooting sent by the client, as well as elements that make up the visual identity of the Paixão line.
Mobile
The mobile pages were all adapted so that the elements could be inserted just like the desktop version by the team of developers.
Thanks for watching!