Editor’s Note: This post was originally published in February 2020 and has been completely revamped and updated for accuracy and comprehensiveness.
This article examines the proximity concept in Gestalt Theory, defining it and describing its applications. According to the law of proximity, objects placed closer together are perceived as a group. It helps designers, especially user interface (UI) designers, organise information so that viewers can comprehend what they see. Learn how this strategy will help your audience draw connections with design images.
Gestalt Principles of Perception
A perspective on the importance of Gestalt Theory to graphic design
"THE WHOLE IS OTHER THAN THE SUM OF THE PARTS"
(Gestalt Psychologist, Kurt Koffka)
The Gestalt Laws (or theory of grouping) is a set of principles to account for how humans naturally perceive objects as organised patterns in an attempt to simplify. We recognise parts of objects and form whole objects with those individual parts according to their grouping (Gestalt).
When carefully applied to design, the Proximity Principle of the Gestalt Theory brings together similar aspects, allowing the human eye to recognise what is essential and what is not to the concept. This approach diminishes visual clutter and enhances comprehension.Â
Max Wertheimer, one of the three German psychologists who developed this theory during the 1920s, explains:
“The fundamental “formula” of Gestalt Theory might be expressed in this way: There are wholes, the behaviour of which is not determined by that of their individual elements, but where the part-processes are themselves determined by the intrinsic nature of the whole. It is the hope of Gestalt Theory to determine the quality of such wholes.”
Or, in less technical language, the Principles of Gestalt consider the layout (the grouping) of specific properties as being different from the simple sum of its individual parts. One example to help us understand these principles would be to consider the words of this text. Each word is unique and has meaning, but to understand the text, we need to have a specific arrangement of words that will give us a context and a more meaningful sense of what the text is trying to transmit.
The arrangement of this influential theory, which deals with positive and negative spaces and timing, dramatically affects the information’s meaning.
High quality, affordable web content writing service
100% original and unique content
Website copywriting
Blog writing
Article writing
SEO writing
The Gestalt Theory in visual communication
Gestalt theory explains the “pattern-seeking” natural to human behaviour with scientific validation that visual artists can use to improve their visual work. The research started in the 1920s and is still a thriving part of design education. The grouping elements of the Gestalt Principles help us create and organise print and web designs to create meaningful designs such as logos, posters, magazines, book jackets, and many other visual communication tools we use daily in our profession.
We can analyse how people perceive and understand our images and layouts and build a psychologically solid visual frame of reference to be used in the spatial organisation of our graphic information (Berryman, 1990).
As we, designers, continue to create web pages, animations, user experience (UX) interfaces, printed designs, and so many other types of interactive media communication tools, whether web or multimedia documents, its essential that we continue to understand their application and incorporate them to produce a distinct visual flair in our designs.Â
The Principle of Proximity
“objects or shapes that are close to one another appear to form groups.”
Proximity refers to how close the objects are to one another. Items that are spatially located close to each other seem to be part of the same group, and things that are apart seem to be perceived as separate, not belonging to the same group.
In media design, items near each other are naturally considered part of an organised, unified group.
In web design or business cards, you see this principle daily when information is positioned close together to form a visual unit. As we group the data into particular selected items, we offer our visitors a clear message and hierarchy of the information on the page or the card.
Â
The hero image on our homepage can be used as an example. The design does not visually overpower the user. The header with adequately spaced information items in the content and the ample space in the featured content area with intelligible text and related images contribute to this streamlined appearance. Negative space is beneficial to our design since it enables us to make the concept more appealing while implementing the proximity principle.Â
How the Principle of Proximity works
Observe this group of circles:
The only difference between both groups is the proximity of the lines. Our brain perceives the group on the left as a set of 18 circles against a vertical line of 6 circles on the right. It is a natural interpretation and makes our mind feel well because it understands the message being communicated by the figures.
Another example:
Here we see the contact page for Moss51 Art & Design. Using the proximity concept, important CTA elements are grouped, allowing visitors to scan the page and recognise actions they can take. We organise the space around each group to facilitate the reader’s comprehension of the content and structure it by the page’s CTA requirements.
Visually related elements are vital to force the viewer to scan the information given and understand it with as little work as possible. Let’s see this example:
The reader will have difficulty understanding the card on the left as the information is not locally grouped, even with abundant white space. On the contrary, the business card on the right groups the data in logical places with the services provided, the address and the cardholder’s name printed in a larger font just above the location. The proximity principle is followed, and the reader can get the information at a glance.
Hierarchy
The logical organisation of positive and negative space aids the reader in identifying a distinct visual hierarchy within the communicated information. This is what we refer to as website architecture and information flow. The observer perceives the information hierarchy based on how we group and subgroup components.
On the page, the user must have a clear understanding of where they came from, where they might go from there and what they can do. The designer must express the site’s objective and categories in a crystal-clear manner.Â
Â
With the right informational hierarchy, a list of categories and subpages will be straightforward to navigate. Imagine, however, that the list was created without capitalisation, indentation, and the corresponding fruits and vegetables under the relevant category, i.e., without displaying the relationship between the indented items and the categories. Could you locate your salads and your dessert? Without the hierarchy, it would be far more difficult and unpleasant. Â
Good hierarchy is natural to read
Hierarchically organised content is logical and easy to comprehend. The content will be easily scannable to locate points of interest. In websites with rich material, well-designed white space helps visitors to breathe. Categories are separated into boxes and graphical planes, and a visual hierarchy may be discerned through the use of various fonts, image sizes, and saturation levels.
Examine an outstanding example of the AIGA homepage. It must effectively showcase the various chances for graphic design development, including conferences, publications, membership, events, professional articles, and developments, on its homepage. It highlights a further essential component of the proximity concept, the use of grids to group things and appropriately utilise white space.
The grid sizes are proportional to the quantity of information and representation they display, which is compatible with the website’s mission to provide professional, pertinent information to its members. Using proximity, the grid-based style enhances the design by facilitating the user’s navigation of the website without unnecessary interruptions.
Straight to the point
Easy navigation is essential in UX design. It helps us understand how the human brain works and explore the open ways to improve our designs significantly.
Incorporating this principle and the other basic tenets of Gestalt Theory into our designs is rather straightforward. They will elevate our communication with the user to a natural interaction that will guide them towards the action you want them to take.
If you’re anything like me, you want to impress your visitors and enhance their user experience. Consider the following suggestions while designing your own website:
- express your information graphically by grouping the content
- leave an equal number of white spaces between elements only when they are part of a bigger whole
- add more space between items that should not be grouped together to provide better distinction
- make your layout fit together logically
- avoid having too many separate elements on a page
- use your elements to create a clear visual hierarchy that transmits your message efficiently and effectively.Â
Read also:
Are you ready to create Something Spectacular?
Here, at Moss51 Art & Design, we specialise in SEO content writing for your business website or blogs. Your blogs and website pages need to look nice with well-written content to attract customers and search engines. Let’s talk.
We specialise in writing trustworthy website content for web pages and blogs.
I hope you enjoyed reading this article. Did you find the information on this post useful? Leave your comments below.Â
Print and share this article friendly; you are free to use and reproduce it, just please attribute Moss51 Art & Design as the original author, and link back to this post!
