Introducing the Practice2:40 with Nick Pettit
Using the website shirts4mike.com as an example, you'll create a product card that will help streamline the UI.
[MUSIC] 0:00 Hi, I'm Nick. 0:09 In this practice session, 0:10 you're going to get some practice prototyping user experiences. 0:11 I'll present you with a problem, and 0:15 I encourage you to see if you can work it out on your own before moving on. 0:18 Let's take a look at the website, shirtsformike.com. 0:22 You can find a link to this site in the notes associated with this video. 0:27 This is a fictional website where customers can buy t-shirts. 0:31 On the home page, there's a few featured shirts, 0:35 and if we click, the shirt's link in the navigation bar. 0:40 We can see an index view of all the shirts on the site. 0:47 Now, click one of the shirts. 0:51 Here, we can see details of the shirt such as sizing, pricing and a short name. 0:54 In my own opinion, that's not really a lot of information here. 1:01 And instead of creating individual product pages, 1:04 it might be better to turn these into cards that are visible on the index view. 1:08 So let's go back to that. 1:13 So what I want you to do is eliminate the need for 1:15 that single product page view by redesigning just one of 1:19 the items to have the image of the t-shirt along with the short name, 1:24 description, price, size selection and an add to cart button. 1:30 You only need to design one of these, because they'll all look 1:36 the same if they were grouped together on this index page. 1:41 Many design systems refer to this concept as a card. 1:46 The nice thing about thinking of item in terms of codes is 1:50 that you can represent them in different context. 1:55 They might be in an index view like here. 1:59 Or you might use that same card design on the home page. 2:03 You can create your design on paper or use a wireframing tool 2:09 like Adobe XD, Figma, Sketch, or Balsamiq Mockups. 2:14 And don't get too detailed. 2:19 Keep it in the form of a simple wireframe with mostly black and 2:21 white lines and simple shading. 2:26 If you want to include one of the shirt images from the website, 2:28 you're welcome to do so. 2:31 Now see if you can figure it out on your own and then in the next video, 2:33 I'll show you the solution that I came up with. 2:37
You need to sign up for Treehouse in order to download course files.Sign up