For design to have meaning, purpose or impact, it must extend itself beyond a visual aesthetic and connect with people at a deeper level. Understanding how the mind perceives visual elements in our world will allow design (of any medium) to connect with an audience at a deeper level. Knowing that there is a psychological connection with design is an important way to approach the work, or evaluating the work of someone else. The value of design and it’s impact on aesthetic, brand and business goals extends far deeper then only acknowledging how it looks aesthetically. There is a deeper reasoning for decisions around how and why elements are created in hierarchy, groups and order.
The Gestalt principle is meant to recognize and understand the ability to maintain meaningful perceptions within a chaotic world. When our minds form a “gestalt” (or perception), the whole has a reality of it’s own, separate from the individual parts. As stated by Gestal psychologist, Kurt Koffka, “the whole is something eise than the sum of its parts”. The principles of Gestalt describe how our minds make sense of order related to parts creating a whole. Most importantly, is when and how our minds understand the visual world as a whole related to individual parts.
Understanding the effects of psychology within design is powerful and necessary.
Design is not only what is seen, but how things are interpreted. Good design meets the goals and strategies of any project by allowing the audience to see, understand, and interpret the meaning in the intended way it is meant to be perceived. Using these Gestalt principles will help make sense of how to properly group items, create order, and naturally allow the mind to understand and interpret design.
The Gestalt principles are in the following categories: Proximity, Similarity, Common fate, Symmetry, Continuity, Closure, Good Gestalt, and Past experience
Proximity
The law of proximity states that when an individual perceives an assortment of objects, they perceive objects that are close to each other as forming a group. For example, in the figure that illustrates the Law of proximity, there are 72 circles, but we perceive the collection of circles in groups. Specifically, we perceive that there is a group of 36 circles on the left side of the image, and three groups of 12 circles on the right side of the image. This law is often used in advertising logos to emphasize which aspects of events are associated. (https://en.wikipedia.org/wiki/Gestalt_psychology)
Proximity in design is used to visually create an understanding of order and interaction with the design as a whole. This can be applied to many parts of a digital experience.
For example, a photograph combined with messaging and a call to action which creates an emotional experience to communicate an idea or message. An icon placed next to a list item to create importance and visual understanding – combined with an entire list to create an overall value and hierarchy of the list as a whole to the entire design. A collection of items for sale grouped together on a page section or within an entire page for shopping. Combining detailed pieces of these items together creates groupings that become understood and visually useful for users.
By applying best practices from data, analytics, focus groups, and case studies, we can understand the importance of adopting known parts of design related to proximity and how they work or don’t work.
For example, the hamburger icon was widely misunderstood for a long time when working in mobile design. Designers realized that it was a unique and optimal solution for a mobile menu tool. Soon, after constant testing, trying it out, and understanding users needs for mobile, it has become a widely adopted part of a larger experience for mobile. Users understand that 3 horizontal lines at the top of the website means there is more to experience and it will open up a menu.
Proximity has to be explored, understood, tested and adopted. Proximity grows to become best practices and becomes a useful tool for designers to utilize. Grouping parts of interactions, content, and elements together to create pieces and groups begins to mold the building blocks of a larger experience that defines digital platforms, your brand and the overall experience that people have with that digital product.
Proximity must be applied in a way that aligns with the overall brand values and goals of the project. By taking a 30,000 foot view, going down the 3-inch view and looking at all the details, and then ensuring that those details are inline with the 30,000 foot view, you can ensure that the proximity of the parts create a proper greater whole that aligns with the overgoals and brand strategy.
Similarity
“The law of similarity states that elements within an assortment of objects are perceptually grouped together if they are similar to each other. This similarity can occur in the form of shape, colour, shading or other qualities. For example, the figure illustrating the law of similarity portrays 36 circles all equal distance apart from one another forming a square. In this depiction, 18 of the circles are shaded dark, and 18 of the circles are shaded light. We perceive the dark circles as grouped together and the light circles as grouped together, forming six horizontal lines within the square of circles. This perception of lines is due to the law of similarity.”(https://en.wikipedia.org/wiki/Gestalt_psychology)
By visually making groups of items look similar, our minds will group that collection together as a whole. Taking this a step further from proximity, we correlate items that have similar visual design related to typography, color, or layout together. Once we understand the visual hierarchy, our minds quickly make sense that the similar looking items are naturally grouped together. Proximity to other items becomes clear as we can visually decipher the differences and group similar items such as lists, articles, headlines, image galleries, calls to action together because they look similar to other items designed the same way.
We can then being to break down the importance of visual items related to brand strategy, project goals, UX and interaction design around how things should be similar and why they should be similar. Applying this thinking to the overall brand strategy, we create similar items and place them within proximity to other items to being to build a cohesive experience that people will understand along with aligning to the brand every step of the way in this design practice.
Common fate
“The law of common fate states that objects are perceived as lines that move along the smoothest path. Experiments using the visual sensory modality found that movement of elements of an object produce paths that individuals perceive that the objects are on. We perceive elements of objects to have trends of motion, which indicate the path that the object is on. The law of continuity implies the grouping together of objects that have the same trend of motion and are therefore on the same path. For example, if there are an array of dots and half the dots are moving upward while the other half are moving downward, we would perceive the upward moving dots and the downward moving dots as two distinct units.” (https://en.wikipedia.org/wiki/Gestalt_psychology)
Within any design, items that move together are perceived as being grouped together. Similarly, items that do not move together as other items are moving together also create a grouped sense at the same time.
For example, a menu stuck to the top of the website while a person scrolls the content of page creates two groupings in our minds using common fate. First, the menu is grouped as items that are not moving together. Secondly, the rest of the page that is scrolling content for the person becomes grouped together. Focus can shift from one group to another and the mind makes sense of these groupings.
Taking this a step further, you can create beatiful and subtle interactions within a scrolling page for groupings that could be grouped together and call special attention to the items as a person navigates the content of your site.
Aligning these practices with you overall brand strategy will create a memorable experience for people. Is your brand expensive or beautiful? Then the common fate groupings would be subtle in the details and ease in for users. Is your brand bold, youthful and aggressive? Then your groupings and interactions of these moving groupings within common fate practice might take a more drastic and loud approach to the groupings of moving items within common fate principles.
Using common fate can greatly enhance an experience if utilized properly, not overdone and aligns to the overall tone of your brand.
Symmetry
“The law of symmetry states that the mind perceives objects as being symmetrical and forming around a center point. It is perceptually pleasing to divide objects into an even number of symmetrical parts. Therefore, when two symmetrical elements are unconnected the mind perceptually connects them to form a coherent shape. Similarities between symmetrical objects increase the likelihood that objects are grouped to form a combined symmetrical object. For example, the figure depicting the law of symmetry shows a configuration of square and curled brackets. When the image is perceived, we tend to observe three pairs of symmetrical brackets rather than six individual brackets.” (https://en.wikipedia.org/wiki/Gestalt_psychology)
Our world is filled with symmetrical order. We, as humans, are symmetrical in design. There is a natural order of symmetry found throughout nature. So, it is natural that our minds understand symmetry and try to make sense of things easier by applying symmetry to understanding new things in the world. It’s a default setting within our mind to keep it from working harder to make sense of chaos.
Therefore, applying symmetry to design will allow users to quickly makes sense of the order and harmony of the design. We can then quickly group parts of the design together through symmetry and understand what the overall design is trying to convey.
From layouts, grid systems, the golden ratio, understanding screen resolution and typography, we can create symmetry within every part of design that focuses on the finer details of a design. The symmetry begins to encompass the entire design as a whole and gives a harmonious feel to the design that our brains naturally seek.
In addition, symmetry creates order and harmony for a design but this can also be used to align within brands or a project that does not rely on an overall strategy of harmony and order. For example, a skateboarding company, a punk rock band or a campaign that is meant to garner attention by being unharmonious, chaotic, radical or pushing boundaries, can use symmetry to it’s advantage by creating the design or parts of the design to be asymmetrical. This will jar the mind and use the asymmetry to the design’s advantage by visually aligning with a brand or project that may be asymmetrical in messaging and approach.
By understanding these rules, you can apply them to existing projects, but you can also use them to break the rules as well. However, if broken, it must align with the overall goals, strategies and tactics of the project and brand.
Continuity
“The law of continuity states that elements of objects tend to be grouped together, and therefore integrated into perceptual wholes if they are aligned within an object. In cases where there is an intersection between objects, individuals tend to perceive the two objects as two single uninterrupted entities. Stimuli remain distinct even with overlap. We are less likely to group elements with sharp abrupt directional changes as being one object.” (https://en.wikipedia.org/wiki/Gestalt_psychology)
Consistency is a powerful element in design. By being clear about the structure, layout and order of how to communicate through a design with visual and typographical elements, applying consistency to the design will strengthen the continuity of the overall aesthetic. Objects that are grouped together through styling, or by alignment, are perceived to have continuity. These groups create blocks of information that can be quickly and easily digested through our visual senses.
By aligning elements together, our mind will perceive these as being grouped together. Smaller elements in proximity to one another can be aligned horizontally or vertically and our mind will group these together to visually read them in a top to bottom or left to right manner. It’s important to understand the hierarchy of elements and group them accordingly. Similarily, you can align groups together to create a greater sense of an experience and our mind will understand that if these groups are aligned and designed in a way that creates a sense of togetherness, then we will naturally perceive these groups as being a part of a greater whole.
If the design calls for these to distinct from one another, then you must design them to have visual separation to break the continuity. This is an example of understanding the rules, and knowing where and how to break them to achieve the desired outcome.
Continuity is important to design because it creates a sense of visual order and allows massive amounts of information to be quickly understood. Continuity creates a tone that aligns with a brand or vision of the project and holds the design together.
Closure
“The law of closure states that individuals perceive objects such as shapes, letters, pictures, etc., as being whole when they are not complete. Specifically, when parts of a whole picture are missing, our perception fills in the visual gap. Research shows that the reason the mind completes a regular figure that is not perceived through sensation is to increase the regularity of surrounding stimuli. For example, the figure that depicts the law of closure portrays what we perceive as a circle on the left side of the image and a rectangle on the right side of the image. However, gaps are present in the shapes. If the law of closure did not exist, the image would depict an assortment of different lines with different lengths, rotations, and curvatures—but with the law of closure, we perceptually combine the lines into whole shapes.” (https://en.wikipedia.org/wiki/Gestalt_psychology)
Our minds want to naturally fill in the gaps and complete anything that we perceive to be missing. Maybe it’s part of our imagination, or our natural ability to cognitively understand, make sense of what we are seeing and move forward.
To me, this is one of the most powerful and vital parts of creativity within design. By understanding that our mind will create automatic closure, we can create a sense of mystery, minimalism, lightness, and creativity through design.
Good Gestalt
“The law of good gestalt explains that elements of objects tend to be perceptually grouped together if they form a pattern that is regular, simple, and orderly. This law implies that as individuals perceive the world, they eliminate complexity and unfamiliarity so they can observe a reality in its most simplistic form. Eliminating extraneous stimuli helps the mind create meaning. This meaning created by perception implies a global regularity, which is often mentally prioritized over spatial relations. The law of good gestalt focuses on the idea of conciseness, which is what all of gestalt theory is based on. This law has also been called the law of Prägnanz.[18] Prägnanz is a German word that directly translates to mean “pithiness” and implies the ideas of salience, conciseness and orderliness.” (https://en.wikipedia.org/wiki/Gestalt_psychology)
Grouping elements together in an order of forming collections, patterns or repetition allow the mind to create meaning. When these elements are clear, concise, and focused, this allows the mind to make sense and interpret these patterns and groups to apply meaning.
Applying the previous laws with this approach allows the design to be clear, concise, symmetrical and have order for the mind to perceive and interpret the work while applying meaning. The meaning comes from the design’s own awareness of what it is presenting. The tone, the form, the aesthetic, the overall vibe that is being communicated to the audience holds great value. All of these parts converge together to help the audience perceive the intention and make sense of the overall design as a whole. If executed properly, this will align with the goals of project, the strategy set forth to communicate and support the brand or mission.
By creating order through patterns, consistency, rhythm and pairing it with a concise approach to the overall design, the mind will interpret and make sense of the work. There is room for the mind to work.
Past Experience
“The law of past experience implies that under some circumstances visual stimuli are categorized according to past experience. If two objects tend to be observed within close proximity, or small temporal intervals, the objects are more likely to be perceived together. For example, the English language contains 26 letters that are grouped to form words using a set of rules. If an individual reads an English word they have never seen, they use the law of past experience to interpret the letters “L” and “I” as two letters beside each other, rather than using the law of closure to combine the letters and interpret the object as an uppercase U.” (https://en.wikipedia.org/wiki/Gestalt_psychology)
Understanding history, culture, communication, social issues, typography, photography, color theory and the fundamentals of design all hold a very important place in creating visual work for the future. Knowledge about the world, our history, the way we communicate, what evokes emotion, and leaning in to the future with these understandings will create solid and powerful designs that communicate and resonate with your audience. Recognizing that humans, mostly, have a collective form of past experiences and recognition of that way the world works is an important part of recognizing the validity of the design.
Designer’s must have an acute sense of awareness about the world, our history, relevant news, social issues and culture. Designers must have enough personal self awareness to recognize all of the human conditions and understand that past experience for a large audience is something that can be utilized to communicate and evoke powerful emotions through your design by utilizing with past experience.