June 8, 2016

How to improve your designs with similarity (part one)

The perceptual process is the arrangement of psychological steps that a person uses to understand, interpret and organise information from the world around them.

The steps are: Objects are present in the world. A person observes. The person uses perception to select objects. This process enables us to identify the world through sight, sound, taste, touch and smell.

Our sense of sight processes large amounts of information from the world around us. Our brain receives the information in the form of objects, patterns, and shapes. The brain then turns this visual information into a form we can understand.

The Principles of Grouping (or Gestalt Principles of grouping) are a set of principles in psychology, first proposed by Gestalt psychologists to explain the observations they created about the way humans naturally perceive and organise the vast amount of visual stimuli around us. The Gestalt principles – continuance, similarity, closure, figure-ground, proximity, and common fate – are a popular and often instinctual method used by designers to visually organise or prioritise information.

Understanding how these principles work, and learning how to use them effectively in your designs will produce stronger and more engaging creative work.


The Gestalt Principles of similarity states that objects that are similar are perceived to be closely related rather than objects which are dissimilar. Similarity assists designers to organise objects relatedness by determining their attributes such as colour, size, orientation, and shape.

Using colour to distinguish relationships

Colour most strongly influences similarity. As you can see from the example below, the coloured shapes have the strongest correlation when assigning groups or relationships, even when the objects physical shapes are different.


Colour is the most effective method of distinguishing visual similarities.

Using size to distinguish similarities

Size is another simple tool we can use when ordering similarity. In the example below, you can see the similar size of the shapes, small and large. We order and understand the relationship between these objects through their size. As you can see from the example, the larger object stands out more, giving it a higher priority, even though the physical shapes are the same.


Size increases the importance or priority of the object.

Using shape to distinguish similarities

Shape is particularly useful when grouping objects together, but is a weaker visual stimuli compared colour or size. As you can see from the example below, the difference between the shapes is obvious on close inspection, but if viewed in passing or taking a quick glance, all the objects could appear the same.


It is much easier to see the relationship of the objects when they are grouped together in columns.

Using orientation to distinguish similarities

Like shape, orientation can be used to group objects. In this example, all of the shapes are the same; however some of them have been turned on a 45° angle. These new shapes are perceived as a group of their own. Interestingly, these angles create as sense of movement, as though these objects are moving together, though the objects around them are static. We’ll learn more about this effect, known as common fate, in a later article.


Orientation creates strong relationships between objects.


As mentioned earlier, colour is the most dominant form of similarity. For example, we can negate the relationship of the shapes by adding colour. In the example below, we perceive the groups of coloured rows, rather than the columns of squares and circles.

colour-01-colourovershapeTry and see the columns of squares and circles. Your eyes will automatically try and follow the rows of colour, rather than the similar shaped rows.

Also, colour can override size. In our explanation ‘using size to distinguish relationships’, our example showed how the larger objects formed a group of their own. In this example, we have added colour to two of the squares, which has created another group, negating the influence of the larger objects over the smaller.


The large but white square is now more closely related to the small white squares than its same size but blue counterparts.