In this article, we examine how basic design principles and Gestalt Laws can be applied to graphic and web design to create visually unified elements.

Gestalt Principles of Perception

A Perspective on the importance of gestalt Theory to Graphic Design Series 1/7

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

There are basic principles that must be respected as central factors when creating visual displays.  These principles refer to the organisation of the image itself and also to the target audience, composed of individual human beings with particular perceptual and cognitive concepts which reveal their strengths and their weaknesses.

As an example, when an individual is exposed to your logo, his or her eyes and mind, in close partnership, have the ability to select elements of that logo and scribe them a specific meaning which will influence the way that individual will react and behave to the logo. A person will be looking at the logo, but the reactions to the logo will differ from person to person.


woman looking to the right in perceptive design

“For example, if you have a face on the right side of the slide looking off to the right, the viewers will have a tendency to do the same—and thus be looking off-screen, rather than where you want them to focus.” 
― Stephen M. Kosslyn

Photo by Deep6 photography


Therefore, there are technical principles a designer needs to follow, and there are psychological elements that must be present to attract and please the selected, specific target audience the visual graphic was created for. Several scientific discoveries have researched how the brain mechanisms under memory, environment and vision work and their relation to the target audience’s behaviour.

Communication Is Our Goal

The American Psychologist and neuroscientist Stephen Kosslyn in his excellent book “Elements of Graph Design”, brings to our attention that our mind is not a camera. Simple but an essential fact. There are psychological aspects that show that our mind is not a camera as our mind, actually, interprets visual elements by grouping them. It means that we make units of the objects that are before us according to our own principles of perceptual organization.  

Professor Kosslyn explains that our visual system does not function like a camera which record and register what they are pointed at in a veridical manner. Our mind dynamically organises and interprets what we see. The interpretation is a consequence of the ways our eyes and brain work. This phenomenon is crucial to graphic designers who want to communicate with their customers. Our customers are not passive receptors; their visual system uses their “input channels” (Kosslyn, 1994) to register different levels of details.

Make Your Graphic Design Meaningful, Not Pervasive

When we create a logo, for instance, if we use the same pattern to call attention to the general outline of the logo and to its fine-details, we might stop the viewer from noticing the details or obstructing the meaning we are trying to convey. This will make the viewer work hard to distinguish the meaning of the logo. Will our logo be worth a thousand words if the viewer cannot decipher it?  

If you ignore the main principles of perception and memory, your graphic design will not communicate properly to the viewer. If you respect them, your symbols, images and text will form a visual representation and communicate at a glance the ideas and messages you want to transmit.

Professional graphic designers should not be seduced to low-cost do-it-yourself business for their sources. They should design elements to communicate effectively, consider the principles of human vision, cognition and behaviour, develop their eyes for what works effectively, and avoid what detracts from their message.

Basic Design Principles

Graphic designers work with visuals and graphic principles to help their design do their job: communicate effectively. Stephen Bradley has an excellent article in the Smashing Magazine on the Gestalt psychologist, proponents of the “Law of Simplicity” (Prägnanz) that is a must-be-read to graphic designers. The Gestalt psychologists grouped the study of visual perception to distinct principles, or laws, to explain how our mind reacts to external stimuli. We perceive the whole before we see the individual parts of an object as our minds fill the gaps.


This theory has a great influence into the main objective of web and graphic designs to create visual forms that communicate ideas and messages to the target audience.


Why Gestalt Is Essential

Gestalt signifies “unified pattern or configuration”, and emphasizes that humans perceive entire patterns or configurations before they perceive individual fragments.

“The whole is other than the sum of the parts”
(Kurt Koffka)

Gestalt principles are related to visual perception and what is being communicated visually by the object. You will see that there are some common ideas that go through and interrelate several of the principles as the human brain works in a holistic approach to interpret images to perceive their message.

When we design images to the target audience, we need to select what is the most important part of the message we want to communicate. Make it as clear as possible and focus on the essential of the message without distracting the viewer with irrelevant distractions.

We human beings prefer things that are simple, clear, ordered. This is the Law of Gestalt or the Law of Simplicity. The image below shows one shape in two distinct options. The one on the left is black and the one on the right shows the three figures that form the shape. You will see the three distinct figures on the right as a simpler shape than seeing the complex and ambiguous figure of the whole forms in black.

proximity and simplicity principles in Gestalt Theory
Source: Smashing Magazine, 2014

Proximity Or Near Principle 

Proximity is a strong principle that uses the space to organise objects by their connection to other objects, or, in other words, how the objects form a group. If we perceive a variety of objects near to each other they are seen as being together.  

proximitu principle in Gestalt Theory
Source: Smashing Magazine, 2014

The lines connect two pairs of elements leading us to perceive that those visually connected elements relate to each other more than the other elements in the design.

Similarity Principle

If we group objects together with shared characteristics of shapes, colour, size or other effects, our mind will perceive those objects as having a similar function.

 This can be very useful as it helps us understand information faster and efficiently in Site Navigation, as an example, where we group links and categories styled in the same way to make navigation easier for the visitor.

Firefox Browser similarity principle in Gestalt Theory
Things seen together bring understanding to a procedure
Source: Mozilla

Shape

Things that are seen as similar in shape are perceived as being together.

Size

Things that are seen as similar in size are perceived as being together.

Colour

Things that are seen as similar in colour are perceived as being together.

closure principle in Gestaslt Theory deconstruction statue of liberty
Source: Creative Blog, 2018

Closure Principle

It is the tendency our minds have to see a whole complete figure or shape even when some parts of it are missing. Closure (or Reification – our minds fill in the gaps) makes use of the combination of space between the elements using our tendency to find patterns, linking the shapes with information from our mind to complete the whole form. It gives us simplicity. One figure instead of many random shapes.

examples of closure in Gestalt Theory

On the left, closure causes us to see a white triangle instead of the image of three black Pac-Men shapes (Dr Russ Dewey) . On the right, Closure causes us to see the complete figure of the panda as it interrelates the shapes and space.

I believe a beautiful example of closure is Paul Rand’s IBM logo. You read the letter I, B and M clearly, but it appears that the figure has another element that completes the design. The letters that you see, are not actual letters, but blue horizontal lines arranged in a way to create the perception of letters. 

IBM logo in closure principle in Gestalt Theory
Closure Principle: Design by Paul Rand

Symmetry Principle

Our mind perceives objects as being balanced and connected to a centre point. It can be symmetrical when the weights of the elements are distributed evenly on either side of the figure or asymmetrical when the flow of the design is in contrast (dark areas balanced by light areas, for instance).

This principle helps us to create a sharp, neat appearance when we use elements that consistently connect to each other. It brings simplicity cleaning the design of chaotic random elements.

simetry example in Gestalt Theory
Simmetry: a sense of order and balance. Source: Creative Blog, 2018

Line Or Linearity Or Continuation Principle

Objects that are arranged on a line or in a curve are perceived as more related than objects that are not. Things that are seen to form a line or a path, are seen as being together in a continuous direction.

In this example, we follow the dots and move in that direction as if following a river and we fail to see four lines that meet at the centre.

continuation principle in Gestalt Theory
Source: Smashing Magazine, 2014

Figure And Ground Principle

Our eyes and mind tend to see objects and separate them from the background. The most classical example is the candlestick illustration or two faces staring at each other. Our eyes want to see a whole figure and the background as two different levels of focus.

The better we lead the target audience to focus on what we want them to focus depends on how we handle the stability of the relationship between both levels.

figure-ground principle in Gestalt Theory
Source: Creative Blog, 2018

Synchronicity Principle Or Common Destiny

If elements are seen as moving in the same direction, they are perceived as being more connected than elements that are static or not moving or changing.  They do not need to be moving, but through their connection, they are seen as moving or having a common destination.

What To Learn From Gestalt Principles

These principles, drawn by the Gestalt psychologists, should be learned by graphic and web designers and applied to their design and content as they help the perception of figures and how people distinguish visual aspects and their patterns. A designer needs to understand not only how the Gestalt principles work but understand how those principles influence the manner people visually perceive figures. The objective is to make the design coherent and connected to the message being communicated to the audience.

This study of cognitive modes (thinking styles) is extremely interesting. And practical to our work as designers. I plan to continue writing about Gestalt principles as they are a critical foundation to those starting their career as designers and also an important revision for experienced designers.

We all should continue learning how the Gestalt theory influences graphic and web design. Check the principles in your own design and study cases to see how they can be applied to balance the composition and combine focal points to create visual hierarchy.

Sources:
feature image, Source: Photo by byMALENS from Pexels
Kosslyn, S. M. (1994), “Elements of Graph Design”, W. H. Freeman and Company, USA
https://theblog.adobe.com/8-basic-design-principles-to-help-you-create-better-graphics
https://webstyleguide.com/wsg3/7-page-design/4-visual-design-principles.html
http://pages.ucsd.edu/~jalevin//gp
https://www.webfx.com/blog/web-design/gestalt-principles-applied-in-design
https://www.psywww.com/intropsych/ch04-senses/gestalt-psychology.html#thewhole
https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt
https://en.wikipedia.org/wiki/Kurt_Koffka
https://www.creativebloq.com/graphic-design/gestalt-theory-10134960
https://www.templatemonster.com/blog/gestalt-continuity-law-templatemonster-templates
https://www.worldofbooks.com/en-au/books/stephen-m-kosslyn-minerva-scho/image-and-brain/GOR003758437?gclid=Cj0KCQiAjfvwBRCkARIsAIqSWlMNJnwrgj0w4eYgzp_OnlUe0qm-lg69ouck6nqCX0IhSsyysk4AF10aAvWJEALw_wcB
https://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.html
https://www.andyrutledge.com/gestalt-principles-2-similarity.html
https://www.minerva.kgi.edu/faculty/arts-and-sciences/

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