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.

I believe 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, that we talked about in the last post, could be perfect guidance for designing form fields, check-boxes or buttons in web design. When our eyes see those images in the web site, 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 usinf Similarity Principle

The 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 similarity 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 clearly marked in 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 influence 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

The principle of Similarity

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.

the porinciple of similarity 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 helping you scan data quickly and effortlessly.

The Power Of Similarity In Design

Similarity can be shown in different 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 using Similarity Principle

Harvey Norman shows clearly 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 similar to 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 relationship 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 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 and visually explains what connects to what and quickly helps the visitors find what they want.

Organisation

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

similarity principle example 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 like very 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 mind 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.

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

Comments are closed.