One Solution2:17 with Nick Pettit
How did you do? Were you able to find room for everything?
How did you do? 0:00 Were you able to find room for everything? 0:01 Let me show you what I did. 0:02 So, here is the design that I created in Adobe XD. 0:04 And first I started out with a box containing the shirt 0:08 just like on the website now. 0:13 But I decided to fit in more horizontal elements on the right side, 0:16 like a few lines of text and Add to Cart button. 0:21 This makes the card a little wider than it is tall, 0:25 rather than tall and skinny cards that are on the site now. 0:29 The name of the product is in bold, so it's easier to read, and 0:34 I wrote a short description underneath. 0:38 I used a unique circular shape in the upper right, 0:41 to break up the shape of the box and call attention to the price. 0:46 Then instead of a drop-down menu showing sizes, 0:52 I decided to expand that out into selectable icons, so 0:56 that it's easy to see what services are available at a glance. 1:00 This might seem like a subtle change, and 1:05 maybe even less compact than a drop-down menu. 1:08 But imagine the frustration of finding a shirt you like, and 1:11 then clicking on a drop down menu to select the size and 1:15 check out, only to discover the size you wanted isn't available. 1:19 This way the customer can scan the page without making the extra click, 1:23 unless they're ready to actually make a selection. 1:29 Finally, there's an Add to Cart button. 1:33 If you wanted to take the step further, you could create an additional 1:35 state that shows what this looks like once the item is added to the cart. 1:40 Maybe this whole card animates and flips the card over, or 1:45 maybe confetti comes out of the Add to Cart button. 1:49 You might also consider adding a quantity selection, 1:53 in case they want to buy more than one shirt. 1:57 However, that's also something that could be saved for check out. 2:00 If my design looked really different from yours, don't worry. 2:07 Remember, there's lot of different solutions to this, and 2:10 the important thing is to just keep practicing. 2:13
You need to sign up for Treehouse in order to download course files.Sign up