This course will be retired on March 8, 2022. We recommend "UX Design Patterns" for up-to-date content.
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
There's a lot of ways to organize content on a website. Often there's so many images, videos, and blocks of text, it can be a challenge to put it together in a way that doesn't overwhelm the user.
Resources
- UI Patterns - UI Patterns is one of the most comprehensive resources for both UI patterns and behavioral patterns.
Downloads
- Balsamiq Mockups - Balsamiq Mockups is the drawing tool used in these lessons. If you'd like to follow along using the same tool, download and install it. However, any other drawing tool (including pencil and paper) will work fine.
- Project Files - This is the Balsamiq Mockup file that was created during these lessons (as it appears at the end of the course). It's not necessary to download it, it's just here for your review.
There's a lot of ways to
organize content on a website.
0:00
Often there's so many images,
videos and blocks of text,
0:03
it can be a challenge to put it together
in a way that doesn't overwhelm the user.
0:07
Let's quickly take a look at several
different content design challenges and
0:12
figure out what kind of design
pattern might fix them.
0:17
There are many cases where you might have
a limited amount of space on screen.
0:21
Let's say that you have a product
page on a shopping website, and
0:26
you want to show multiple product photos.
0:30
Rather than creating some kind of photo
gallery, you really just want to feature
0:33
one photo at a time to leave room for
other information on the screen.
0:37
We can accomplish this
with an image carousel.
0:42
I'll create this and then explain it.
0:46
So first,
I'm going to drag out an image and we'll
0:48
increase the size on that just a little
bit so it's a nice big featured image.
0:52
And then, I'm going type Caret Left and
0:57
put that on the left side,
and then Caret Right.
1:01
And put that on the right side.
1:06
So we have these arrows on the left and
right side.
1:09
And then I'm going to drag out this shape
here, because I want a few circles.
1:14
So, I want the border to be invisible.
1:21
And actually I can do that just
by changing the background color.
1:26
There we go.
1:31
So we have a little circle there.
1:35
And actually, instead of creating a new
circle, I'm just going to copy and
1:38
paste this one.
1:42
And on these,
I'm going to change that background.
1:47
Back to white.
1:54
And I'm gonna copy and
paste that a couple times.
1:55
And there we go.
2:02
Now in this UI pattern,
one image represented
2:05
by this big box with an X
is shown at one time.
2:10
Usually its images, but
it doesn't have to be.
2:15
Typically the items cycle from
one to the next with a sliding
2:19
animation and for that reason this
is sometimes called an image slider.
2:25
The dots at the bottom indicates
how many items there are.
2:31
And in this case,
2:35
we've highlighted one to show which
item is currently being displayed.
2:37
The arrows on the left and right are used
to manually go from one image to the next.
2:42
Now, let's say that next to these
images there are feature lists,
2:49
tech specs and
warranty information you want to display.
2:55
Most people will probably only
care about the feature list, so
2:58
it would take up a lot of space
to show everything at once.
3:03
Again, we can make good use
of the available space and
3:06
reduce scrolling by using
another pattern called tabs.
3:10
So let's create that.
3:14
Up in the quick add in the upper right,
I'm going to type in Tab bar.
3:16
And I will click and drag this out and
3:24
it'll make it roughly the same
size as the image carousel here.
3:26
And I'm then going to double-click
on this to change what the tabs say.
3:32
And we can separate the tabs with commas.
3:37
So let's just delete all this.
3:41
And I want to have a tab for
features, another for specs,
3:44
or the technical specifications,
and then a warranty information.
3:50
With a tab group like this,
a user can click on each tab
3:57
to view different panels or
cards of information, one at a time.
4:02
One tab, like Features,
might be visible by default when the page
4:07
loads until the user decides to look
at another tab, like Specs or Warranty.
4:12
Tabs serve a similar
function to a carousel.
4:18
You have a lot of information to display,
but
4:22
you might not want to
display it all at once.
4:25
This could be to reduce scrolling or
to clean up the page design.
4:28
Or so that you can display text and
images at larger sizes,
4:33
especially on mobile devices
where screen sizes are limited.
4:37
Well, both tabs and carousels
could contain any type of content.
4:42
Tabs are best used for text content,
because the user has control over
4:46
when that text is displayed and
they can read at their own pace.
4:51
Carousels that automatically
rotate tend to work best for
4:56
images, especially when those
images belong together.
5:00
Such as multiple shoots
of the same product or
5:04
photos from a single event or location.
5:06
After the user sees one of the images
in a set, they are able to quickly scan
5:10
new images because they don't typically
contain lots of new information.
5:15
There are many more patterns for
displaying content, so I encourage you to
5:21
check out the notes associated
with this video for more examples.
5:26
You need to sign up for Treehouse in order to download course files.
Sign up