Overview
Shelf Beauty is a fictional cosmetics brand I created to capture the idea of simple, natural beauty. Designed for people who care about clean ingredients and effortless routines, the site has a calm, modern feel that mirrors the brand’s “less is more” philosophy.
I started with wireframes and visual design in Figma, then brought everything to life with responsive layouts in HTML5 and CSS. The website includes a home page, about page, product gallery, video section, filterable table, and an image gallery with pop-up lightboxes.
The result is a fresh, easy-to-navigate design that feels authentic, approachable, and true to the brand’s focus on enhancing natural beauty.
View the website here.
Page Designs
The Shelf Beauty home page features a hero image with a clickable button that leads to the Shop page.
As you scroll below the fold, you see three modules that highlight the brand's best-selling products.
Following that is a customer testimonial, a newsletter sign-up field, and the bottom navigation menu.
UX Elements
Throughout the website, the navigation menu links as well as buttons have a hover effect, changing from black to blue or inverse colors to indicate they're interactive.
Wireframes
Website Wireframes
Mobile Wireframes
