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.

Let's quickly take a look at several different content design challenges and

figure out what kind of design pattern might fix them.

There are many cases where you might have a limited amount of space on screen.

Let's say that you have a product page on a shopping website, and

you want to show multiple product photos.

Rather than creating some kind of photo gallery, you really just want to feature

one photo at a time to leave room for other information on the screen.

We can accomplish this with an image carousel.

I'll create this and then explain it.

So first, I'm going to drag out an image and we'll

increase the size on that just a little bit so it's a nice big featured image.

And then, I'm going type Caret Left and

put that on the left side, and then Caret Right.

And put that on the right side.

So we have these arrows on the left and right side.

And then I'm going to drag out this shape here, because I want a few circles.

So, I want the border to be invisible.

And actually I can do that just by changing the background color.

There we go.

So we have a little circle there.

And actually, instead of creating a new circle, I'm just going to copy and

paste this one.

And on these, I'm going to change that background.

Back to white.

And I'm gonna copy and paste that a couple times.

And there we go.

Now in this UI pattern, one image represented

by this big box with an X is shown at one time.

Usually its images, but it doesn't have to be.

Typically the items cycle from one to the next with a sliding

animation and for that reason this is sometimes called an image slider.

The dots at the bottom indicates how many items there are.

And in this case,

we've highlighted one to show which item is currently being displayed.

The arrows on the left and right are used to manually go from one image to the next.

Now, let's say that next to these images there are feature lists,

tech specs and warranty information you want to display.

Most people will probably only care about the feature list, so

it would take up a lot of space to show everything at once.

Again, we can make good use of the available space and

reduce scrolling by using another pattern called tabs.

So let's create that.

Up in the quick add in the upper right, I'm going to type in Tab bar.

And I will click and drag this out and

it'll make it roughly the same size as the image carousel here.

And I'm then going to double-click on this to change what the tabs say.

And we can separate the tabs with commas.

So let's just delete all this.

And I want to have a tab for features, another for specs,

or the technical specifications, and then a warranty information.

With a tab group like this, a user can click on each tab

to view different panels or cards of information, one at a time.

One tab, like Features, might be visible by default when the page

loads until the user decides to look at another tab, like Specs or Warranty.

Tabs serve a similar function to a carousel.

You have a lot of information to display, but

you might not want to display it all at once.

This could be to reduce scrolling or to clean up the page design.

Or so that you can display text and images at larger sizes,

especially on mobile devices where screen sizes are limited.

Well, both tabs and carousels could contain any type of content.

Tabs are best used for text content, because the user has control over

when that text is displayed and they can read at their own pace.

Carousels that automatically rotate tend to work best for

images, especially when those images belong together.

Such as multiple shoots of the same product or

photos from a single event or location.

After the user sees one of the images in a set, they are able to quickly scan

new images because they don't typically contain lots of new information.

There are many more patterns for displaying content, so I encourage you to

check out the notes associated with this video for more examples.