Week 1 Day 2: Display Product Name, Price, and Image

#ui #weeklyui #react

Welcome to Week 1, Day 2 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 two, our goal is to…

Display product name, price, and image

Now that we have our design ready to go, it is time to start implementing some features. A good starting point for any kind of ecommerce component is to display the bare essentials of what customers need to know to purchase a product: the name of the product, the price, and perhaps a photo or graphic relating to the product.

I am basing my component around a photograph of a hat I found on Unsplash; it was a great shot, FREE, (and permissively licensed) so I decided to use it for my product. The Thinsulate Winter cap is the perfect low-price beanie/toboggan/[insert regional winter knitted hat name here] for you, and now my job is to get it listed on an ecommerce platform so folks can actually buy the piece.

Following the original design I created, this is what I've got for Day 2:

I went with a classic "card" style design for the container element, giving ample whitespace padding around the inner contents; it's got a subtle 2px border-radius to soften the edges, but not enough to make it seem "kiddy" or malformed. If you look closely, you will see I added the same radius to the product image, so as to make the two elements look unified.

I decided to use a base font-size of 20px, which is a recommended font size for body copy for readability and visual impact. (read that article, it's got some other great points) For my font-family, I am using Droid Sans for the preferred typeface, with Roboto and the system sans-serif typefaces as fallbacks.

Both the product title and subtitle use semantic heading tags: h4 and h5 respectively; this is good for SEO and a11y ratings, but may not be necessary, as properly contrasted font sizes and weights could do the trick. The title and price elements are slightly bigger than the base size to convey importance, and they also leverage a higher font-weight for the same reason, and to aid in readability whilst scanning.

You can check out my coded implementation on my Github pages site for this project.

Now it's your turn

I used React.js and Storybook to develop my implementation, but you can use whatever technology stack you would like! (hint: if you use Vue.js or Angular.js, you can still use Storybook for those libraries)

You don't even have to use a view library if you don't want to; HTML and CSS-only (and non-view JavaScript library) components are more than possible, especially for this step.

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 coding! 🎉