Click to close searching.

Principles of Design in Practice: Pattern & Contrast

By Corrie Oberdin   •   21 August, 2014



Principles of Design in Practice: Pattern & Contrast

In Design, Web Design by Corrie Oberdin     Comment Bubble  Leave a Comment      Like

In our Principles of Design overview, we talked about the principles of design and how they contribute to how the Elements of Design are used. In this post, we are going to take a look at two of the principles– Pattern & Contract– and focus on how they contribute to the design of a website.


Principles of Design: Pattern

We see patterns in many places – regular arrangements of repeated shapes, elements or motifs. Patterns exist in nature, but we can also use patterns to create a design. One line on a t-shirt isn’t a pattern, but repeating lines are, transforming your white shirt into a striped shirt.




In website design, patterns can help draw attention to new information or new areas of the site. By using repeated elements, we establish visual patterns so users can recognize new areas. In the Godfather‘s website, below, we have repeating motifs that signal certain types of content – for example, the green flag motif runs through different sections of the website indicating pieces of information customers need to know.




Principles of Design: Contrast

Somewhat similar to pattern, contrast is when different elements of design are juxtaposed with each other in order to draw attention to the different element. For example, a large red box, placed between two smaller green boxes will draw the eye, and tell viewers “Look at the me first!”



In web design, we use contrast to highlight important areas of a website. By contrasting important material in a visually interesting way with elements that aren’t as interesting, we draw attention to the more visually interesting material. Buttons are a great example of this. On the Metropolitan Utilities District website, the main navigation buttons are larger than the secondary navigation buttons, the contrast in scale draws the eye to the more important areas of the navigation. In addition, if you look down the left hand side, there are four brightly colored buttons that direct customers to find information specific to their account, in contrast to the lighter, main navigation buttons, they stand out more.


MUD Omaha


Can you recognize how pattern & contrast are used in websites? What’s your favorite example?

Have something to add?

Your email address will not be published.