Content Patterns

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