Visual Group Theory Full Images Are

By putting like things closer together, with space in between each group, the viewer will immediately pick up on the organization and structure you want them to perceive.

Top 3 Why Clients Enterprise Community Blog About Us Follow us on Log In Go to Your Profile Design All Blogs Icon Chevron Icon Close Search Filter by All Engineering Design Finance Projects Product Toptal Insights View all results Engineering Design Finance Projects Product Toptal Insights UX Design 9 minute read Exploring the Gestalt Principles of Design Cameron Chapman Cameron comes from a design background and is the author of two web design books: Color for Web Design and The Smashing Idea Book.

SHARE Read the Spanish version of this article translated by Yesica Danderfer.

Leaving white space around elements of a design is the first thing that usually comes to mind.

But then there are designs that use that white space to infer an element that isnt actually there (the arrow hidden between the E and X in the FedEx logo immediately comes to mind as an example).

Its why we see faces in things like tree leaves or sidewalk cracks.

The most influential early proposal written about the theory was published by Max Wertheimer in his 1923 Gestalt laws of perceptual organization, though Wolfgang Khlers 1920 discussion of Physical Gestalten also contains many influential ideas on the subject.

Our brains are built to see structure and patterns in order for us to better understand the environment that were living in.

There are also some additional, newer principles sometimes associated with gestalt, such as common fate.

In gestalt, similar elements are visually grouped, regardless of their proximity to each other.

Similarity can be used to tie together elements that might not be right next to each other in a design.

Its why buttons for calls to action are often designed in a different color than the rest of a pageso they stand out and draw the visitors attention to the desired action.

For example, in a features list using repetitive design elements (such as an icon accompanied by 3-4 lines of text), the similarity principle would make it easy to scan through them.

They will follow the simplest path on the page, so make sure the most vital parts they should see fall within that path.

Horizontal sliders are one such example, as are related product listings on sites like Amazon.

Its the idea that your brain will fill in the missing parts of a design or image to create a whole.

But more complex applications are often seen in logos, like that for the World Wildlife Fund.

Large chunks of the outline for the panda are missing, but your brain has no problem filling in the missing sections to see the whole animal.

The brain completes the white shapes, even though theyre not well defined.

Visual Group Theory Full Images Are

Without a partial image, i.e., if only full images are shown, the brain doesnt immediately interpret that there might be more to be seen, and therefore your user is less likely to scroll (since closure is already apparent).

By putting space between elements, you can add separation even when their other characteristics are the same.

And yet your brain interprets the image on the right as three distinct groups.

Due to the field labels being closer to the fields under them, people would mistakenly believe thats where the information goes for c.

Yet, the information is supposed to be provided in the fields above the text labels.

Visual Group Theory Pdf