Principle Of Similarity In The Gestalt Theory

Learn how the Gestalt Perspective on Similarity may assist graphic and web designers in creating pictures that have an impact on viewers. The Laws of Perception, which are based on Gestalt theory, help us enhance screen design so that the presentation is clearer and more useful in the learning process.
twins riding a trike

Gestalt Principles of Perception

A Perspective on the importance of Gestalt Theory to Graphic design series 4/7

“The whole is other than the sum of the parts”

Welcome to our sequence of posts on the Gestalt Theory in web and graphic design. You can be directed to the previous posts on the last articles in this series: 1) Basic Design Principles, 2) How Our Minds React To What We See and 3) The Proximity Principle.

Today we will examine the Similarity Principle in the Gestalt Theory. Understanding the use of those principles is essential for all graphic designers because they help us organise the space where we create our images and clear the way for the visitors to read, understand and be impacted by our message. The Principle of Similarity helps us to create visually unified elements in graphic design.

It is essential to affirm that all the principles of the Gestalt Theory work together. You do not use one principle to eliminate the others. They sort of complement one another. This does not mean that they all need to be present in your drawing. But some principles should be there, or better saying, all the necessary principles should be there, to transform the piece of images you create into perfect communication tools.

For example, the principle of Similarity and the principle of Proximity, which we talked about in the last post, could be perfect guidance for designing form fields, checkboxes, or buttons in web design. When our eyes see those images on the website, the Proximity of the shapes or objects will make us understand that those objects or shapes are part of one group, and the Similarity of the repeated patterns will reinforce their meaning and transmit their message to the visitors.

moss51 footer using Similarity Principle

The (old) footer on my website moss51.com shows the principle of Similarity and Proximity together working to easily direct the visitor to find what they are looking for without having to break their brains into pieces. The Post List has similar-sized pictures with related titles and publication dates written similarly. The other items follow the same method using the intuitive ways the visitors would naturally apply.  

“Items that are similar tend to be grouped together.”

Computer Vision

Software developers use similarality principles all the time with the intention to organise a type of computer vision for the visitors where they will have the ability to see everything, and all directions are clearly marked on each page.

We can always find examples of Similarity in our day-to-day life. When we go to the supermarket, we see rows and shelves with products for sale. They are categorised in the store layout with product placement and other practical and psychological tactics to offer a holistic understanding of the shopper’s experience. The clear generalisation of separate items influences the customers and become a call to action to the customers’ needs or wants.

The way we organise our websites follow the same method. The layout of separate items helps the visitors to find a clear, holistic structure of the page in a user-friendly approach in the interfaces, advertising, and all other web pages.

The Connection Between Spaces And Cognitive Perception

Our minds are hardwired to transform a complex of dots and individual pieces into something more straightforward like “one whole thing” that has patterns recognised by our minds and has meaning.

How Similarity Works

Similarity principle drawing

Items that are similar tend to be grouped together.

According to Gestalt psychology, our minds are inclined to perceive similar-looking objects as part of one single whole. The object forms, or colours, outlines and sizes make a visually similar object and is categorised accordingly.

The psychology and the usability of our encrypted visual messages need to be correct for the viewers to receive and decode information.

As mentioned before, the principle of Similarity affects other principles. This example shows how Similarity is interconnected with another principle we haven’t talked about yet, the Continuity Principle. You see the triangles and squares as belonging to their separate form, and you also see a continuity of line for the triangles and for the squares when, in fact, the object is made of four individual lines that meet in the centre.

similarity principle in Gestalt Theory

The Gestalt Theory affirms that, given a choice, our brain will select the simplest and the most stable shape and will concentrate on it.

A Vital Lesson For Graphic Designers

So, if you want your viewers to see something in your design, you need to identify it first. It needs to be the first thing the viewers will notice when their eyes see your design.

A designer needs to manipulate the viewers’ eyes (and minds) to focus their attention on details that transmit the message.

In a web store design, you group your items together, use appropriate style, enhance the visual communication, and achieve the viewers’ attention.

Polaroid page using Similarity Principle

The repeating pattern that Polaroid uses on its website. You quickly see the products and description and feel happy because you can understand the message and make choices according to your will. Similarity and Proximity help you scan data quickly and effortlessly.

The Power Of Similarity In Design

Similarity can be shown in various aspects, such as position, colour, layout, etc. But adding one dissimilar object to the same composition will draw attention without damaging the global symmetry and attractiveness of the form.

Mayer's page using Similarity Principle

Myer’s web store uses this resource to attract attention to their Fashion Clearance that stands out in the configuration of similar-product category.

Even when the products you are selling are not similar, the similarity perception still can be used by consistent text fields in clearly aligned categories boxes.

Harvey Nornam's page using Similarity Principle

Harvey Norman clearly shows the health, fitness and beauty products they sell, even if the products do not look the same physically, thought the perception of Similarity is conveyed by the consistent text fields they use, and the message is identified due to the genre, layout and theme which are similar in the whole page.

Links

Links permit significant interactions with web pages and applications. They must be distinguished from other elements, and they need to be obvious dependent on the appropriate context. But they also need to be like one another and share a standard function.

In the post you are reading now, the links I use are in light blue. You will be led to click the links if you want to find further details about the text. That is a well-known process followed through the whole post and common to all the blogs published on the internet.

Content

Our pages need to show content relationships for the visitor to navigate a website. Content hierarchies structure the site; they involve the strategic placement of the content to organise the information delivered by the website. Our eyes perceive visual information more than as blocks of data, and the manner we perceive information is affected by features that influence how we rank content hierarchy and directly become engaged with the website content’s message.

moss51 page using Similarity Principle

In my website moss51.com, you can see the Menu uses Proximity and Similarity to show that the names of each category belong to one group. They are related. But under the menu item “Our Work” you can see that the CSS shows a list of pages that also have a relationship. A closer relationship than the one relating to the item names. Therefore, more related than the others. This reinforces the content hierarchy visually explains what connects to what and quickly helps the visitors find what they want.

Organisation

The organisation is necessary not only for content but also for other aspects of the website. It helps us to understand which elements are related to one another and the relationship they form.

similarity principle in Gestalt Theory

We can see in this example, that the elements are arranged into horizontal rows since the colours are the differing feature as the shapes are consistent. The colours used implies the relationship and create the structure of the composition.

A Fundamental To Follow

The aspects I have talked about today, and others in this series seem considerably basic, and they are. They are part of the fundamentals of graphic design and the all-important perspective of how our viewers will see our design or website and the message they will get from them.

Fundamentals are essential to allow you, graphic and web designers, to produce your own conceptual depths in both kinds of design. It opens our minds to the avenue of what we can do.

Our next article will cover another principle of Gestalt Theory. If necessary, go back and re-read the previous posts and use the new material to complement your reading. This is how we learn, and this is my own fundamental, to keep learning and sharing and learning.

Please, leave your comments, suggestions, feedback. I am listening.

  • Editor’s Note: images shown in this article refer to the previous lay out of Moss51.com website which has been replaced.

Sources:
https://www.templatemonster.com/blog/gestalt-similarity-law-templatemonster-templates/
https://www.smashingmagazine.com/2019/04/spaces-web-design-gestalt-principles/
https://www.smashingmagazine.com/2019/04/spaces-web-design-gestalt-principles/
Photo by Cleyder Duque from Pexels

Print and share this article friendly; you are free to use and reproduce it, just please attribute the Moss51 Art & Design as the original author, and link back to this post!

Print Friendly, PDF & Email
Cidinha Moss

Cidinha Moss

Cidinha Moss is the founder of Moss51 Art & Design, an SEO Content Writing and Web design studio. She is a content writer and web builder with a background in languages, education, and entrepreneurship with years of writing, teaching, and providing effective text, images, and web designs to her clients. You can find her on Facebook or LinkedIn.

Leave a Replay

Sign up for our Newsletter

We turn your ideas into words! 
I meet your customers on the web page to deliver your message to them. I combine high-quality written material with search terms to create holistic content that is appealing to both your readers and Google.

This website uses cookies to ensure you get the best experience on our website.

%d bloggers like this: