Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Part Three Design Principles: Connecting And Separating Elements Through Contrast And Similarity

Similarity and contrast, connection and separation, grouped and ungrouped are all ways to describe the varying sameness and difference between elements. Based on the information they carry, we’ll want some elements to look similar, to indicate that they are related in some way. We’ll also want to show that some elements are different and belong to different groups.

Key to showing both is the visual characteristics of elements and their relationships. If two elements are related in some way, then they should show similar visual characteristics. If the elements are different, then they should look different.

Note: This is the third post in a series on design principles. You’ll find the first two posts here:

Primitive Features Link

How do you show contrast and similarity between elements? The answer lies in the primitive features of the elements.

Primitive features3 are the intrinsic characteristics or attributes that an element might have. For example, what color is the element? How big is it? What shape is it?

primitive-features-opt
These elements have different primitive features — in this case, of shape, color and texture.

Each of these things communicates something about the element. If one heading is bigger than another, then we assume the bigger heading is more important. We might view an element with a shape that’s jagged and sharp as being dangerous.

Sometimes, an element’s attributes need to be compared to the same attributes of another element in order to have meaning. The headings from the previous paragraph are a good example. A heading should only be bigger than another heading or another piece of text. The comparison is necessary for bigger to mean anything. It’s through comparisons like these that we communicate similarity and contrast.

By giving visually similar characteristics to multiple elements, we communicate that something is similar about the elements. If two elements on a web page are both red circles, it’s natural for a viewer to ask why. Why are both red? Why are both circles? The likely conclusion is that the elements are related in some way beyond how they look. The elements’ similarity implies that they carry a similar message.

Likewise, by applying visually different characteristics to multiple elements, we communicate that something is different about the elements and the messages they carry.

Any characteristic of an element4 that can be varied can be used to make elements look the same or different. A few characteristics, however, are most often used to show similarity and contrast. In no particular order, these are:

  • size,
  • shape,
  • color,
  • value,
  • texture,
  • position,
  • orientation.

A rectangle and a circle contrast in shape. Two red items are similar in color. A red rectangle and a red circle contrast in shape and show similarity in color. How you balance the similarity and contrast of elements through their visual characteristics will determine much about what those elements communicate to the viewer.

Note: While primitive features are the primary way to visually show contrast and similarity, we have other ways to show both — for example, the actual content that the elements carry. The words “stop” and “go” contrast. The words “stop” and “cease” are similar. Images contrast with text; long paragraphs contrast with short paragraphs; and so on.

Contrast Link

Human beings are wired to notice difference. It’s a survival mechanism to quickly differentiate a friend from something that wants to eat us. Being able to quickly determine that was vital to returning safely home to the cave at night.

Our ability to quickly notice differences is what makes contrast so powerful. Contrast attracts attention. It draws the eye. It gets noticed. By giving an element characteristics that are visually different from the elements that immediately surround it, we can create points of interest and emphasis. In fact, because the contrast of an element with its surroundings is so good at drawing attention to the element, it’s perhaps the most effective way to add interest and excitement to a design.

Contrast does more than attract attention. It establishes boundaries between elements, too. For example, contrasting the background color of the main content and that of a sidebar is one way to show where one ends and the other begins.

Differences that stand out can provide emphasis5, highlighting important elements and information. The greater the difference, the greater the contrast will be. The greater the contrast, the more important the element will appear.

For example, two ways to set off text are bolding and italicizing. Boldness typically shows more contrast and, thus, stands out more. Spotting bold text at a glance or from a distance is easier than spotting italicized text.

If two elements are meant to be different, go big with the contrast. You don’t want viewers to wonder whether the difference is intentional. Make sure the contrast is obvious and clearly intentional. Leave no room for misunderstanding. Don’t contrast text that’s 16 pixels with text that’s 15 pixels. People won’t notice the difference immediately and, once they do, it will appear to be more of a mistake than a conscious decision.

Be careful not to overdo it. Use contrast sparingly.6 If everything contrasts and tries to draw attention to itself, then nothing will stand out. You’ll end up with visual noise that causes confusion.

Too much contrast can break the harmony and unity in a design, leading to chaos and confusion. This might be what you’re after in a certain design, but more often than not it isn’t. Decide which few elements need to stand out, and make them look very different from everything else.

Contrast and Gestalt Link

While every gestalt principle is about showing similarity and contrast in some way, I want to point out two of them. Contrast is critical to determining the figure-ground relationship and showing dominance and focal points7.

  • Figure-ground
    One of the first things we do when viewing a composition is to determine what’s the figure and what’s the background8. This relationship helps to set context for everything else in the composition. Figure and ground need to contrast with each other or else the viewer will have difficulty determining which is which.
  • Focal points
    These are elements of attraction and interest. They’re designed to look different from their immediate surroundings. The contrast is what helps them stand out and draw attention. The element that stands out the most in the composition is the dominant element. Elements that stand out in a composition but to a lesser degree are focal points.

contrast-and-similarity-opt
Contrast and similarity at work: The green circles and orange bars are similar to other green circles and orange bars, but they contrast with each other.

Similarity Link

The same survival mechanism that enables us to quickly see difference also helps us to see when things are the same. It points us to who or what we can trust and to what might be dangerous. Being able to recognize similarity is why human beings are excellent at finding patterns9. Patterns help us understand the world around us, provide context and make learning quicker, to the point of something becoming intuition or instinct.

When we design two or more elements to look similar, we are indicating that what’s true about one is true about the other. If one of the elements is important, then the other one is likely important, too. If one element is clickable, then other elements that are visually similar will probably be clickable, too. It’s how we can quickly recognize links in a block of text. Visual contrast shows that links are different from the rest of the text, while the visual similarity among links tells us, once we’ve discovered what one does, that all of the links are clickable.

Similarity is about showing connection and showing that multiple items are related in some way. It brings familiarity and consistency to a design.

Similarity complements our natural strategies for processing information10. When we take in our visual surroundings and attempt to make sense of it all, we naturally group objects into chunks in order to hold more information in our working memory. We further group, organize and structure everything before it becomes part of our long-term memory.

Designing similar information to be visually similar helps the user to process and comprehend the information, which are two critical goals of design.

The more that primitive features of elements look the same, the more similar they’ll look and the more viewers will think they’re the same. They’ll appear grouped and related11 in some way, even if just one characteristic is shared; and the more they look the same visually, the more they’ll be perceived as being the same.

We use similarity to build structure12 and pattern. Any similarity between two elements in a composition implies a structure. Additional similarity fills out the structure and leads to pattern, texture and rhythm.

Not all signals that show similarity are equal. In the image below, would you group the objects by shape or color? Do you see a group of circles and one of squares, or do you see one red group and one blue group?

red-blue-circle-square-opt

You probably noticed color first, grouping the elements as red and blue. This suggests that color is a stronger communicator of similarity than shape. This is not absolute, however. For example, someone with red-green color blindness wouldn’t likely notice the difference between red and green objects before noticing the shapes of those objects.

Similarity and Gestalt Link

Again, every gestalt principle13 is about how we perceive the similarity or difference between objects. Many of them can be read as tips to show similarity.

  • closure
    different elements that may be part of a similar whole
  • symmetry and order
    mirrored elements that appear to belong together
  • uniform connectedness
    similarity through visually connecting elements
  • common regions
    similar items enclosed together
  • proximity
    similarity through enclosures in space
  • continuation
    similarity through rhythms in space
  • common fate
    similarity through movement
  • parallelism
    similarity through orientation

The Relationship Between Similarity And Contrast Link

Contrast and similarity show the relationships between elements. Nothing has meaning in isolation.14 An element needs to be shown in context with other elements.

What does one large element cornering a smaller element in a design imply? What does one block of text being indented more than others with light gray suggest?

cornered-circle-opt
A large circle cornering a small circle

Contrast and similarity are really just opposite ends of a scale. On one end of the scale, objects look entirely different; on the other end, they look exactly the same.

Most of the time, we’re somewhere in between the extremes, and the things we design will share some but not all characteristics. Similarity and contrast are expressions of where along the scale objects lie relative to each other.

Even though I haven’t been explicit about it, everything I’ve said about either similarity or contrast applies to the other. Having one is impossible without also having the other. Contrast is a lack of similarity, and similarity is a lack of contrast. It’s all about where it lies on the scale.

Thinking about them together makes them more impactful. You can use a single feature, such as color, to show that several elements are related, and then use a different color to show that several other elements are related but different from the first group. With just two colors, we can create two distinct groups of connected elements.

Color coding15 in this way is an effective way to categorize information so that the viewer can discover and understand at a glance.

When everything is the same, you get tedium. When everything is different, you get noise. The best designs have a healthy mix of similarity and contrast and show a clear understanding of what they’re trying to communicate.

Examples Of Contrast And Similarity Link

Contrast and similarity can be found on every website. Both need to be present. Imagine a website having no contrast. We’d all have a hard time reading text if it and the background were the same color. Just as difficult would be each word or phrase having a different style.

I’ll point out some of the contrast and similarity on the websites below. There’s more of each than what I’ll mention. I want to offer enough examples to get you thinking and then let you take over. Look at and study different designs, and work at truly improving your skill in balancing contrast and similarity.

David Simon Link

One of the first things you’ll notice on David Simon’s website16 is the contrast between background colors, which makes it easy to distinguish one part of the page from another. The logo stands out as a dark object against a light background of space.

david-simon-opt17

The image contrasts with everything to draw the eye. The background of the posts’ dates, the full uppercase used for the meta data for comments, and the background color of the menu item for the current page are also examples of contrast drawing the eye and communicating something meaningful.

Links in the menu are all styled the same, as are the links to recent posts. Both are separated with horizontal lines. Each menu contrasts with the other to signal difference. Fonts are consistent throughout. The headings and body text contrast in typeface, but their difference is consistent across the website.

Links in the body could stand out more to make clear they’re links, although the designer might have deliberately made them less obvious in order not to interrupt the flow of reading. Headings could also have been made to stand out better, although it is pretty clear that they are not a part of the main text.

Mike Kus Link

The home page of Mike Kus’ website18 focuses on different projects that Mike’s worked on. Most of the page is empty, but notice how that makes each element stand out. The text contrasts with the background, as do the paintings against the background wall texture.

Note: Mike has changed his home page since I wrote this. What you see in the screenshot below is the previous version.

mike-kus-homepage-opt19

The paintings also contain the only color variety on the page. All other information is in the same dark gray.

Also, notice how the paintings are framed, indicating that they have something in common. In this case, they represent projects. Note, too, that the background shows similarity through its pattern of bricks. It’s clear what is figure and what is ground.

On Mike’s “About” page, below, the lone image of Mike contrasts with everything else. The blue button to “Get in touch” is the only element with color. You might not contact Mike, but it won’t be because you don’t know how. Buttons across the website have the same blue.

mike-kus-about-opt20

Mike’s name as the logo is repeated as the main heading on the page. The header contrasts with the background, as do the backgrounds of the various sections of the page below. Links in the menu share the same uppercase styling. Social icons at the top are repeated along the bottom.

Fonts are also used consistently, with headings in a sans-serif and body text in a serif, contrasting with each other.

Electric Pulp Link

The logo on Electric Pulp’s website21 is a red circle of moderate size. It contrasts well with everything else that is immediately visible. Notice how the color is repeated in the main navigation to indicate the current page.

electric-pulp-opt22

Headings across the website are big, bold and set in all caps. Headings and body text also contrast consistently across the website, with the former in a sans-serif and the latter in a serif.

Click into the “Notes” section and you’ll see previous and next links with background colors that contrast with the main background. Background color is also used to distinguish different sections of the page.

Most buttons on the website are a contrasting red (a color often used to set off elements) and change to blue on hover. However, on the “Work” page, the first button reverses this (it’s blue and changes to red on hover). Whether this is deliberate or accidental is hard to tell. Nevertheless, the principle of contrast is maintained.

Lowdi Link

One last website to consider is Lowdi’s23. The screenshot below is of the home page. Notice how color is used for both contrast and consistency.

lowdi-home-opt24

Color clearly delineates the start and end of sections. And the repetition of color creates a rhythm throughout the page. Notice how the yellow background of the price stands out, while also drawing the visitor’s eye down to the picture of the product.

Summary Link

Contrast and similarity have different functions. They are used in varying degree and in combination. You’ll always see some of both because neither exists without the other. Changing one means also changing the other.

Showing that some things are the same and some are different is the first step in visual communication25. It’s the primary way that viewers derive meaning.

Contrast and similarity are clues to design elements. Differences draw our attention, and similarity transfers what we know about one element to another.

Ultimately, the goal is to contrast similar layers: making the elements in one group look similar to each other, but different from another like group of elements. The way we structure contrasting and similar elements creates hierarchy, flow and compositional balance, topics we’ll get to later in this series.

(al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-of-gestalt/
  2. 2 https://www.smashingmagazine.com/2014/05/16/design-principles-space-figure-ground-relationship/
  3. 3 http://www.vanseodesign.com/web-design/organize-information-visual-perception/
  4. 4 http://www.scholarpedia.org/article/Visual_search#Factors_that_modulate_search_performance
  5. 5 http://daphne.palomar.edu/design/emphasis.html
  6. 6 http://www.designingforinteraction.com/wroblewski.html
  7. 7 http://www.vanseodesign.com/web-design/dominance/
  8. 8 https://www.smashingmagazine.com/2014/05/16/design-principles-space-figure-ground-relationship/
  9. 9 http://www.scientificamerican.com/article/patternicity-finding-meaningful-patterns/
  10. 10 http://books.google.com/books?id=yUalr7fhZMEC&pg=PA34&lpg=PA34&dq=working+memory+schema+mental+models&source=bl&ots=Nip6RBZGfM&sig=a7rLq7wM-EotwoNReIx6k16U2tE&hl=en&sa=X&ei=-A11U_r3HM2Jqga8iYDwCA&ved=0CHoQ6AEwDQ#v=onepage&q=working%20memory%20schema%20mental%20models&f=false
  11. 11 http://guymanningphotography.wordpress.com/2012/02/05/group/
  12. 12 http://www.andyrutledge.com/gestalt-principles-2-similarity.php
  13. 13 http://www.vanseodesign.com/web-design/gestalt-principles-of-perception/
  14. 14 http://alistapart.com/article/contrastandmeaning
  15. 15 http://www.fastcompany.com/3009605/work-smart/how-color-coded-notes-make-you-a-more-efficient-thinker
  16. 16 http://davidsimon.com/
  17. 17 http://davidsimon.com/
  18. 18 http://mikekus.com/
  19. 19 http://mikekus.com/
  20. 20 http://mikekus.com/
  21. 21 http://electricpulp.com/
  22. 22 http://electricpulp.com/
  23. 23 http://lowdi.com/
  24. 24 http://lowdi.com/
  25. 25 http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Steven Bradley is the author of Design Fundamentals: Elements, Attributes, & Principles and CSS Animations and Transitions for the Modern Web. When not writing books he can be found writing for his blog at Vanseo Design or on his small business forum.

  1. 1

    Thanks for the great article!

    -4
  2. 3

    Nice article, although it’s not just humans that are wired to notice difference – animals in the wild aren’t too keen on being shot, so they probably have a more acute sense of “difference”… Just saying… :-)

    -4
    • 4

      My bad if I implied only humans are wired this way. I only wanted to point out where out ability to notice differences comes from.

      0
    • 5

      …because there are just so many non-human animals designing marketing material and websites these days that it was important to bring that up

      0
  3. 6

    Greetings! Quick question that

    1
  4. 7

    Martin Starosta

    September 23, 2014 9:51 am

    Thank you, Steven.

    Nice article and easy to read.

    -2
  5. 8

    Such a great article. It helps me to have a clearer vision for building my portfolio website.

    1
  6. 10

    One of the first things you should do is categorize tasks that are similar and do them all at once. For instance,make as many phone calls as you can during one block of time. Knowing you have other calls to make to your home based business clients will help you keep your calls shorter. And it also just makes since. You already have the phone in your hand and your phone book, if necessary, handy. Do the same thing with writing letters and taking care of email. Grouping your chores this way will help you make the most of your time.

    0
  7. 11

    This article brings me back to art and design one o’ one. It definitely touches upon the basic principles and concepts of aesthetics. The post is definitely is an art class bundled up into the form of an article entrée and incorporated to digital display in anything that can be associated towards internet presentation, such as a website’s layout or display. It served as a refresher of my high school drawing class when I first read about primitive features. Though any of this would be old news to any professional web designer or developer, it is still much relevant and important to keep in mind when it comes to creating any kinds of new displays. For example; you could not create something adequately without knowing and considering the primitive features of that certain object, that which is the color or size or shape; all programing inputs are dependent on these things. Not only this but also texture, orientation, position, and value (which is how important and relevant this object is towards your display) are also things to consider. What I thought to be the most interesting part of this article however was how Bradley explained how contrast in images affect people in a level of sub-conscience because our brains are wired to notice the difference between things.

    0
    • 12

      Thanks Jorge. I’m glad you liked the article. I think within any discipline there are some fundamental things that will always apply because they relate to who we are and what we respond to as human beings. Understanding the fundamentals of anything will give you a solid foundation on which to build.

      1

↑ Back to top