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.
“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”
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 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.
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.
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.
Things that are seen as similar in shape are perceived as being together.
Things that are seen as similar in size are perceived as being together.
Things that are seen as similar in colour are perceived as being together.
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.
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.
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.
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.
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.
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.
feature image, Source: Photo by byMALENS from Pexels
Kosslyn, S. M. (1994), “Elements of Graph Design”, W. H. Freeman and Company, USA
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!