Principles of Design: the application of contrast and similarity
You know why you are able to read this article right now apart from the availability of your eyes, internet, device, etc.? What is the font color of this text you’re reading? — Black. What is the background color of this page you’re on? — White. Yes, Black and White are one of the prime reasons that you’re able to read this article and it’s the Application of Contrast at work. Keep reading to know more about the same with the Application of Similarity in this article.
Welcome back to the third part of the ‘Principles of Design’ series where we’ll explicitly talk about two prime applications of design — Contrast, And Similarity from which the latter also comes under the principles of gestalitsm.
In designing any type of composition whether it’s UI design, Marketing Collateral or anything in general, we come across two things:-
1) THE PRIMARY ELEMENTS — TITLE OF THE CHAPTER
During information architecture, we decide what is this one or more primary elements (a piece of information, product, feature, copy, event name, illustration) which should come first in the viewer’s eyes when they look at the composition or certain area of the composition. After that we decide the alignment of other design elements around it to support the prominence of these primary elements, this from deciding the primary elements to actually bringing it out in the composition can be done by making the contrast between the elements.
2) THE SECONDARY ELEMENTS — PARAGRAPHS OF THE CHAPTER, IT IS
In the same way, we want some (more than two) elements (block of texts, shapes, sections) to look as if they share sameness in terms of functions, usability, features and be perceived as part of the same group by the viewer. And, we also want some elements to look as if they are different from some other elements and be perceived as part of the different group. This deciding of which elements are to be part of the same group (for ex:- address, contact, phone no) to actually bringing it out in the composition can be done by making the elements share similar characteristics.
In the above image of the book, on the left page you see a block of heading ‘Separation versus intimacy’, whether we want it or not, we after turning on this page from the previous we first see this heading because of the good application of contrast done by the layout designer. The heading just grabs our attention because of its boldness and space around it. And to show the application of similarity in the same image, on the right page you see the block of paragraphs which shows the application of similarity at work — how? Because of the same font size, typeface, color, leading, alignment, line length and constant proximity among a block of paragraphs and that’s why we think that these blocks of paragraphs are part of one group. We just need one extra line of space in just one paragraph to destroy the constant proximity among these blocks of paragraphs and ultimately destroying the application of similarity. We’ll think the paragraph which is after the extra line of space is the beginning of some other section and does not belong to the same previous group.
The Application of Contrast and Similarity can be done by using the primitive features of elements in the composition.
PRIMITIVE FEATURES
The features of an element that are automatically scanned and recognized by the unconscious mind before the interference of the conscious mind are called primitive features of an element. These are the features which one can use to make element dominant in the composition or lose its dominance or make elements look similar. The prime primitive features of an element which are more likely to be played to apply contrast and similarity are:-
- Size
- Shape
- Color
- Texture
- Position or alignment
- Motion
- Saturation
- Space
Ultimately, we realise that these primitive features are responsible for the makeup of an element. — Me B)
Though we’ll be discussing the application of contrast and similarity in detail from the next section, here’s a quick example of the application of these with the use of primitive features on this eBay homepage:-
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?
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?.
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?
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
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.
1) Indian Type Foundry
The center text starting with ‘ITF is a digital type foundry….’ Is one of the primary text which the company wants the viewer to read it first and that’s why they have applied the contrast on it by using the primitive features of font size, white space. We in the first fold see nothing but read this first. The background color is also in contrast with the font color but I think there could a lighter version of grey as it seems a little dull now.
Secondly, the text ‘font’, ‘Indian’ and ‘Latin’ text are underlined which shows the application of similar at work. We now perceive these text as one of the attractions, primary points in the overall copy. The designer wants us to at least remember these three words from the copy, designers do this all the time — if we want you to remember a certain number of things we just make it look similar which makes it easier for you to remember because of pattern finding. And also these three texts are clickable.
2) Perfect Keto
The products placed on the right are the ones that grab our attention at first sight because of the contrast applied to them against other elements like space, high saturated packaging color of the packets. The application of such a contrast with the help of copy on the left helps us to understand that the website sells packaged foods. And secondly, the green button is also the one which gets our attention after the products, so what we see is how the designer is quickly persuading/helping the viewer to understand what the website and what should they do next by excluding the trivialities.
There are two navigation bars in the first slide which I personally think it’s complex but let’s see the application of similarity in both. In the first, the black bar on the right we see four sets of icons sharing similar primitive features like color, font size, icon style, proximity, an alignment which makes us perceive that this set of icons belong to one group and performs a similar function like getting clicked and going to next page.
3) Coursera
You must be able to figure out the first attraction of images and button in web banner here if you’ve read the examples above. Let’s see contrast particular sections like on the top bar, on the extreme right side there are text ‘login’ and a button ‘join for free’. If you notice this area only, you’ll notice that the button is the one with high contrast as compared to the ‘login’ text and the designer wants the viewer to see it first. And I think they did this because they must be getting new visitors more than returning visitors, and new visitors are more likely to sign up first than log in if returning visitors were they could have reversed the situation.
Now, the similarity in not-similar here, after the banner we see a row of organizations logo like Illinois, google, duke though they all have different primitive features they all are still perceived as one part of the group — WHY? Because of their constant invisible proportion of size, they all have similar optical heights and proximity among them. And secondly, the text above this row states that these are all universities and companies which make them appear as one part of the group.
4) Bookmyshow
Particularly in web design/development where things can be controlled after some seconds or by a click of an action, designers/developers need somethings to be done first before than anything because this thing is going to determine the next things for the viewer.
For example, in the above, the website needs to know the location of the user so that they can show the upcoming events/movies in that location only and that’s how the content is decided based upon that metric of location. So, to perform these designers show a popup box in front of the viewer when they enter a site and ask them their question like location (did in the above )and blocks about the remaining content of the site in that time by implementing a transparent grey layer on it which makes the viewer understand that they need to fill the location metric in the popup box to get ahead and see the full content. Designers are only able to do this by application of contrast, in the above website we can see how the location metric box contrasts with the content covered with a transparent grey layer, popup box is acting like figure here and content is acting as a ground.
In the popup box of the above design, the row of icons shows the application of similarity at work in terms of — stroke weight, optical height, font, font size, font weight, font color, icon color, proximity.
5) Ballsystem
There’s a saying — Nothing attracts attention like red color. In this website when you click on the menu — a red circle pops up and this list of menu list appears. This circle get all of the attention in the composition because of its primitive features like red color, big shape. The color contrast with the background black color and the size contrast with all the small shapes/elements lying around — the shape is so big that the eyes unconsciously keep getting attracted to it — thus making the objective of seeing the menu when the menu button clicked, complete. Which makes me realize that this is one of the best application of contrast done here.
Coming to Similarity, the list in the circle has the same font, font size, leading, a color that shows the application of similarity at work. But I think the representation could be better here as after ‘Sustainability’ there is no bar but a new line and which have the possibility of perceiving the next text ‘business units’ as part of the ‘Sustainability’ which is not actual, these both are independent items. There could be either dash like there’s between ‘Company’ and ‘Sustainability’ or something else could be done to make the differentiation. You can only see this distinction when you hover on a certain item — as other items will get translucent and the item primitive feature will remain the same, but only when you hover.
In Visual Design, it’s critically important that we some things to be different and the same. This is one of the building blocks of making a design, deciding what should stand out and whatnot. It’s like deciding which family photo of you should stand out on a wall with other similar photos. You’ll always see the application of contrast and similarity together because neither exists without the other.
The way we apply contrast and similarity creates visual understanding, the hierarchy of information, eye draw and flow, and compositional balance — the topics which we’ll get to know incoming articles in the same series — Principle of Design.
Originally published at https://charchitgarg.com on April 13, 2020.
