FUN

CONTACT

ABOUT

Wednesday, April 2, 2025

15:58:39

Wednesday, April 2, 2025

15:58:39

d@:taLog Studio

Digital Catalog displaying my curated jewellery collection

A digital catalogue made specifically to log my jewelry collection starting from the year 2018. This website was made from the love I feel towards my pieces but also as a means to keep track of my collection and share it with other people. Sadly I was not able to keep and record all of my accessories, so a few have been lost in time.

Link to the website: https://coral-decisions-731532.framer.app/

Product:

Product:

Product:

Web Design

Web Design

Web Design

Year:

Year:

Year:

2025

2025

2025

Role:

Role:

Role:

UI/UX Design, Web development

UI/UX Design, Web development

UI/UX Design, Web development

Skills:

Skills:

Skills:

No-code web design

No-code web design

No-code web design

Key screens

Challenge

How might we create a neat design that focuses on and embodies the jewellery?

Take a look at my approach

↓

Research & defining target audience

I conducted my research by looking at online jewellery stores and gathering common patterns between the websites. By gathering inspiration from different online stores I was able to come up with a basic layout that allows the jewellery pieces to stand out while keeping the website also interesting.

This self-project was driven by my desire to make a no-code website but keeping it personal. I then remembered that I own a lot of nieche accessory pieces and that I would love to show them off and share any stories I have.

Research & defining target audience

I conducted my research by looking at online jewellery stores and gathering common patterns between the websites. By gathering inspiration from different online stores I was able to come up with a basic layout that allows the jewellery pieces to stand out while keeping the website also interesting.

This self-project was driven by my desire to make a no-code website but keeping it personal. I then remembered that I own a lot of nieche accessory pieces and that I would love to show them off and share any stories I have.

Table of Contents

Research

Design & Ideation

Low Fidelity Prototype

High Fidelity Prototype

Unique Assets

Reflection

Next Project

Ideation Process

Once I had collected notes on different patterns that each website uses I moved on to making a concept and concept board on pinterest by collecting different photos that match the atmosphere that I want to go for. My goal is to design a website that is neat and allows the metallic of the jewellery pieces to stand out as the main point of the website.

When I had my concept board, I started to sketch out different layout options for my online catalogue. Here my goal is to keep the layout simple and easily understandable while also keeping an arty atmosphere that comes with the name of the catalogue.

Ideation Process

Once I had collected notes on different patterns that each website uses I moved on to making a concept and concept board on pinterest by collecting different photos that match the atmosphere that I want to go for. My goal is to design a website that is neat and allows the metallic of the jewellery pieces to stand out as the main point of the website.

When I had my concept board, I started to sketch out different layout options for my online catalogue. Here my goal is to keep the layout simple and easily understandable while also keeping an arty atmosphere that comes with the name of the catalogue.

Low Fidelity Prototype

When I decided on a layout that I liked, I started to make the wireframe in Figma using grey blocks as placeholders. I asked a few people about their initial impression once I had finished my first wireframing and I was met with positive opinions. I was unsure about the use of the pixel font, but I decided on it because it gave the website a game-y feeling which I liked and surprisingly many people seemed to like it as well. The layout was straightfoward and they navigated the website smoothly. Thus I moved on to making the Hi-Fi in Framer.

Low Fidelity Prototype

When I decided on a layout that I liked, I started to make the wireframe in Figma using grey blocks as placeholders. I asked a few people about their initial impression once I had finished my first wireframing and I was met with positive opinions. I was unsure about the use of the pixel font, but I decided on it because it gave the website a game-y feeling which I liked and surprisingly many people seemed to like it as well. The layout was straightfoward and they navigated the website smoothly. Thus I moved on to making the Hi-Fi in Framer.

High Fidelity User Flow

During the making of the High fidelity project I made a few sublte changes and additions, mainly in the hero section of the home page. I had planned to keep a static image as the background for the hero section, but then changed it to an automatic slideshow with images of myself that were edited in photoshop to give it a grainy effect. Afterwards I also decided to include an embedded 3D element made in Spline to make the static website feel a bit more alive.

Unique assets created

All assets, mainly the photos, were made uniquely for this project except for the font. The fontface I used was downloaded from external sources. Other than that, all of the assets used in this project were created by me.

Unique assets created

All assets, mainly the photos, were made uniquely for this project except for the font. The fontface I used was downloaded from external sources. Other than that, all of the assets used in this project were created by me.

Reflection

This was my second time making a no-code website using Framer and I noticed a major difference in my understanding of the software from making my portfolio to making this catalogue website. Overall I had an amazing time with this project and it was so fun to make all the different assets I needed and taking all of the seperate jewellery photos and editing them in photoshop. It was a lot more work than I had initally planned for but I am very proud of the end result. I believe that the website embodies all of the characteristics that I wanted it to and I am very pleased with adding the option for the viewer to read stories behind a few of the pieces. It gives it more character and the viewer can feel a bit more connected to these pieces rather than just seeing them as silver pieces that you can wear.

While I am very satisfied with the end result, I feel that I can do better on the creativity aspect and make the layout and animations a bit more engaging and fun. As of right now my animations are very basic but I want to challenge myself to create something out of the box in my next project. I want to explore different animation effects and transitions that make a website better and feel more alive.

Reflection

This was my second time making a no-code website using Framer and I noticed a major difference in my understanding of the software from making my portfolio to making this catalogue website. Overall I had an amazing time with this project and it was so fun to make all the different assets I needed and taking all of the seperate jewellery photos and editing them in photoshop. It was a lot more work than I had initally planned for but I am very proud of the end result. I believe that the website embodies all of the characteristics that I wanted it to and I am very pleased with adding the option for the viewer to read stories behind a few of the pieces. It gives it more character and the viewer can feel a bit more connected to these pieces rather than just seeing them as silver pieces that you can wear.

While I am very satisfied with the end result, I feel that I can do better on the creativity aspect and make the layout and animations a bit more engaging and fun. As of right now my animations are very basic but I want to challenge myself to create something out of the box in my next project. I want to explore different animation effects and transitions that make a website better and feel more alive.