Concept of Visual hierarchy and it’s origin from Gestalt principle

Hussein Yekini-Ajayi
Bootcamp
Published in
5 min readApr 3, 2023

The concept of visual hierarchy is based in Gestalt psychological theory, an early 20th-century German theory that proposes that the human brain has innate organizing tendencies that “structure individual elements, shapes or forms into a coherent, organized whole,” especially when processing visual information. The German word Gestalt translates into “form,” “pattern,” or “shape” in English. When an element in a visual field disconnects from the ‘whole’ created by the brain’s perceptual organization, it “stands out” to the viewer. The shapes that disconnect most severely from their surroundings stand out the most. This is commonly encapsulated as the Von Restorff effect, which states that isolation attracts attention.

Visual hierarchy is inspired by the Gestalt principle, which states that the human mind wants to create order in disorder and naturally wants to make patterns and group separate elements into a unified whole. Elements of visual hierarchy include color, contrast, size, space, and position/alignment.

Gestalt principle

Gestalt principles are an important set of ideas for any designer to learn and their implementation can greatly improve the aesthetics of a design as well as its functionality and user-friendliness.

Some of the most important Gestalt principles include:

some important gestalt principle. “Proximity, similarity, continuance, closure and figure & ground

1.Proximity: Proximity refers to how close elements are to one another. Objects that are close together tend to be perceived as a group. The strongest proximity relationships are those between overlapping subjects, but just grouping objects into a single area can also have a strong proximity effect.The opposite is also true, of course. By putting space between elements, you can add separation even when their other characteristics are the same. Below is a pictorial representation.

law of proximity in pictorial form

2. Similarity: Objects that are similar in shape, color, or texture tend to be perceived as a group. It’s human nature to group like things together. In gestalt, similar elements are visually grouped, regardless of their proximity to each other. They can be grouped by color, shape, or size. Similarity can be used to tie together elements that might not be right next to each other in a design.

pictorial representation of the gestalt similarity law

The diagram above is tied with the gestalt law of similarity, exploring primarily from the color to shape and size.

3. Continuity: Objects that form a smooth, continuous line or curve tend to be perceived as a single entity. The law of continuity posits that the human eye will follow the smoothest path when viewing lines, regardless of how the lines were actually drawn.

pictorial representation of gestalt law of continuity

4. Closure: Humans tend to perceive incomplete shapes as complete, by filling in missing information. It is the idea that your brain will fill in the missing parts of a design or image to create a whole. In its simplest form, the principle of closure allows your eye to follow something like a dotted line to its end. Large chunks of the outline for the sheep are missing, but your brain has no problem filling in the missing sections to see the whole animal.

pictorial representation of gestalt law of closure

5. Figure-Ground: Humans tend to perceive objects as either a figure (the main object of interest) or as the background against which the figure stands. The figure/ground principle is similar to the closure principle in that it takes advantage of the way the brain processes negative space. You’ve probably seen examples of this principle floating around in memes on social media, or as part of logos

pictorial representation of gestalt law of Figure-Ground

Future directions of Gestalt Principle

The Gestalt principles have been widely studied and applied in various fields of design, psychology, and cognitive science since their development in the early 20th century. As technology continues to evolve, there are several ways in which the Gestalt principles may evolve and adapt to new contexts. Here are some potential future directions:

  • Virtual and Augmented Reality: As virtual and augmented reality technologies become more prevalent, it will be important to understand how the Gestalt principles apply to these new forms of visual information. For example, researchers may explore how the principles could be applied to improve the usability and effectiveness of virtual and augmented reality interfaces.
  • Interaction Design: Interaction design involves the design of digital interfaces that people can interact with. As interaction design becomes more complex and dynamic, there will be new opportunities to apply the Gestalt principles. For example, designers may experiment with how to apply the principles to create more engaging and intuitive user experiences.
  • Neuroscience: Advances in neuroscience research may shed new light on how the Gestalt principles operate in the brain. Researchers may explore how the brain processes visual information and how the principles can be used to design more effective visual communication.
  • Cultural Context: The Gestalt principles have been developed and studied primarily in Western contexts. As the world becomes more interconnected, it will be important to explore how the principles apply in different cultural contexts. For example, researchers may investigate whether the principles apply universally or whether they are influenced by cultural factors.

In summary, the Gestalt principles will continue to be an important area of study and application in various fields as we continue to explore the relationship between perception, cognition, and design.

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1

Hussein Yekini-Ajayi
Hussein Yekini-Ajayi

Written by Hussein Yekini-Ajayi

I'm a UI UX design Enthusiast, Passionate about solving problems and providing solutions that are simple and elegant. I shape technology into products .