Day 1
; 4 | -------------------------------------------------------------------------------- /src/01-ecommerce-listing/day-1/post.md: -------------------------------------------------------------------------------- 1 | --- 2 | cover_image: https://thepracticaldev.s3.amazonaws.com/i/1u140omo4551k97bg0f3.jpg 3 | title: "Week 1 Day 1: Design an Ecommerce Listing" 4 | published: false 5 | description: "Week 1 Day 1 of my Weekly UI challenge: design the component!" 6 | tags: ui,weeklyui,react,design 7 | --- 8 | 9 | Welcome to Week 1, Day 1 of my Weekly UI challenge! As I stated in the 10 | [announcement post](), week 1 will focus on an **ecommerce listing** UI 11 | component; each day throughout this following week, I will pick one or two 12 | (usually related) subelements of the design to implement. For day one, our goal 13 | is to… 14 | 15 | ## Design the component 16 | 17 | I personally used Sketch to design this week's component, but you can use 18 | Sketch, a similar UX/UI design program like Adobe XD, or really any other 19 | program (or just paper and pen/pencil!) to design your component. 20 | 21 | If you decide you would rather not design your own component, you are more than 22 | welcome to follow along using my designs, but I think you'd really get the most 23 | of it if you designed your own. (plus I'd love to see what you all come up 24 | with!) 25 | 26 | Here is what the listing component will look like, including a number of the 27 | component's alternative states: 28 | 29 |  30 | 31 | This is what the various states of pieces of the component look like across a 32 | row of listings: 33 | 34 |  35 | 36 | ## Now it is your turn 37 | 38 | Hop on those design programs (or get out that pen and paper pad) and design your 39 | own **ecommerce listing**! Below is a calendar of what features I will be 40 | implementing on which day, as well as a few resources that may help you. 41 | 42 | Also, please add your repos and/or images of your designs in the comments for 43 | inspiration! I would love to see what designs you all create. 44 | 45 | Happy designing! 🎉 46 | 47 | ### Week 1 Calendar 48 | 49 | 1. Design component 🎯 50 | 2. Display product name, price, and image 51 | 3. Add to cart button, favorite button 52 | 4. Sale price display, sold out states 53 | 5. Color variant thumbnail buttons 54 | 6. 100% a11y score 55 | 7. Tweaks, refactors, fixes 56 | 57 | ### Resources 58 | 59 | * [Best Practices for Cards](https://uxplanet.org/best-practices-for-cards-fa45e3ad94dd) 60 | (since my design, and some ecommerce platforms, utilize the "card" type of 61 | design for listings) 62 | * [Best Practices for Buttons](https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6) 63 | * [7 Rules for Creating Gorgeous UI](https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda) 64 | * [a11y Project](https://a11yproject.com/) (_great_ resources for creating 65 | accessible web sites/apps) 66 | * [Writing CSS with Accessibility in Mind](https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939) 67 | -------------------------------------------------------------------------------- /src/01-ecommerce-listing/day-2/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | const EcommerceListing = styled.article` 5 | border: 1px solid #eee; 6 | border-radius: 2px; 7 | display: inline-block; 8 | font-family: "Droid Sans", "Roboto", sans-serif; 9 | font-size: 20px; 10 | padding: 1em; 11 | max-width: 300px; 12 | `; 13 | 14 | const ListingImage = styled.figure` 15 | margin: 0 auto 1em; 16 | img { 17 | border-radius: 2px; 18 | display: block; 19 | max-width: 100%; 20 | } 21 | `; 22 | 23 | const ListingTitle = styled.h3` 24 | font-size: 1.2em; 25 | margin: 0 auto 0.5em; 26 | `; 27 | 28 | const ListingSubtitle = styled.h4` 29 | font-weight: 400; 30 | margin: 0 auto 1em; 31 | `; 32 | 33 | const ListingPrice = styled.h5` 34 | font-size: 1.2em; 35 | margin: auto; 36 | text-align: right; 37 | `; 38 | 39 | export default props => ( 40 |
51 |
164 |
215 | 94 | {this.state.query} 95 |
96 |: null} 186 | {mappedPastItems.length ? ( 187 |
: null} 186 | {mappedPastItems.length ? ( 187 |
: null} 186 | {mappedPastItems.length ? ( 187 |
503 |
510 | {loadComplete &&