Principles of Design: the application of contrast and similarity
By: Charchit Garg
Tags: Contrast, UI, Visual Design, Design, UX

As we can see that the homepage banner gets our attention first because of the Application of Contrast by using the primitive features of full width-size, bright-color primarily. Secondly, the section of ‘popular destinations’ below the homepage banner shows the Application of Similarity by again using the primitive features of the same-size circle, same font-size, same-saturation of their background color, same-balanced adjustments of the products inside it, the same distance between circles — these all features shows these circles are all part of one group and likely to be doing the same thing like go to some other page when clicked. And this is the power of the primitive features of elements in a composition.

THERE’S ONE MORE — COMPARISON IN DESIGN

But there is still one other thing left which is equally responsible for the proper working of Application of Contrast and Similarity and that is — Comparison. Most of the time, an element feature needs to be compared to same features of other elements around it in order to work. Like in the yellow background color of banner in image above gets attention first because it contrasts with the white background color of the UI if the white color of the UI was also yellow or some light shade of yellow there’d be no good contrast as it is now.

It’s through comparisons like these we actually show the Application of Contrast or Similarity.

CONTRAST — A FOR APPLE, B FOR BALL, SEE THE CONTRAST?

Poster Design | Source: pinterest.com

In the above poster, Quote Marks & Square with a human face in it gets the utmost and first attention in this layout because of the use of proper black and white color contrast, the designer has used the white for the background and black for the element. And secondly, because of the space around the black elements in the center as the remaining common information is either placed on top right or bottom right.

From the above poster, we can answer three questions related to contrast in design, which are as follows:-

1) What Is Contrast In The Context Of Visual Design?

Contrast in the context of visual design can be defined as a difference between two or more elements in a composition. The more the difference between the elements, the greater they are easy to compare and comprehend and that’s when they are said to have contrasted with each other.

2) Why You Should Apply Contrast In Design?

I was thinking to follow the reverse model of Why, How, What of Simon Sinek but I guess What is much more important here and then Why.

So, the answer lies in the science of our human mind and eyes, specifically visual processing. It’s always interesting to see when science and design come together, isn’t it?.

Yup, she’s seeing you, make sure you can be seen clearly by understanding the application of contrast in design and real-life 😛 — Back to study :/ | Source: unsplash.com

Pre-attentive processing is the unconscious accumulation of information from the composition (or anything in general like poster, tangible product, when you see something) that occurs in our early vision. In simpler and visual words, it’s reading a poster unknowingly at a first glance. In this processing, our eye movement is not determined by the tradition of reading from the top left to right bottom or start to end but is driven by primitive features of the element, the element which stands out the most is seen first and that’s the element with high contrast. And that’s when we begin the process of communicating the composition with our viewers before they’re even consciously paying attention and coming in a stage of attentive processing.

Color is one the major primitive feature of an element which can be used to apply contrast among element. See this to know why.

In this pre-attentive processing, viewers are more likely to take a decision whether they want to stay and begin with attentive processing (see the whole composition attentively), and as we know every composition fights to grab the attention of the viewer, we need to take control of the element which the viewer is going to see in this pre-attentive processing. We need to decide first on how to grab the attention of the viewer anyhow so they can take the decision of switching to their attentive processing and scans the whole composition attentively. And as eye movement is determined by the primitive features of the element we need to apply such features on those elements (that we want the viewer to scan in pre-attentive processing) that grabs the attention and entices the viewer to stay and read more.

And by doing this we also take the cognitive load of the viewer of whether they want to continue to look at the composition or not, because of this high contrast visibility in pre-attentive processing they can take the decision faster and move on. They don’t have to scan the whole composition just to realize that they didn’t want to look at that. That comes from the understanding of why we need contrast in the design, now let’s understand how to apply it.

3) How To Apply Contrast In Your Design?

The Application of Contrast can be done by answering one of the critical questions and that is — What is this first thing which you want the viewer to look at in the design or specific area of the design?. And here that thing isn’t supposed to be logical, it’s supposed to be first of all the thing which attract the attention of the viewer and that can be anything like the quote marks above in the poster — though they are there because the poster is about literature but you know this when you read the information of the poster not when you see the poster at the first glance.

Now when you have decided that element which you want the viewer to see first, all you have to do is use the primitive features of the elements discussed above to make it stand out. In the poster above, the designer has used features like color, space, and scale.

1) The Color of the background and the element has established a perfect figure-ground relationship between background and element.

2) The White Space between center black elements and top and bottom text has created a sense of understanding to the viewer that the center element is much more important to look at than the others.

3) The Size of the center elements seem and are exceptionally large and that’s why they are the center point of attraction.

The viewer eyes will now in this hierarchal order — 1) Centre black elements, 2) Top Right Text and 3) Bottom Right Text.

CONTRAST AND PRINCIPLES OF GESTALT

Many gestalt principles talk about showing contrast in a direct or indirect way, From which, let’s just discuss two of them:-

Figure-Ground — What did I just step my foot on? Yuck!!

In designing any type of composition, we need to decide what’s the figure and what’s the ground. This relationship helps to set the context for everything else in composition. We need to make sure that figure and ground contrast with each other in a proper way so that the viewer will have no problem in determining which is which. Learn more about the same — here.

2) Focal Point — What is your area of interest other than the dominant element?

Focal points are specific areas of interest, emphasis or difference within a composition that captures and holds the viewer’s attention. Like the face in the above poster which is one of an area of interest. Focal points are designed to look different from their surroundings, and contrast helps them to look different and get attention. We’ll be discussing the same in upcoming articles.

SIMILARITY — A FOR APPLE, B FOR BANANA, SEE THE SIMILARITY?

Poster Design | Source: pinterest.com

Back to this poster again (Damn, I’m starting to love this poster), as we have covered the center section of the poster, let’s have a look at the top right section. The section where we can see the Application of Similarity in Design because of the similar primitive features used among the text elements — color, same variance in color, same typeface, same font size, same font-weight, same alignment, justification, same letter spacing, similar line length and same kerning and due to these all sameness we think of these text elements are part of one group. Being able to recognize similarity is why human beings are excellent at finding patterns

And again from the above poster, we can answer three questions related to similarity in design, which are as follows:-

1) What Is Similarity In The Context Of Visual Design?

Similarity in the context of visual design can be defined as a similarity between two or more elements in a composition. The more the sameness between the elements, the greater the probability of them being appearing as part of one group. The Similarity is also one of the gestalt principles of perceptual organization.

2) Why You Should Apply Similarity In Your Design?

The answer of this too lies in the science of our human mind and eyes, specifically visual processing.

Attentive processing is when a viewer starts to look at a composition consciously and start becoming aware of the elements present in. Composition. During this processing, the rate of cognitive load starts to rise up according to the information present in the composition. Here, similarity complements our natural tendency to processing information.

Too much variance in features among elements in a composition is a sign of cluttered-ness, noise, and complexity. What if the sub-headings of this article is varied in font size and font color, you’d be confused if the sub-headings are sub-headings or sub-sub-heading or primary headings.

What happens is, to make sense of everything in a composition we naturally group elements in chunks in order to store more information in our working memory and let the cognitive load rate balanced. But if there is no chance of grouping information because of no similarities among elements then the cognitive load may start to rise up in a negative way and can have a negative impact on the viewer overall because we have left them with too much information to gather from which some of them are unnecessary. And if there are no similarities in design then the viewer won’t be able to make sense of it all and be confused about what to store and what not and what with, what is important and not.

So, just to let the viewer group information so he/she can store information and maintain their cognitive load, we need to apply similarity in design. Let’s know how to do it, shall we?

3) How To Apply Similarity In Your Design?

Like the Application of Contrast, The Application of Similarity can be done by answering one of the critical questions and that is — What are those pieces of information that have similar functions like (address, contact info or set of links which have the function of getting licked or list of items in a menu) which you need the viewer to perceive it as one part of the group and understand these elements have a similar function.

Now when you have decided that pieces of information that are supposed to be perceived as part of one group, all you have to do is use the primitive features of the elements discussed above to make them similar. In the above poster to make the text elements of top right section appear as one part of a group, the designer has used the primitive features like same font size, typeface, color variance (black and grey), alignment (left) and that’s why we perceive these text elements as part of one group.

SIMILARITY AND PRINCIPLES OF GESTALT

Though ‘Similarity’ is one of an independent principle in gestaltism. Many gestalt principles talk about showing similarity in a direct or indirect way, From which, let’s just discuss two of them:-

1) Common Region — It’s a school playground, remember?

As the name suggests, to show similarity among the set of elements — just enclose them in any way probably byline or background patch and the enclosed area is now called a common region where these elements lie. By doing we can make these elements appear part of one group.

2) Uniform Connectedness — Mommy, I don’t want to wear school uniform :/

The principle of uniform connectedness works by connecting the set of elements with abstract elements (ornaments) or functional elements (arrow) to make them appear as part of one group because they are now visually connected. Uniform connectedness is one of the strongest principles in gestalt principles of perceptual organization.

RELATIONSHIP BETWEEN SIMILARITY AND CONTRAST

Image | Source: unsplash.com

From the above reading, you must have noticed that I’ve shown 3 unique examples to show the application of contrast and similar in design. But you must have also noticed that I’ve shown the application of these two together in all three designs. Which makes us realize that one is impossible without the other.

Contrast is the lack of Similarity, Similarity is the lack of Contrast.

Contrast and Similarity are really opposite ends of a scale. On one end of the scale, elements look different and on the other hand, elements look similar. Thinking about them together when designing a composition can actually make it more impactful, appealing, attractive, communicable, clear and all of the other adjectives which you just started to make of your own around these.

MORE EXAMPLES — WELL, IT’S YOUR READING TIME

Let’s consider some examples of user interface design in the website to understand how designers have applied the contrast and similarity.