As mentioned, a great way to learn how to spot patterns is to break down existing sites. Let's look at Disney's website (http://disney.com/) together and see what patterns make up the site:

First, let's look for elements that are repeated and used throughout the website. An easily spotted repeating pattern on most websites is the navigation. The preceding images show Disney.com's navigation closed in the top row and open in the bottom. By looking at the home page like this, we can observe the global pattern for the navigation. Here, we can see that on larger screens, the main navigation (Games, Video, Blogs, and so on) is on the page while the rest is hidden in a drop-down menu. On smaller screens all the navigation links are put in an off canvas menu that slides in and out with clicking on the icon (known as the "hamburger" icon). This responsive pattern is referred to as an off canvas navigation. Navigation patterns such as this will be covered in greater depth in Chapter 2, The Main Stage – Building Responsive Layouts.

Digging through Disney's site, we can find modules being repeated on different pages. Look at http://video.disney.com/movies or see the following image:

This page repeats modules used on the home page. The video gallery modules, as seen under See Tomorrow Today on the video page, are repeated again and again throughout the site. This module can be considered a video gallery pattern. And since this pattern's style changes depending on the browser's width, it is a responsive pattern.

If you want to break down this pattern even more, we can see that the video galleries are comprised of thumbnail images. These thumbnails can be considered their own pattern. They always have a 16:9 aspect ratio, with the video duration in the bottom right corner.

Now we are getting pretty detailed. Depending on the project or client, this level of detail may be required when creating patterns. If you find this happening, you might be interested in atomic design. Atomic design is a concept popularized by web developer Brad Frost and implemented in a project called Pattern Lab. It is a great example of how far you can break down a website. On his website, http://patternlab.io/, Frost breaks down patterns into the following categories:

If we apply this concept here, the home page will be a "page" and its structure will be a "template". To break this down further, let's look at a section, like the video gallery, on the page.

Looking at the video thumbnail, the captions, the video gallery, and the overall page, we can figure out what elements are atoms, molecules, and organisms.