Using Symmetry and Balance Efficiently in Website Designing

Balance or imbalance is just a natural way of how life works. We see it everywhere, in the human body, nature like in plants, trees and animals. Symmetry has been proven to be very appealing to the human eye. Studies have shown that the more symmetry, the more attractive we find them to be.

Symmetry and balance are related terms. But they are not exactly the same thing. Let’s have a look at their definitions:

• Symmetry refers to the visual quality of repeating parts of an image across the axis, along a path or the centre.
• Balance is the visual principle that makes a design appear to be equally weighted throughout the layout.
• Asymmetry, on the other hand, refers to anything that is not symmetrical.‘

Symmetry

Balance is the key to a great design and engaging website layout. But symmetry is one of the tools that the designer can use to create balance. A design or element is symmetrical when two or more of them are identical and seem to mirror each other from a central point or axis. This strikes balance and order to the design.

While designing, symmetry has visually appealing benefits that can be very difficult to achieve and may not be appropriate in all contexts. Generally, an imbalance perceived by human eyes may not create a good user experience. Humans perceive the imbalance to be disorderly and chaotic.

In contrast, symmetrical designs are aesthetically pleasing to our eyes to understand at first glance. Since symmetrical designs include repetition of designs that reflect each other, they contain less information for our eyes to process and lead to lesser cognitive load.

Another reason why symmetry is pleasing to look at is because it balances out the visual weight in the designs. Since they are balanced, our eyes do not need to shift focus from one side to another to deduce the meaning.

Types of Symmetrical Design

Designers have identified three different types of symmetry that are widely used:

i) Reflectional Summary

This type of symmetry occurs when a design element is reflected on the other side from a central axis, resulting in two identical mirrored images. An axis refers to an imaginary straight line, so reflectional symmetry can be reflected horizontally, diagonally, or vertically.

A perfect example of this could be the wings of a butterfly. Even though they are not perfectly symmetrical, they appear to be the same and identical on both sides.

ii) Rotational Symmetry

This type of symmetry occurs when a design element is reflected from the central point. Just like reflectional symmetry is reflected from a straight line, rotational symmetry is reflected from just a single point.

Just like flower petals bloom from the centre and radiate outwards from its centre point, demonstrating perfect rotational symmetry.

iii) Translational Symmetry

This type of symmetry occurs when a design or an element is repeatedly used in the same orientation. Unlike the first two types, translational symmetry is not reflected and does not need to be placed in proportion with the other images or the central point or axis. The element can be placed anywhere in the graphic design as long as the orientation is consistent.

For example, when you walk on sand, the way the footprints are formed seem to be mirroring each other.

Some examples of website designs with symmetry are:

Asymmetry

In contrast to symmetrical designs, asymmetrical design does not have a particular balance from any side of its central point or axis. Even though it is unbalanced, it still gives a natural look to the design.

Like we observed, symmetry seems to be more predictable and easier to perceive than asymmetry. Although this helps to create a good user experience, the simplicity can make it monotonous and boring as well.

Since they are unpredictable and have fewer rules, they feel very natural. This also makes the user’s brain more inclined to think harder and make sense of it, and also grabs the user’s attention.

Unlike symmetrical designs, asymmetrical elements do not necessarily exercise visual balance to make the whole picture easily perceivable in the first glance. This helps the visitor to focus on the details of the design rather than the whole picture.

Some examples of asymmetry are:

When to Use Symmetrical and Asymmetrical Designs?

For traditional uses, designers, when they want to portray trust or confidence, symmetrical layout and elements work the best. Symmetrical designs give a feeling of balance. For example, Apple’s website leverages many symmetrical elements. The information about Airpods and Accessories are placed in two boxes of equal sizes. The red lines indicate the alignment of text from each box. The designer has also used the same colours on each side to balance the layout.

Some brands, like Apple, are known for creating beauty through simplicity and symmetry. Asymmetry is more appropriate for other brands where the designer wants to draw the user’s attention, such as call to action. Asymmetry can also be used when the designer wants to convey movement. For sports brands, like Nike and Gatorade, creating a perception of movement is important and they do so using asymmetrical elements.

Conclusion

Symmetrical and asymmetrical designs each have their pros and cons that makes them special in their own unique way. Designers should ideally include both symmetry and asymmetry in their design layout. They can use symmetrical elements and layouts when recall is important, and asymmetrical when visual interest of the user is more important.

Designers could also blend the two types of design by adding a random mark to symmetrical form so it adds some asymmetry to them. Contrasting symmetrical design elements against asymmetrical design elements is important. By using rotational and translational types of symmetry, designers can indicate a sense of motion, rhythm and flow.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]