Web Design Symmetry and Asymmetry

Posted in Web Design • Posted on 3 Comments

Balance is an important concept in web design. To create balance, one must know how to use symmetry and asymmetry to create beauty and contrast. These tools are integral in creating a unifying and aesthetically pleasing web design. It is important to understand this concept properly before you use it.

What is Symmetry?

We see beauty in things or people who are symmetrical. Symmetry is always a factor in aesthetics and beauty, but what does it really mean?

Symmetry is the sense of harmoniously pleasing balance and proportion. There is balance of similarity in an object, proven by geometry or physics. Gravity is an important factor in natural symmetry, that’s why most things in nature evolve towards symmetry. That’s why we see beauty in symmetry.

The most common type is reflection symmetry, also known as bilateral symmetry. Basically, this means having ‘two matching sides’. Which means that if you fold the object in half on its median axis, both sides have essentially identical halves.

Nature is filled with examples bearing bilateral symmetry. Butterflies, leaves, sea life, etc. exhibit this form of symmetry. Almost all plant and animal life exhibit reflection symmetry, only a few do not. Of course, bilateral symmetry in nature is only approximate, and do not perfectly match up when folded on the middle axis.

One perfect example is the human body. The left and right halves of the human body perfectly mirror each other. Internally, it is not the case, as body organs often do not mirror each other.

There are many types of reflection symmetry, such as horizontal (most common in nature), vertical, diagonal, etc.

Asymmetry

Asymmetry, on the other hand, is described as the absence of symmetry. Compositional balance can be achieved in asymmetry.

Asymmetry is also common in nature and biology. Most of us are either right-handed or left-handed. We are also either left brain or right brain dominant. Our internal organs do not perfectly match up. Asymmetry creates energy and tension, while symmetry is static and orderly.

Beauty in Asymmetry (Photo from Wiki)

Asymmetry in Art by Wassily Kandinsky

There is a feeling of movement in asymmetry, that is why it seems more interesting in art and architecture. There is freedom in asymmetry, it is not contained or inhibited, unlike symmetry. On the downside, symmetry can be tiresome to the eye. If not done correctly, it can look messy or confusing.

Symmetrical vs Asymmetrical Web Design

Balance is integral in web design– thus the proper use of both terms, symmetry and asymmetry, is important. Symmetry in web design is often discouraged because it makes the layout look boring and static. There is a lack of dynamic energy in the design, which may not hold the viewer’s interest.

But symmetrical web design isn’t always that bad. It just depends on what your objectives are. Symmetrical web design does have its own advantages. Symmetry in web design gives order and balance. It looks clean, which is important especially if the website is professional and an information vehicle.

Asymmetrical web design is interesting and dynamic. Symmetry helps us remember, while asymmetry grabs interest.

Duuel

http://duuel.com/

A rather witty example to show symmetry in web design. Duuel is dedicated to finding the finest designers-slash-gunslingers, who can handle a duel with other fellow designers. It shows the best of talents dueling against each other, thus it is only right to use reflection symmetry, showing the equals of talent and intellect showcasing what they have to offer.

Another form of symmetry, which is rotational symmetry, can help create rhythm and flow. It directs the viewer’s eye on where to start and where to go next.

Translational is another type of symmetry, wherein an object is repeated across a plane, still retaining its same orientation, size or form. If you know about the Gestalt principle, you’ll already be familiar with the idea of our brain being fooled into leading us where it wants to go, and also for creating balance in our head.

Duplos

Duplos

Duplos is a great web site that makes use of asymmetry. Despite the fact that none of the elements mirror each other, it makes use of compositional balance. That’s why the web design still looks beautiful and interesting at the same time.

You can also combine both symmetry and asymmetry. You can create harmonious balance by integrating symmetry and asymmetry in your web design. Use symmetrical factors to make layout look professional and sleek, where information is placed to make it easy to remember. Use asymmetrical elements to grab attention, where viewer interest is important.

Google Website

Image from Web Designer Depot

A perfect example is Google’s new website. We are all familiar with the old Google website. It is perfectly symmetrical, making use of white space, and with no use of any creative elements whatsoever. It’s a very useful website, but nonetheless quite boring and static.

Now the web site gives you an option to make design changes, where you can choose from a variety of themes and images, even your own Picasa pictures. The Google logo is now white instead of the familiar multi-colored logo. Everything else is just the same: the links, the Google logo and search bar in the center. The new site has married symmetry and asymmetry quite successfully.

Asymmetrical objects are more outstanding visually than symmetrical objects. For this, the general layout and background should be visually passive, thus symmetry is important for these elements. Asymmetry should be used for individual designs that are meant to draw attention and break the monotony.

More Examples of Impressive Web Design

Almost all web design layouts do not use symmetry or asymmetry exclusively, but instead uses elements of both. Here are some great web design examples that integrate symmetrical and asymmetrical elements:

Emily White Smith

Great Bearded Reef

Ambermiro

Fix Outlook

Creative People

Lotie

It Looks Good

To sum up this article, here are a few tips on how you can use symmetry and asymmetry to your advantage:

  • Symmetry is great for the basic layout structure.

Repeated elements create a calm and balanced space. Translation symmetry can create balance, at the same time maintain the space for the text and images.

  • Asymmetry is great for grabbing the viewers’ attention.

Too much symmetry is dull, as what we have displayed countless times. To make your web design layout more interesting, add a few asymmetrical objects here and there, to grab attention and wake the sea of monotony. Asymmetry is heavier visually, so it directs the viewer’s eyes to the intended area.

  • With asymmetry, compositional balance should be in mind at all times.

Yes, asymmetry is interesting, but it can also look unpolished and unfinished. Since the different elements have different weights, be careful how you arrange your elements so they look perfectly balanced on all sides. This will control your design flow, thus the end result will look beautiful, interesting and polished.

  • Follow your instincts.

We have an eye for knowing what looks good or not. We have been trained, innately it seems, to see if there is visual balance or not. If the design looks too cluttered, too boring or too confusing, it probably is.

  • Stick to basics.

Don’t over-analyze the web design as a whole. You are an artist, but remember that the majority of your viewers aren’t. Do not over style or over think your design. Just look at your design as a common person. Avoid confusing your layout so that the flow of the information and design goes smoothly.

52 Written ArticlesWebsite

Rachel Arandilla is a curious subject -- she appreciates things that are quirky & clever. She loves spontaneity and adventure. She is a carefree soul, has a deep love for travel, culture and languages. And she's beginning to wonder she keeps on referring to herself in third person perspective.

3 Comments
  • Alessandro

    Sunday, August 28th, 2011 13:03

    1

    Very interesting! Thanks

    0
  • funny

    Sunday, September 25th, 2011 13:48

    2

    wow!this is a nice work!

    0
    • funny

      Sunday, September 25th, 2011 13:49

      3

      oh?thank!

      0
  • funny

    Sunday, September 25th, 2011 13:48

    2

    wow!this is a nice work!

    0
    • funny

      Sunday, September 25th, 2011 13:49

      3

      oh?thank!

      0
  • Alessandro

    Sunday, August 28th, 2011 13:03

    1

    Very interesting! Thanks

    0

Comments are closed.

54.167.138.53 - unknown - unknown - US