Chocoalot is an e-commerce website that sells handmade chocolate.
Individual Web Design & Development Project
Chocoalot e-commerce website is responsive and can work on desktops, tablets, and mobile sized device. It also has some fun interactions. All content is original, chocolates are handmade by myself and photos are taken by myself as well.
First, I started to create the wireframe in order to have an overview of the whole website flow and the grid system for product list page.
After the wireframe is sketched out, I started to build the website by coding its basic structure with placeholder content.
After the wireframe is built, I moved on to create UI elements and tweak more design detail for the website.
Once I was satisfied with the layout of the website, I started to incorporate the website with a database. I created a database at my host for all the products with information including name, price, description, nutrition facts, date created...etc.
Chocoalot’s logo uses the negative space to indicate the letter C from its name. It also has a melting shape to reference chocolate. Another meaning behind this logo is that it reflects that our chocolates have layers of ingredients.
Colors are used to deliver a delightful, tasty feeling. Also used to indicate different flavors of the chocolate base.
Lobster 2 is used only with the logo. Dosis is the brand typeface. It has a slightly longer look like our chocolate, and also round caps for a tasty look.
Chocoalot is a fully coded e-commerce with my handmade chocolates. This was a challenging but fun and meaningful project for me. I've gained more knowledge of HTML, CSS, and JavaScript. Also, I got the chance to work with PHP and MySQL for the first time.
It’s always difficult to learn a new language, including coding language. To me, coding is never an easy thing to do. Sometimes I can get stuck on a bug for a whole day.
