Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Prototyping in the Browser

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Solutions to Common Design Problems

3:28 with Nick Pettit

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.

Below are some great design pattern libraries for you to take inspiration from for your own projects!

Design Pattern Collections

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up