Proximity Detection in TemplateMonster’s Website Templates [Die Gestalt im Design]

What do you know about Gestalt psychology? This is probably something you’ve never heard of before. And that is why it is essential that we challenge the lack of knowledge and fill this long felt want. Gestalt principles are known to be applied to perception and form-generating capability of our senses. In other words, it is all about visual recognition of unified wholes instead of just a collection of simple units. And as people often tend to draw some far-fetched analogies between different things, we can see these principles sufficiently exploited in the field of web design.

Commonly there are 6 Gestalt laws that show how people tend to organize visual elements. Those are proximity, similarity, continuity, closure, symmetry, and common fate. Today we will start off with introducing you the proximity principle in the context of TemplateMonster’s website designs.

* * *

First up, the Gestalt law of proximity (nearness or physical closeness) states that objects or shapes that are close to each other appear to be more related than things that are far apart. Even if the objects are radically different they are perceived as a visually connected group if they are placed close together.

As website designing is about organizing the content, here the layout and placement of content is everything. The principle of proximity calls for related items to be grouped visually, whereas unrelated elements should have enough whitespace in between to communicate they are different. This helps create a website that is really easy to get around in.

The whole is greater than the sum of the parts – David Hothersall: History of Psychology

This means that the collective presence of the bunch of items is more meaningful than their presence as individual unrelated items. Proximity creates related meaning, and the items that are in close proximity to each other imply some sort of communication relationship. This causes us to perceive logical groups rather than separate things and define the importance of one group over the other.

Let us now demonstrate you the expressive power of proximity being accomplished in our website templates. These are the first two examples of content-rich templates that illustrate the proper proximity between objects that are related.

* * *

* * *

Here goes another example of website template that uses proximity to develop unity.

* * *

Use Whitespace to Define Groups of Items

Physical closeness is easily manipulated with the help of a well-organized whitespace (the empty space with a purpose). The main thing here is that unrelated items and related items should be properly spaced out. You can allow plenty of whitespace around text, images or other unrelated elements to provide visual separation between them. Or you can provide the same spacing that will indicate that the groups are somehow relevant.

* * *

Sometimes, people want to arrange the elements closer but without the excessive spacing in between. In this case the line break (horizontal or vertical rule) can serve the purpose.

* * *

Avoid Even a Split Second of Confusion Over the Items Relationship

Get used to put titles close enough to the body copy pieces they’re attached to, the same with related descriptions and links, images and their captions, fields and action buttons. You need to communicate clear proximity to avoid the cases when items appear separated instead of being attached, for instance.

* * *

Wouldn’t a Better Option Have Been to Use Grid for a Proper Proximity?

Position design elements within the grid-based layout and it will help you easily group the necessary items together. It allows for a certain distance between the elements and in many case forces to implement proximity principles without even concentrating on them.

* * *

Try Boxed Grouping of Elements

Another way to create a unity around elements is to add some tangible connected reference between them or to put the related items inside of the outline. The new form becomes easy to interpret telling the viewer that the elements within this box have some contextual relatedness.

* * *

Types of Proximity Relationships

As for specific proximity relationships, we can mention 4 different types and illustrate them with the range of products available at TemplateMonster.

Closing edge: implies that the closer items are placed to one another, the more likely they are to be perceived as a group. Items arranged so can be related to one another in any direction.

* * *

* * *

* * *

Touching: with this kind of proximity relationship we have items that seem to be attached together. It is suggested that it makes for a stronger grouping than the close edge.

* * *

* * *

* * *

Overlapping: when the items are arrange in a slight overlap, they form the strongest grouping in a more complex shape. Thus the feeling of proximity between them is increased.

* * *

* * *

* * *

Combining: in this case the external element is used to relate or combine items in a certain grouping. And it sets this grouping apart from the rest of content around it.

* * *

* * *

* * *

Website design with a proper proximity throughout its architecture does not overwhelm the visitor with muddled information and ensures the optimal user experience. There are some aspects which you have to consider seriously when designing a website:

  • don’t give the information as one big chunk, express it graphically by grouping the content;
  • make items fit together logically;
  • put more space between the items that shouldn’t be grouped together;
  • should avoid too many separate elements on a page;
  • try not to leave equal amounts of white space between elements unless each group is part of a bigger whole;
  • use design elements to create a clear visual hierarchy.

Basically, your site visitors would literally be lost without you doing these things. But you don’t want to run the risk of losing your visitors because of this, do you?

Comments are closed.