Gestalt Principles of Perception

A Perspective on the Importance of Gestalt Theory to Graphic Design Series 5/7

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

Welcome to the sequence of articles on the Gestalt Theory lessons in web and graphic design. The previous articles in this series were 1) Basic Design Principles; 2) How Our Minds React To What We See; 3) The Proximity Principle and 4) Similarity Principle in the Gestalt Theory.

Our subject today is another principle in this extremely useful theory to graphic and web designers, Symmetry.

 It goes without saying the power of psychology over visual perceptions. Paul Rand understood that when he said:

Design is a way of life, a point of view. It involves the whole complex of visual communications: talent, creative ability, manual skill, and technical knowledge. Aesthetics and economics, technology and psychology are intrinsically related to the process.

Paul Rand understood the power of these sciences into the potential of communication – the key aim of a designer. The main asset of our profession is our ability to give visual forms to pics and ideas produced in our heads or in our client’s heads. This form-making requires substantial technical and creative skills plus experience and manual work, but above all that, it requires psychology, flexible thinking and continuous self-development.  

When we develop our designs we need to weigh intuition, critical thinking and a good understanding of our viewers’ behaviour. Those principles of visual perception are the backbone of our design education.

silluette of boy towards a green perpective symmetry principle
Photo by Naveen Annam

That is why Gestalt Theory is so good. It is all about those visual principles to assist us to figure out the patterns that help us convey the message resourcefully. The principles of Gestalt Theory we have been studying are a help to our personal development and to the progress of our artistic vision and creativity. We learn how humans see visual data and react to it.

Why Should Designers Understand Their Viewers?

What happens when a person sees our designs? What impact do our designs have on the viewers’ minds? What is their reaction? The answer to these questions is essential to our survival in this profession. Only if we understand how our designs are perceived and interpreted by the viewers we will be able to influence human perception and communicate our message.

symmetry principle used in a window display
Source Pinterest

Gestalt Theory or Gestalt Psychology, a movement that started in Berlin in the 1920s, understands that human minds perceive whole objects instead of separated individual elements. The human mind groups elements to form a whole figure and make sense of this form as a whole. One example would be how our mind perceives the window of a shop. When the person looks at it, that person sees the whole window and not just each element that is part of it. It does not see a dress, plus the mannequin, plus the blouse, plus the radio, plus the stand, etc. It does not split the window is parts. On the contrary, the visual is of everything together and this “everything together” is different than just adding the individual elements that make the window.

Gestalt Theory was introduced to psychology first, but soon after, theorists like Max Wertheimer, Wolfgang Kohler and Kurt Koffka started applying it to visual perception. The main idea was that our mind groups things together to produce a unitary form that can be understood. Gestalt Theory teaches a list of methods (or principles) used by the human mind to decide how objects “go together”. This list of basic principles of visual perception is instrumental for us, designers, as it teaches when, where and how the perception of elements is detected by our human mind and reactions that can be derived from them.

Symmetry Principle

Today, we are going to talk about the Principle of Symmetry. Symmetrical elements are perceived as part of the same group. A great synonym to the symmetry principle would be coherence or the balanced variety in unity. Suitable order, coordination and aesthetic appearance necessary to achieve pleasing effect in our design.

symmetry principle in the Gestalt Theory
Photo by Soonios Pro

In web design, we can use three major types of symmetry: Translational, Reflection and Rotation.

symmetry principle in the Gestalt Theory
Source: vanseodesign.com

Translational Symmetry

One element retains its orientation while repositioning to some other position. It happens when you keep proportional intervals while you are moving the same object a number of times. In translational symmetry, you relocate one element in any direction of the space with a particular interval, without changing its natural orientation. Think of wallpapers, objects of architecture, or the menu elements of a shop, for example.

symmetry principle in Swarovski display

Swarovski display of watches tile graphic keeping proportional intervals and pertaining them dynamics.

Reflection Symmetry

It creates a mirror effect with positive and negative elements arranged in a composition, two halves that mirror each other, either in a vertical, horizontal or diagonal axis. This bilateral symmetry happens when elements revolve around a central axis. Normally, balanced compositions feel right, stable, and aesthetically beautiful. Think of the human face when one part mirrors the other. That is why the perfectly symmetrical face is so attractive.

symmetry principle in the Gestalt Theory
Source: Scielo.br
symmetry principle in the Gestalt Theory

A 2-dimensional slice of a 6-dimensional Calabi-Yau manifold, the object of study in some branches of mirror symmetry. Credit: Andrew J. Hanson, Indiana University (CC BY-SA 3.0)

butterfly

Natural forms like a butterfly have a reflective symmetry.

Photo by Jeshoots

symmetry principle in Apple ad
Apple page with incredible reflection symmetry

Rotational Symmetry

Is the rotation of elements around a common axis, the elements are symmetrical around a central point. Think of the flower petals that are located around one centre. Or, for instance, of flowers, fruits, snowflakes, starfish, jellyfish and other sea anemones, etc

In most websites, this symmetry is created when similar elements are located around one visual centre, to display speed and movement, like the logo example below.

symmetry principle in a logo
Logo produced by Moss51 Art & Design
symmetry principle in flowers

Symmetry in nature with flower petals located around the one centre.

The Importance Of Symmetry

Symmetry conveys order and solidity, the feeling that everything is in its proper place. Symmetry provides clarity. It also provides information on the site, for example, to provide instructions or video lessons. The principle of symmetry should be used to communicate data quickly because our mind and eyes find order and symmetry when perceiving elements.

symmetry in ancient architecture
Source: Pixabay

And What About Asymmetry?

Asymmetry, on the other hand,  is when the look is unbalanced. They reduce the concentration of attention on some elements of design. So, asymmetry should be used with care. The use of asymmetry in your graphic or web sites depends on your needs and on your goals. It depends on what you want to emphasise in the image.

Many times asymmetrical compositions look dynamic and exciting because it suggests a modernistic mood full of movement, energy and strength. But at the same time, it becomes more difficult to achieve as the composition is much more complex. Space will tend to be more active with unpredictable patterns and freedom of expression.  

Both of them, symmetry and asymmetry, produce a good effect or even contrast in a composition with the view to make the objects get more attention.

Examples

The main application of the symmetry principle is on compositional balance, but this is not the only Gestalt principle applied to that. As mentioned before, one principle builds on another. They make a filter, I would suggest, to bring up the perfect communication message of the graphic or web design.  

Probably, symmetrical designs tend to be visually lighter than asymmetrical ones because balanced symmetry transmits information quickly. And it is often repeated in blocks and backgrounds, to produce patterns and pieces of content. While asymmetrical elements with its tendency to look visually more active tend to lure the viewers’ focus.

Example of Symmetrical Balance

Apple symmetry use

Just like many other ads for Apple, beautiful symmetrical balance is shown on this page. Information and master visual concepts equal effective communication.

Example Of Asymmetrical Balance

asymmetry principle
Source: 99designs

Conclusion

But, going back to the wise words of Paul Rand, we should never forget that our main mission is to communicate a message clearly to our viewers. That is why the designer is there.

Graphic design, which evokes the symmetria of Vitruvius, the dynamic symmetry of Hambidge, the asymmetry of Mondrian; which is a good gestalt, generated by intuition or by the computer, by invention or by a system of coordinates, is not good design if it does not communicate.

Understanding symmetry and asymmetry is not difficult. What is really important is to use them effectively in our web or graphic designs. Always think of symmetry and balance together. They are not exactly the same but they lead to the same result. Symmetry is the repetition of parts of an image across a centre. Balance is making the design look equally weighted throughout the composition.

As I have read before, balance is the key to great design while symmetry is the tool to reach the goal.

I suggest to learn how to use symmetry and asymmetry correctly and use them along with the other Gestalt principles we have studied and you will have the key to communicating your message well through your web or graphic design. Make your images amazing.

Next article will deal with another Gestalt Principle. If you need, go back to previous articles to add to the information received. The principles do not have any specific order; they work together but the information you learn for one principle will help you learn others better.

Please leave your comments, suggestions and feedback.

Sources:
https:www.canva.com/learn/gestalt-theory/
Photo by Naveen Annam from Pexels
https://www.templatemonster.com/blog/gestalt-symmetry-law-templatemonster-templates/
Photo by Soonios Pro from Pexels
https://blogs.scientificamerican.com/roots-of-unity/why-mirror-symmetry-is-like-fancy-ramen/
https://vanseodesign.com/web-design/symmetry-asymmetry/
https://www.smashingmagazine.com/2015/06/design-principles-compositional-balance-symmetry-asymmetry/
https://99designs.com.au/blog/tips/balance-symmetry-and-asymmetry/

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