Editor’s Note: This post was originally published in March 2020 and has been completely revamped and updated for accuracy and comprehensiveness.Â
This article is dedicated to analysing the relationships between the different elements of Gestalt principles of perception and their application to graphic and web design. The objective is to develop visually cohesive parts that convey a meaningful message to the observer.
We will outline three primary connections: a) Figure-Ground, b) Good Continuation, and c) Common Fate. Each of these links provides insight into how we process visual, auditory, or tactile information. Now let’s delve into this fascinating topic!
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)
As designers, we may often wonder if we should adhere to Gestalt principles in our designs. My answer is yes, absolutely! Once you’ve established your content and communication goals for your message, utilising Gestalt Theory principles will help you arrange the design elements accordingly. Applying background shading or gradients and grouping items appropriately can create messages that resonate successfully with viewers.
High quality, affordable web content writing service
100% original and unique content
Website copywriting
Blog writing
Article writing
SEO writing
Interconnection
Interconnection is essential to understanding Gestalt principles. They are all tied together – sharing similarities or differences, blending or contrasting with other elements, and suggesting their own hierarchy exactly as all the elements in a design.
When it comes to graphic design, a deep comprehension of each principle serves to amplify the message your client wants you to pass on. Subsequently, each relationship between two distinct components should make theoretical sense in the context of what one is trying to communicate visually.
Now let’s explore three specific relationships: 1. Figure-Ground, 2. Good Continuation, and 3. Common Fate.
1. Figure-Ground Relationship
ELEMENTS ARE PERCEIVED AS FIGURES OF FOCUS
When creating a design, it’s important to consider the relationship between elements and their location. Depending on where they are placed, focal objects will be distinctly highlighted, whilst background elements create the landscape that anchors them.
For example, people naturally define their relation to an object based on what they observe in the foreground and background. This applies to space as well. Modifying negative and positive space proportions can impact how a viewer interprets your message. Usually, white space is viewed as active, while black space functions as a passive backdrop.
In this design, the uniformly spaced orange rectangles produced a formal space because both the figure and the ground are steady. When two rectangles are replaced with a thin orange line, the excess space becomes active and stands out against the background.
Understanding figure-ground perception is imperative for success in design. This concept helps viewers
- to differentiate content from structure;
- perceive affordances; and
- recognise depth in a two-dimensional medium.
Through this, the designer can effectively direct the viewer’s eyes to establish a meaningful connection. Andy Rutledge explains the power of figure-ground perception when applied by designers, suggesting it can be used to create puzzles or engaging layouts that communicate compelling stories.
Three types of the Figure-Ground Relationship
- Stable– when both figure and ground are clearly expressed.
- Reversible– when both parts attract the viewer’s attention heading to an energetic design. Â
- Ambiguous– when both elements can appear as either figure or ground, and the viewers have the choice of perspective.
Figure-Ground Relationships on a website
This page of wineselectors.com.au employs a backdrop image of a winery that has been darkened to bring attention to the selectors’ choices. You are aware of the advantages, the evaluation criteria, and the objective of the wine selection. It makes you ready to choose your wine.
2. Good Continuation Relationship
ELEMENTS ARE PERCEIVED TO HAVE SOMETHING IN COMMON WHEN THEY FOLLOW AN UNINTERRUPTED LINE OR A CURVE.
The alignment of objects is a fundamental principle for human perception, as our brains will identify elements aligned in either straight or curved lines as similar. This uninterrupted continuity creates an association where small changes in direction can significantly alter the perception of these elements. We can effectively create different visual relationships between different elements by leveraging this concept.
Source: Markus Burke from Pexels
The eyes are drawn through the curved line of a beautiful snow road.
When we discover continuation, we recognise that this is the direction to pursue. Our mind prefers tasks that require less effort and resistance, allowing our eyes to follow that direction and continue in its set course.
Examples
The website must be navigable and guide visitors to solutions to their issues. Continuation encourages our eyes to form the most natural relationship between the objects while also drawing attention to certain groups of design elements.
Source: Swarovski.com
Our eyes follow the progression of goods for sale at Swarovski (no affiliation), and we recognise that they are part of separate categories of objects arranged in groupings. The consistency in image alignment establishes a path and guides us through each row of products.
The path and direction are clearly identified when the relationship of good continuation is visible on a website page. All we have to do is follow them to find the answer to our problem.
Visually, the design exhibits many distinctive principles. The similarity and proximity principles of elements are apparent; additionally, closure can be observed because the individual components together form a unified cluster. Our eyes fill any empty spaces between components so we can easily comprehend the arrangement.
Consider Moss5 Art & Design‘s columns of information in which the blogs are listed one under the other, using continuation to guide the eyes, as well as the similarity of photos to direct the eyes to the left and the name of the blog to encourage the reader to move vertically to read the information.
Disrupting Movement
If good continuation guides us through the composition, an abrupt movement that disrupts the flow may cause us to focus on particular details or designate the beginning of a new line of continuation.
The Iconic (no affiliation) employs this compositional principle when it guides visitors through aligned images of products for sale. But, then abruptly interrupts the structure with a bright black image of their discounts – an image with a distinct design you were not expecting to see. This disruptive graphic halts the direction your eyes are travelling and draws your attention to itself. It is intentional and has a clear purpose.
A continuous and consistent flow of design components directs the user’s eyes and helps them to perceive information better. Incorporating disruptions is perfectly acceptable as long as it does not confuse or hinder visual continuity. Furthermore, maintaining a consistent flow throughout the navigational experience will create a logical sense of orientation for users and make it easier for them to find their way around.
3. Common Fate Relationship
ELEMENTS THAT MOVE IN THE SAME DIRECTION ARE PERCEIVED TO BE MORE RELATED THAN ELEMENTS THAT DON'T MOVE OR THAT MOVE IN DIFFERENT DIRECTIONS OR AT DIFFERENT SPEEDS.
The final type of relationship we will discuss today is the Common Fate Relationship. It is a potent relationship because it uses motion and animation to clarify the relationships and how they function among the composition pieces.
Smashing Magazine.com uses a compelling example concerning the common fate relationship. The video shows a fish school in the Barrier Reef. It is a bit old now, nearly 14 years old, but I believe it is still worth seeing. By swimming together, the fish form a unified movement to ward off predators and increase their chances of survival. This phenomenon is known as a common fate relationship where elements form a correlation based on moving in the same direction at the same speed; order and synchrony ensure that each part keeps up with and works harmoniously with one another.
Imagine, for instance, you’re driving a car. It’s essential to stay in the correct lane and keep at the same speed as other vehicles. Every car travelling on the same road with similar speeds is related to each other as they are headed towards the same goal. To have a safe trip, they must keep up with this synchrony. Synchronicity is the tool to reach the goal. Simple, but essential. When one of the elements (a car) breaks the synchrony, it calls our attention, and we need to respond appropriately to that sudden disruption.
Source: Helena Lopez from Pexels
Clearly, the principle of common fate relationship plays a significant role in our daily lives. When walking your dog, you both move in the same direction and at the same pace (unless the dog is in a rush!). When you cross across an intersection’s traffic. There is a link between persons crossing in one direction and those crossing in the opposite direction. A flock of ducks flying in formation, aeroplanes flying in formation, etc. It is all-encompassing.
The impact of opposing movements on the human mind is often greater than contrasting colours or other visual cues since our awareness is acute and spontaneous.
Consider another example: It’s Christmas time. You are walking at night and observe a line of coloured lights that seem to be moving in a decorated garden. A striking effect! But when you analyse the movement according to the concept of common fate, it becomes apparent that the lights are going on consecutively, creating the illusion that they are truly moving. You do not perceive the individual lights, but you do perceive the entire line. The activity moves in the same direction, and the composition is viewed as a related group.
Designing a website with the Principle of Common Fate in mind
In web design, the Gestalt principles are often used to create visual interest and to help users navigate through nested menus and content. Besides the relationship principles, other principles like similarity, continuation, closure, and proximity can be applied to achieve various effects, depending on the desired outcome. By nesting links, a web page’s layout is simplified, with fewer links on the main page. It also decreases the amount of clicks and page loads by putting all the information in a single menu section associating actions with outcomes.
Ultimately, it is up to the designer to decide how to apply Gestalt principles to create the best user experience. Understanding how these principles work can make them more effective and useful.
The common fate movement created typically inspires confidence and stability since it helps the reader understand what the website is about, so fostering a favourable initial impression.
What we should learn
The use of the principle of relationship is effective and intuitive. During your daily routine, make an effort to note how often you employ it in everyday activity. Its motion can create an impression of energy and life, revitalising communication and productivity. This action results in a positive user experience and profitable business outcomes.
At first glance, these simple principles may appear straightforward. However, when applied to complex images, they can produce a harmonious composition that conveys emotions and senses to the viewer. As such, these relationships between elements in an image convey the designer’s intent and enable viewers to understand the message behind it.
The Gestalt principle of relationship is a powerful tool for designers. Designers can create more cohesive and effective designs by understanding and applying the principles of figure-ground, good continuation and common fate. To learn more about Gestalt Theory, read the articles below.
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!
