UXDE dot Net Wordpress Themes

Gestalt Psychology in Web Design: Symmetry Principle



If you are a designer or web developer you should have a special intuition and critical thinking in order to understand the psychology of network users. The principles of visual perception are the basis of Gestalt theory. The last time we talked about the proximity principle in Gestalt psychology, but today I’d like to talk about the symmetry in web design.

Symmetry is an old-age device of a web designer. The world refers to two halves that mirror each other.

Red Page

Gestalt Psychology

If design of the site is designed correctly it means that it incorporates all the principles of Gestalt. Laws of design do not restrict an artistic vision and creativity of the web designer. Therefore do not afraid to put them into practice. Gestalt principles allow you to understand the human mind, to organize, and to manage the visual content of the website.

What is Symmetry?

Symmetry is a balance and a sense of proportion. From the Greek “Symmetry” is a proportionality of the items that belong to the same group. In web design symmetry is a “diversity in unity”.

That means that we all strive for harmony. It concerns the order and aesthetics in all things we do. Symmetry is a key component to achieve a pleasant visual effect and good perception of the work of any designer. Because we used to combine the parts of the object into one. In order to see a symmetry in web design you need not to be a specialist in this field.

Generally, there are three main types of symmetry: translational one, reflection symmetry (mirror reflection) and rotational symmetry (rotation). All these three types of symmetry are effectively used in web design. Let’s examine every type of symmetry.

Translitional Symmetry

Translational symmetry is perceived by a person on an unconscious level. On some websites you can see the recurring parts, such as tiled graphics, backgrounds and so on. Translational symmetry is often used for e-commerce website and online-shops. There are a few examples to confirm my words below.

Anzfisheries

Gestalt Psychology


Foodily

Gestalt Psychology


Struck Apparel

Gestalt Psychology


Reflection Symmetry

Reflection symmetry creates a so-called “mirror” effect when the element is reflected in vertical, horizontal or diagonal axis. In other words, it called the natural symmetry. Horizontal reflection is the most popular technique in design.

Naks Food

Gestalt Psychology


Timboelaars

Gestalt Psychology


Emily White Smith

Gestalt Psychology


Rotational Symmetry

Rotational symmetry means that a certain object can be rotated about its axis. The object is symmetrical around the central point. Rotation symmetry is quite common in nature: flowers, snowflakes, starfish and jellyfish, etc.

Often we use a rotational technique in web design in order to display speed and movement. Let’s take a look at a few website examples to understand the nature of rotational symmetry.

Polecat

Gestalt Psychology


Intercity Studio

Gestalt Psychology


Vanmoof

Gestalt Psychology


Symmetry and Order

Visual symmetry law provides a sense of order. Symmetrical elements give the feeling of order like everything is in its proper place. Asymmetry in web design should be used with caution, since in some cases it looks unbalanced. Have you ever noticed the fact that while looking at asymmetrical objects in a few seconds you are trying to find an explanation to their location? They reduce the concentration of attention on some elements of design.

Symmetry provides clarity. However, a clear order in web design can have both positive and negative effects at the user. But symmetry is very useful for providing information on the site, making the instructions or video lessons. It’s also useful for usability.

Symmetry Website Examples

Duuel

Gestalt Psychology


Paradox Labs

Gestalt Psychology


Florida Flourish

Gestalt Psychology


Fixoutlook

Gestalt Psychology


Lotie

Gestalt Psychology


Losttype

Gestalt Psychology


Eggsquis

Gestalt Psychology


Zervice

Gestalt Psychology


Gentleman Scholar

Gestalt Psychology


Pure9 Studios

Gestalt Psychology


Made by Shape

Gestalt Psychology


RubyMotion

Gestalt Psychology


Rei 1440 Project

Gestalt Psychology


Avioc

Gestalt Psychology


Convert My PSD

Gestalt Psychology


Diesel

Gestalt Psychology


Ambermiro

Gestalt Psychology


Cadillac ATS vs the World

Gestalt Psychology


Conclusion

The usage of symmetry or asymmetry in your website design depends on your needs and goals. Now you know the main three types of symmetry in web design and can use put this knowledge into practice. Don’t hesitate to share your ideas in the comments field below.

ShmitAcc writes inspirational articles about web design technologies and useful web design tutorials, where you can find a lot of top tips how to create amazing web design artworks.

Discussion 1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>