Gestalt and Design: Symmetry
Symmetry
When visual elements are part of a symmetrical arrangement, they are perceived as grouped together
There are three major types of symmetry: translational, reflectional, rotational.
Translational symmetry occurs when a visual element is moved into a specific direction and distance without any rotation or reflection. The only thing that changes is the position. The element can be repeated several times as long as they are proportional.
An element has reflectional symmetry when one half is the mirror image of the other. A line, called the line of reflection, is drawn down the center of the two elements which are similar in every way except for facing the opposite direction.
An element has rotational symmetry when is looks exactly the same after having some rotation between 0 and 360 degrees and shares a common center.
Symmetry is extremely powerful and can be strategically used in design to establish a sense of stability
Translational symmetry can be used in design to create rhythm along with motion, speed and dynamic action through repetition.
Translational symmetry is extremely common in UI design. For the most part, any design that uses a grid system will consist of translational symmetry as each column is a repetition of one another.
Content is often symmetrical to create structure and stability. The image above contains two forms of symmetry, being both translational and reflectional.
Rotational symmetry is often used to create motion and speed as well as harmony. It can often be found in graphics such as promotions, hero headers, and banners, such as the image above. This type of symmetry is the least common in ui design.
Sources:
- https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide
- https://ux360.design/symmetry-design-principle/
- http://crazypixels.net/gestalt-psychology-in-web-design-symmetry-principle/
Check out the other articles in the Gestalt and Design series
