loading...
Cover image for Week 1 Day 1: Design an Ecommerce Listing

Week 1 Day 1: Design an Ecommerce Listing

geoff profile image Geoff Davis ・2 min read

Welcome to Week 1, Day 1 of my Weekly UI challenge! As I stated in the announcement post, week 1 will focus on an ecommerce listing UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day one, our goal is to…

Design the component

I personally used Sketch to design this week's component, but you can use Sketch, a similar UX/UI design program like Adobe XD, or really any other program (or just paper and pen/pencil!) to design your component.

If you decide you would rather not design your own component, you are more than welcome to follow along using my designs, but I think you'd really get the most of it if you designed your own. (plus I'd love to see what you all come up with!)

Here is what the listing component will look like, including a number of the component's alternative states:

An ecommerce listing component design, with color-coded states for various component states, like "sold out", "added to cart", "remove from cart", etc.

This is what the various states of pieces of the component look like across a row of listings:

A row of ecommerce listing components, with different states visible in respective listing components

Now it is your turn

Hop on those design programs (or get out that pen and paper pad) and design your own ecommerce listing! Below is a calendar of what features I will be implementing on which day, as well as a few resources that may help you.

Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.

Happy designing! 🎉

Week 1 Calendar

  1. Design component 🎯
  2. Display product name, price, and image
  3. Add to cart button, favorite button
  4. Sale price display, sold out states
  5. Color variant thumbnail buttons
  6. 100% a11y score
  7. Tweaks, refactors, fixes

Resources

Posted on by:

geoff profile

Geoff Davis

@geoff

Senior UI Developer @ ALSAC/St. Jude // All opinions, articles, and comments convey my views alone.

Discussion

markdown guide
 
 

Nice challenge. Here is my pseudo-dynamic front [WIP]
Front

 

Done!

Design: Gravit Designer designer.gravit.io (web-app design tool)
Development: React JS + CSS
Deploy: Github Pages

Ecommerce Listing UI

 

Looks great Lucas! Glad to see others are going through and doing these challenges :)

I plan to re-start where I left off in a week or two, so be sure to check out the other #WeeklyUI challenges in the meantime.