Designing community icons using
UX Gestalt principles

3 examples to define iconic UI elements for your design projects

Originally published on Medium

What is community as a concept?

Community is in essence a feeling of fellowship with others, a combination of sharing common attitudes, closeness of interests, and similarity of goals. We can also refer to community as a social group, a collective of friends, or a neighborhood.

There are many ways to interpret community. To design community in an iconic and expressive way, we can use a foundational UX design tool, the Gestalt principles, as an ideational guide.

What are Gestalt principles?

Gestalt principles are conceptual perceptions that the human brain will organize visual content in a most effective way.

For instance, using the Gestalt principle of closure, our brain waves will effectively close a line to process visual information fully.

The Gestalt principle of closure works on the perception on what is it that our brain wants us to see, versus what information are we actually given.

In this example of a Gestalt principle, looking closely at the three illustrations, we realize that each one is a combination of a bunch of shapes. But our brain fills in missing information, and we perceive the icons visually as a meaningful render of a thing, being, or object.

This is an interesting insight as the concepts embedded in the Gestalt principles can help us to design difficult-to-render ideas and represent them visually.

Most common visual Gestalt principles we can use to ideate on community

For this essay, we’ll focus on the top three UX Gestalt principles: similarity, proximity, and common region.

Let’s explore!

Community through similarity

Applying the Gestalt principle of similarity, where similar items get grouped based on their attributes, we can play with similar shapes, place them in the same location, and contextualize the story.

The Gestalt principle of similarity organizes objects of similar (or same) shapes into one group. For this example, the emphasis is placed on long rectangular shapes, not the circles or triangles.

Using the similarity as a concept, we group similar shapes and use them as the foundational elements to start the design.

Using the principle of similarity, the rectangular shapes are stacked vertically, so that they render a design for a chat room.

In this illustration, community means connecting through voices. Each element becomes a speech bubble that engages with the other member of the group. Community is expressed as a group or family chat, or friends from all over the world exchanging ideas.

The chat room becomes the icon for a social group engaged online by text.

We can refer to this community as social group in conversation with each other, or as a messaging group, or a chat club.

Community through proximity

The Gestalt principle of proximity defines that objects which are close together are in all likelihood perceived as a group, and not as individual elements.

Thus, when we see a group of objects that are close together, our brains automatically perceive them as a single unit, and not as separate pieces.

The Gestalt principle of proximity recognizes objects or elements that are close to each other as one group. In this example, the four human-like icons belong together by proximity.

The principle of proximity groups objects or people together that appear in closeness with each other.

Once we established the four figures as one group, we can expand the design to formulate community as a group, where elements overlap, and express emotions.

This principle of proximity, or closeness, defines them as belonging to each other, such as a group of friends, or family. They touch, overlap, and express an emotional connection.

In this final design, community is expresses as a group of close friends, or a family of three with their pet. The design also features a delightful expressive quality.

The emotional expression is a delightful attribute to this group.

Community through common region

The Gestalt principle of common region defines a group within an area, regardless of shape, meaning, or color of the objects within.

The Gestalt principle of common region focuses on elements within a group of elements, and highlights them to form one unit within a larger environment.

In this example, we see a composite of 16 differently colored tiles. They are organized to fit neatly into a space.

However, only the 4 tiles sitting on a black background are significant. The black background is an indicator that these 4 tiles form one unit, and are therefore separate and unique from the others.

Common region is used to highlight eight elements within a larger group of elements as belonging to each other and form a unified whole.

In this design, each tile takes on a different shape. They now form a somewhat random pattern within a given space.

It is only when we apply common region, we understand which elements belong together to form the group.

The 8 elements on the right side fit together to form a house, featuring a pointy roof and three stories.

The common region defines the unit made of eight elements. These elements unite to render a house with a pointy roof and three stories of living space. Each floor has two rooms.

This outcome of the common region principle is particularly interesting because it makes room for a lot of play and experimentation.

How easy is it to re-arrange the tiles, add, subtract, change shapes, and then apply different common regions to fitting different parts together.

Togetherness is the overarching theme of all three Gestalt principles applies here, and it makes designing community delightful and meaningful.

The takeaway

The three Gestalt principles of similarity, proximity, and common region lend themselves particularly well to ideate on community.

This design approach can easily get expanded into other concepts, such as iconography for a city, a network, or a map.

Applying Gestalt principles to iconic design amplifies the intended context.

Understanding Gestalt principles can make design delightful and easy to integrate in UI libraries.

Author: Eva Schicker ©2023. All illustrations ©Eva Schicker 2023.