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.
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.
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.
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.
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.
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
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.