<?xml version="1.0" encoding="utf-8"?>
Open full project

I made my first Design System for eCommerce. Started from basic components like buttons, inputs, menus... Then full sections like headers, footers, product details.

E-commerce UI Kit 1

Designed in Figma and converted into HTML/CSS. I spent almost 2 month for design and coding.

Check out here 👉 ecommerce-ui.com

I am still improving this project by applying knowledge gained from uxcel tutorials. Thanks for reading!

Tools used

Figma

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

4 reviews


Awesome work! Your first Design System (E-commerce UI) is well structured, content rich including components, styles, icons and templates. Moreover, it looks easy to be adopted, and scaled speeding up freelancers/teams design process. This sets seem to be especially useful and perfect for MVP design.

Surely, inconsistency e.g. spacings could be improved a bit going forward.


Your UI Kit has some strong points, The good stuff includes the clean layout with a variety of widgets ( like the price filter, color options, and category menu ) which offer good functionality for users.

However, the bad is glaring the contrast between the light purple background and text, The layout feels cluttered with inconsistent spacing between widgets standardize it to 16px gaps for balance.


Great first effort, Vosidiy! Your UI kit shows dedication and a clear understanding of eCommerce needs, especially with the thoughtful variety of components. The clean layout and functional widgets are definite strengths. To polish it further, consider improving contrast for better readability and tightening up spacing to create a more consistent, balanced feel. Keep iterating—you're on the right track!


Great


20 Claps
Average 3.3 by 6 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>