Jewelry website
A personal Figma project
This is a project I made in my free time in order to practice my prototyping skills in Figma!
I have previously made handmade jewelry to sell on the online market place Etsy. I drew inspiration from this and decided that I would make a full web shop for my “brand” as my practice!
Wireframing
To help me, I looked into my old projects and their instructions as well as watched tutorials on Youtube on how to achieve certain features.
I started out by making simple wireframes based on my past experiences with web shops as well as looking at other jewelry shops for inspiration, such as Swarovski, Pandora and Thomas Sabo. I looked for common themes and features and picked out what I thought looked and worked best from all of them.
With this inspiration, I made simple wireframes in Figma for the homepage, the product feed and a selected product screen to base my design upon:
Design process
After wireframing I started building the homepage.
I used auto layouts and components to make certain animations possible such as an interactive category-menu.
I used the plugin Unsplash for choosing a picture for the front page and then went on to create the product cards and combine them to make the category feeds. I used Unsplash for these pictures as well and another plugin, ContentReel, for pretend names and prices for the products presented.
I used colors taken from the promotional picture on the homepage in the rest of the design for a coherent look.
I wanted to make sure the website felt as real as possible so I added many interactions and used components to make responsive filters, sorter, buttons and product color choices etc.
