MQ FINE
JEWELRY

A fully functional responsive prototype of an online store that was coded with both front-end and back-end skills.

My Role

Web Design, Front-End Development, Back-End Development

Timeline

02/2021 – 05/2021

Store Introduction
BACKGROUND

MQ Fine Jewelry perfectly meets the customers' needs by offering a variety of handmade and manufactured jewelry pieces.

This interactive online store was coded with HTML, CSS, JavaScript, PHP, JSON, and MySQL.

The store aims to enhance customers' consumption experience in luxury accessories.

Sitemap

The four primary pages that the site contains are the landing page, store page, cart page, and about page. More expanded pages include the individual product page, cart confirmation page, checkout page, and purchase confirmation page.

Style Guide
Primary Color
Secondary Color
Neutral Color
Typeface
Logo & Icons
Interactive Style Guide
  • The interactive style guide was created for a CSS style reference of the store.
  • The table of contents contains six sections: color palette, typeface, input forms, buttons, navbar, and product grid.
  • It also can be used as a style library for other sites.
Wireframes
Features
Project Takeaways

I learned to implement dynamic effects into the site with HTML, CSS, JavaScript, and jQuery for the designing parts. Creating the style guide was very useful to help me visualize the interactive effects of CSS style, and I could reuse it again in other sites.

Additionally, I was given a great opportunity to build a database with Mysql to add or edit products directly through the platform.

This project helps me build strong web development skills on both front-end and back-end to make a workable and functional website.

Next Case Study
Motion Graphics

Motion Graphics

These motion graphics depict lovely flat illustrations and themes to remind us of the particulars of life.

Start Small to Stay Healthy
Start Small to Stay Healthy