Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Using the website shirts4mike.com as an example, you'll create a product card that will help streamline the UI.
Resources
- Shirts4Mike.com - This is the website used as an example in these videos.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up