Responsive e-commerce Site Design
Responsive e-commerce Site Design
Velvet Sea Boutique
A responsive website with a mobile-first approach created as a personal project. Velvet Sea Boutique is an e-commerce site dedicated to small-batch, sustainable fashion designed with inclusive sizing in mind.
Take a glimpse at the finished product.
Take a glimpse at the finished product.
Here are some snapshots of the finished product before we get into the details.
Here are some snapshots of the finished product before we get into the details.
Here are some snapshots of the finished product before we get into the details.
Wishlist Animation
Wishlist Animation
Wishlist Animation
A quick demonstration of the "Add to Wishlist" Feature.
A quick demonstration of the "Add to Wishlist" Feature.
A quick demonstration of the "Add to Wishlist" Feature.
Logo Design
Logo Design
Logo Design
The Velvet Sea Boutique logo is simple and sleek, like the site itself. The delicate wave gives a slight detail to the classic Serif font "V".
The Velvet Sea Boutique logo is simple and sleek, like the site itself. The delicate wave gives a slight detail to the classic Serif font "V".
The Velvet Sea Boutique logo is simple and sleek, like the site itself. The delicate wave gives a slight detail to the classic Serif font "V".
User Flow
User Flow
User Flow
The easily navigated user flow closely follows the project brief's requirements and adds to the sleek design. Allowing users to do everything they need on the site without the hassle of an overly complicated UI.
The easily navigated user flow closely follows the project brief's requirements and adds to the sleek design. Allowing users to do everything they need on the site without the hassle of an overly complicated UI.
The easily navigated user flow closely follows the project brief's requirements and adds to the sleek design. Allowing users to do everything they need on the site without the hassle of an overly complicated UI.
Low Fidelity Wireframes
Low Fidelity Wireframes
Low Fidelity Wireframes
I first used the Crazy 8’s method on paper to design low-fidelity wireframes. This allows me to make many iterations of my ideas early on and not put myself in a box by sticking to my first iteration of any screen. After this process, I chose the best version of each screen and turned them into low-fidelity wireframes on Balsamiq.
I first used the Crazy 8’s method on paper to design low-fidelity wireframes. This allows me to make many iterations of my ideas early on and not put myself in a box by sticking to my first iteration of any screen. After this process, I chose the best version of each screen and turned them into low-fidelity wireframes on Balsamiq.
I first used the Crazy 8’s method on paper to design low-fidelity wireframes. This allows me to make many iterations of my ideas early on and not put myself in a box by sticking to my first iteration of any screen. After this process, I chose the best version of each screen and turned them into low-fidelity wireframes on Balsamiq.
Mid Fidelity Wireframes
Mid Fidelity Wireframes
Mid Fidelity Wireframes
Transforming the low-fidelity wireframes into mid-fidelity wireframes in Figma, following a layout grid, provides more structure to the design before adding copy, images, and color.
Transforming the low-fidelity wireframes into mid-fidelity wireframes in Figma, following a layout grid, provides more structure to the design before adding copy, images, and color.
Transforming the low-fidelity wireframes into mid-fidelity wireframes in Figma, following a layout grid, provides more structure to the design before adding copy, images, and color.
High Fidelity Mobile Mockups
High Fidelity Mobile Mockups
High Fidelity Mobile Mockups
Thanks for reading.
Thanks for reading.
Feel free to check out more of my work.
Feel free to check out more of my work.