E-commerce Web Design & Development
User Interface Design
Web Development
Visual Design
Branding
Timeline:
1.5 months
Tools:
Figma
Blender
Vite
React.js
HTML
CSS
Live Site:
Overview
After gaining experience with React, Three.js (a JavaScript library to integrate 3D models on the web), Blender, and Figma, I designed and developed an e-commerce platform concept.
This project allowed me to apply my new skills and explore how these tools integrate in a real-world application.
Conceptualization & Branding
The objective was to create an intuitive online shopping experience with a user-friendly interface. Drawing inspiration from the back-to-school season, the design features bright colors and clean, playful visuals to evoke a lively and engaging atmosphere.
Process
Modeling Products in Blender
I used Blender to breathe life into the product lineup, creating 3D models that matched the site's upbeat theme.
This process was all about bringing a distinctive flair to the website, making each product not just an item to purchase but a piece of visual art.
My focus was on designing models that aligned with the cheerful and engaging theme of the site, adding an extra layer of interactivity and visual appeal to the shopping experience.
Shopping products modeled and rendered in Blender
Designing the User Interface:
Using Figma, I crafted the initial wireframes and UI designs, emphasizing simplicity and ease of navigation.
The color palette was chosen to evoke a friendly and welcoming atmosphere, essential for an e-commerce site.
Shopping interface designed in Figma
Development
During the development phase, I focused on applying my new skills in ReactJS, HTML, and CSS.
I aimed to create a site that was as interactive as my current skill level allowed, with a mix of static and dynamic elements.
Some of the features that I added included:
a 3D interactive classroom diorama that displays the items for sale within the scene,
a live shopping calculator that updates the total price as items are added to the cart,
and interactive buttons with hover effects, providing real-time feedback on user interaction.
Next Project -> Abound Web Design