[MUSIC]

When you're browsing the Web, often you'll come across design elements that

are similar to many other websites you've seen before.

For example, sliding image carousels,

image galleries in form of a grid, playback and volume controls for

videos and sound, are common design elements found on many websites.

The same design solutions appear over and over again,

because designers face they same types of problems over and over again.

Well, there's no one solution that's perfect for any particular design problem.

It doesn't always make sense to create your own solution

to smaller problems when a perfectly good one already exists.

These small common components are called design patterns because,

while there might be variations in color, shadows, and other ornamental features,

the general idea or pattern remains the same.

In the next videos, we're going to use a few design patterns to enhance

the in-browser prototype a bit more.

But before we do that, let's take a look at some resources you can use

to find design patterns that can be applied to common problems.

You can find the links in the notes associated with this video.

First is uipatterns.com.

This website has lots of useful design patterns, and

in the Design Patterns section at the top, we can see a nice

list of design patterns organized into various problem domains,

like Navigation, dealing with data, and social for instance.

Let's click on one of these, like slide show underneath images.

And here you'll see a summary of a problem

along with several examples that show what solutions look like.

This is an obvious one, but a pattern library like this can be helpful when you

encounter a tough design problem, because there might already be a solution

that you haven't considered Next is Responsive Patterns by Brad Frost.

These design patterns focus specifically on how content can be arranged and

resized at various screen resolutions.

So if we choose one, like Column Drop, and

then resize the browser Here's a demonstration

of what this pattern looks like in practice, where a multi-column layout

becomes a single column because the columns drop down to the bottom.

Finally, let's take a look at PatternTap from Zurg.

Similar to the others, this is another big list of design patterns.

And you can use the various filters and search functionality

to look through them to find a solution for your design problem.

There are many other design pattern resources,

and hundreds of design patterns that can help you design sites.

So be sure to take your time exploring the problem space before coming up

with a quick solution, because there might be a solutions out there already.

In the next few videos we'll use design patterns to improve a prototype.