Content Patterns5:30 with Nick Pettit
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.
- UI Patterns - UI Patterns is one of the most comprehensive resources for both UI patterns and behavioral patterns.
- 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