Symmetry And Asymmetry In Web Design

Symmetry is beautiful. That’s how most of us see it. Symmetry leads to a sense of harmony and pleasing aesthetics. Symmetry is also often associated with being formal and static and even a little boring. Asymmetry, on the other hand, while lacking in inherent beauty is often seen as more interesting, more dynamic.

If symmetry is beautiful, yet sometimes static and boring and asymmetry is dynamic and interesting without the benefit of being beautiful by default, which should we use in design? Is one preferred over the other or do both need to work together to create successful designs?

What is Symmetry?

Real objects are almost never perfectly symmetrical, yet nature seems to evolve toward symmetry. Gravity likely plays an important role in natural symmetry and it’s perhaps this natural evolution behind our seeing symmetry as beautiful.

There are 3 types of symmetry.

• Reflection symmetry ( bilateral symmetry ) is mirroring an element around a central axis. The axis can be in any direction or orientation as long as what’s on one side of the central axis is mirrored or reflected on the other. Natural forms that grow or move across the earth’s surface develop a reflective symmetry. Examples include butterflies and the human face.

• Rotation symmetry ( radial ) is the rotation of elements around a common center. Like reflection symmetry it can occur at any angle or frequency as long as there’s a common center around which to rotate. Natural forms that grow or move perpendicular to the earth’s surface develop rotational symmetry. An example would be a the petals of a sunflower.

  Rotational symmetry without reflection symmetry is sometimes used in design to portray motion, speed, and dynamic action.

• Translation symmetry ( crystallographic symmetry ) is the location of elements in different areas of space. Again it can occur in any direction or at any distance as long as the basic orientation of the element is maintained. Natural forms develop translation symmetry through reproduction.

  Translation symmetry can create rhythm in designs and is used to show motion, speed, and dynamic action. It can also be used to create background patterns which can be static and passive.

In addition to their perceived beauty symmetrical forms are usually seen as figure over ground. They receive more attention and are recalled easier because they are simpler than asymmetric forms. Symmetry conveys balance, harmony, unity, stability, consistency, elegance, and classicism.

The downside to symmetry is that it can be static and formal and often uninteresting. Symmetry creates passive space and can be too stable, too balanced, to harmonious, and too unified.

What is Asymmetry?

Asymmetry is naturally the absence of symmetry. In a single form asymmetry also implies a lack of balance, however a compositional balance can be achieved that is asymmetrical.

Asymmetry is also fairly common in natural forms. You’re likely either right-handed or left-handed. Fiddler crabs have one big claw and one small claw. Dolphins have a smaller left lung to make rom for an asymmetrical heart. Rivers meander, trees grow in different directions, clouds take on random shapes.

Perhaps due to the more complex relationships in asymmetrical forms we tend to find them more interesting and dynamic. Asymmetry creates visual tension and prevents objects from appearing static and superficial.

There is more variety in asymmetrical forms which also leads to their being more interesting and more difficult to pull off in design. Asymmetry evokes modernism, forcefulness, and feelings of vitality and movement.

Asymmetry creates active space and leads to unpredictable patterns and greater freedom of expression. Active whitespace is one of the main aspects of a page perceived to be well-designed.

The downside of asymmetry is that the complex relationships and variety can tire the eye and sometimes lead to confusion.

Combining Symmetry and Asymmetry in Design

Earlier I asked which is preferred in design, symmetry or asymmetry. Like most things design the answer is it depends. It depends on what you’re trying to communicate. If your message is one of formality and elegance as in a wedding invitation then symmetry makes sense. If on the other hand you’re creating a design for a growing high tech company then the dynamic nature of asymmetry is likely preferred.

Regardless of the message we typically want our designs to be aesthetically pleasing and interesting and compositionally balanced. Symmetry would have us believe we need it for it’s perceived beauty and asymmetry would have us believe we need it for it’s perceived interest. Asymmetry grabs our attention. Symmetry helps us remember. We want both. What’s a designer to do?

The solution is to put both to use in our designs and let each do what it does best. Seek a harmonious balance between the two in your designs.

Use symmetrical forms where recall is important. Use asymmetrical forms or complex arrangements of symmetrical forms where interest is more important.

While asymmetry is more attention grabbing than symmetry, contrasting symmetric and asymmetric forms is even more attention grabbing than either alone. Try using symmetrical forms to create an asymmetrically balanced design or use asymmetrical forms inside a symmetrically balanced design. I’d probably choose the former, but either can work and again it depends on what you want to communicate with the design.

Use rotational and translational symmetry to create rhythm and flow in your designs. Vary size and shape to alter the visual weight of individual elements. Break up symmetrical forms with a stray mark to lend an air of asymmetry to the form.

Examples of Symmetry and Asymmetry in Design

Symmetry and asymmetry work together on the home page for Ben Hulse Design. The central image is mostly symmetrical, though some asymmetry is introduced in the people looking in different directions. The asymmetry is continued with the location of the text and the colorful rectangles at the top.

BootB is for the most part symmetrically balanced. This is especially true at the top of the design above the curved line where reflective symmetry is used to create balance. The lower half of the design uses translational symmetry between the Top creators and Open pictures sections. Overall a symmetrical balance of asymmetrical forms is present.

31 Three is asymmetrically balanced with the large image on the right balancing the text and smaller images on the left. Notice how the 3 circular images on the left are symmetrical forms and through translation symmetry they create a rhythm and flow leading to or from the large image on the right.

deCode is another example of a design that uses translation of symmetrical forms to create a sense of rhythm and flow in the design. The circle images to the left of the content serve to pull your eye down through the content.

Kandinsky’s Composition 8 is a great example of asymmetrical balance. If you look you’ll notice most of the individual elements are symmetrical forms. By varying, size, shape, density, and color Kandinsky creates an interesting balance.

Rich Brown’s site has some fun contrasting symmetry and asymmetry. The right side of the design is made up entirely of symmetrical rectangles placed in a symmetrical grid. Asymmetry is introduced by the irregular pattern of the darker rectangles as well as the incomplete row at the bottom.

Summary

Symmetry is beautiful. Asymmetry is interesting and dynamic. Both should be at play in most of your designs. Symmetry and asymmetry working together lead to some of the most interesting and aesthetically pleasing designs.

Symmetry is not balance. They are two different concepts. Balance can be either symmetrical or asymmetrical, though the latter generally makes for a better overall design.

Symmetry creates passive space. Use symmetry when you want to enhance recognition and recall or convey elegance and classicism. Asymmetry creates active space. Use asymmetry when interest and dynamic motion are more important.

Look to designs you like and identify how symmetry and asymmetry are used. Both are important to creating well designed pages and sites.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.