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
When you're browsing the web, often you'll come across design elements that are similar to many other websites you've seen before. The same design solutions appear over and over again because designers face the same types of problems over and over again.
Design Pattern Collections
[MUSIC]
0:00
When you're browsing the Web, often
you'll come across design elements that
0:04
are similar to many other
websites you've seen before.
0:09
For example, sliding image carousels,
0:12
image galleries in form of a grid,
playback and volume controls for
0:15
videos and sound, are common design
elements found on many websites.
0:19
The same design solutions appear over and
over again,
0:25
because designers face they same types
of problems over and over again.
0:28
Well, there's no one solution that's
perfect for any particular design problem.
0:33
It doesn't always make sense
to create your own solution
0:38
to smaller problems when a perfectly
good one already exists.
0:42
These small common components
are called design patterns because,
0:47
while there might be variations in color,
shadows, and other ornamental features,
0:52
the general idea or
pattern remains the same.
0:58
In the next videos, we're going to
use a few design patterns to enhance
1:03
the in-browser prototype a bit more.
1:07
But before we do that, let's take
a look at some resources you can use
1:09
to find design patterns that can
be applied to common problems.
1:14
You can find the links in the notes
associated with this video.
1:17
First is uipatterns.com.
1:21
This website has lots of
useful design patterns, and
1:26
in the Design Patterns section at the top,
we can see a nice
1:30
list of design patterns organized
into various problem domains,
1:36
like Navigation, dealing with data,
and social for instance.
1:41
Let's click on one of these,
like slide show underneath images.
1:47
And here you'll see a summary of a problem
1:53
along with several examples that
show what solutions look like.
1:58
This is an obvious one, but a pattern
library like this can be helpful when you
2:04
encounter a tough design problem,
because there might already be a solution
2:09
that you haven't considered Next is
Responsive Patterns by Brad Frost.
2:14
These design patterns focus specifically
on how content can be arranged and
2:21
resized at various screen resolutions.
2:26
So if we choose one, like Column Drop, and
2:29
then resize the browser
Here's a demonstration
2:34
of what this pattern looks like in
practice, where a multi-column layout
2:39
becomes a single column because
the columns drop down to the bottom.
2:44
Finally, let's take a look
at PatternTap from Zurg.
2:51
Similar to the others, this is
another big list of design patterns.
2:56
And you can use the various filters and
search functionality
2:59
to look through them to find
a solution for your design problem.
3:04
There are many other
design pattern resources,
3:08
and hundreds of design patterns
that can help you design sites.
3:10
So be sure to take your time exploring
the problem space before coming up
3:14
with a quick solution, because there
might be a solutions out there already.
3:18
In the next few videos we'll use design
patterns to improve a prototype.
3:22
You need to sign up for Treehouse in order to download course files.
Sign up