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

Welcome to the sequel of our posts about Gestalt laws in web design. Just to remind you there are 6 major Gestalt laws such as similarity, proximity, closure, symmetry, continuity and common fate. Understanding and usage of Gestalt laws is beneficial for all graphic designers, because it helps organize the space in the smart and handy way.

The previous topic covered the proximity principle in Gestalt laws. And today we’d like to present similarity as a way to create visually unified elements in graphic design.

There is one day-to-day place where you can observe similarity – it’s retail store with its rows of shelves. All these repeated patterns can look really impressive if you can arrange the products on displays in some attractive way. And pretty soon you’ll see them in the buyers’ carts!

Software developers use similarity Gestalt law to make a kind of “computer vision” – ability to “see” everything in the same way as users do. Generalization of separate items helps to make a clear holistic structure of your graphic works. It’s essential to arrange the objects in the smart and user-friendly way when designing some software interfaces, advertizing banners or website pages.

Gestalt similarity in banner

Similarity and proximity laws might be a perfect guidance for designing radio buttons, check-boxes, bullets and form fields. The similarly styled elements are often used to ease the intuitive work with various software programs and web resources. You’ll see a classic example when looking at the even row of shortcuts on your desktop – their clear-cut columns and overall appearance.

Gorgeous fashion blog

According to the law of similarity our human mind is inclined to perceive similar-looking elements like a single entity. We strive to join them into groups and categories which are logically and visually similar. In one word, we single out totalities based on objects’ forms, colors, outlines, brightness and sizes.

What are you as graphic designers concerned most of all with? The style? The beauty? It’s rather the way viewers receive and decode information. The messages encrypted in visuals need to be got correctly, and this is a pure science that involves psychology and usability. That’s what Gestalt is all about. The law of similarity affects its other principles, and is therefore so important.

design similarity

Being the author of Visual Communication, Paul Martin Lester states: “The law of similarity states that, given a choice by the brain, you will select the simplest and most stable form to concentrate on. This law stresses the importance of basic shapes in the form of squares, circles, and triangles.” He means that we attribute similar shapes to the same group associating them with some special meaning. If there is a row of diamonds we don’t perceive all figures separately, we rather see them as a single row of diamonds.

It’s important to emphasize the needed elements, if you want the users to identify them first when looking at your graphics. Human minds immediately notice all forms and shapes, colors and lines that look matching. It sets the whole patterns quicker than some separate pattern elements. And we find it visually pleasant to look at the pattern items playing together. That’s the reason why we like website designs featuring repeating textures, shapes, brightness and colors:

35368  website template

* * *

35552 website template

* * *

36016 website theme

* * *

36482 website template

* * *

If you as a graphic designer make use of the law of similarity, you help viewers scan data quickly and effortlessly. You can manipulate their eyes and minds, focus their attention on small things you want them to consider important. For example, if it’s a web store design, you group items together or emphasize the style of how they appear on a page like in the following sample:

34401 Magento theme

You can make banner adds look more fancy and memorable when making them look similar but different from the rest of the page (e.g. designed with nonstandard shape or colors):

37307 Magento theme

* * *

37842 website theme

* * *

A bunch of other great examples of similarity detection in TemplateMonster’s website templates:

36392 WordPress theme

* * *

36679 website theme

* * *

37797 website theme

* * *

37899 website theme

* * *

* * *

38167 website theme

* * *

GreenCast theme 38167

* * *

38242 website theme

* * *

The conclusion is simple: make use of similarity principle by visual grouping of the items you want to emphasize. On the whole, the understanding of Gestalt psychology in design enhances visual communication, and this may save you tons of bucks on your advertising campaigns.

Comments are closed.