Design Superstars

Balance and Harmony: Using Symmetry or Asymmetry in Web Design

December 6, 2012 Design No Comments

112 Flares

112 Flares


When designers think of symmetry, balance often comes to mind. But asymmetry can create a sense of balance as well. Each design technique can provide unique design successes and challenges. The first step is determining what is best for your project.

Symmetrical Design

The concept behind symmetrical design is based in proportion, harmony and balance.

Symmetry occurs when two sides of an object or plane have mirroring halves or revolve around a central axis. While many people immediately think of symmetry as occurring from left to right, it can be vertical, horizontal or radial in nature. And it is seldom perfect. It is just very similar.

Why use a symmetrical design scheme?

Symmetry is based on natural order. Human faces are symmetrical, as are many types of flowers and even shapes based on mathematical concepts. Using this natural order creates a pleasing effect for those who look at it. The result is a feeling of harmony, balance, order, unity and cohesion. The effect is calming and soothing and seldom contains feelings of chaos or rapid excitement.

These concepts are good for websites that want to establish a relationship and trust with users. The concept works great for e-commerce, news and information, and government. The one downside to symmetrical design schemes can be a perceived lack of energy. Symmetrical images sometimes do not have the dominance and excitement that are created by asymmetrical parts.

The concept of symmetry does not fit in a simple box. There are varying degrees of symmetry – horizontal, vertical and radial – based on shape and how an item looks.

Horizontally symmetrical items have left and right sides that approximate each other. In commonly horizontal symmetry the overall shape of each side of an object is the same (visualize two rectangles side-by-side). But the concept can be a little looser than that. Approximate horizontal symmetry occurs when the two sides have the same outline but do not mirror each other perfectly (visualize one side with a rectangle and the other using two squares to fill the same space). Approximate symmetry is the most common form of symmetry, because of its imperfection.

Vertical symmetry works much like horizontal symmetry, only the top and bottom halves of the visual display mirror each other. This concept is often used when working with groups of frame and in mobile design (where the common aspect ratio is more vertically-oriented). Some designers also consider vertical symmetry when creating “screens” that appear as a user scrolls through a site. Vertical symmetry, like horizontal symmetry, can be rather precise or approximate.

Radial, sometimes called rotational, symmetry occurs when balance happens around a center point (visualize a bulls-eye). Items that have radial symmetry will have mirroring halves no matter where they are cut. This design technique is the least-commonly used for of symmetry for web design because it is fairly dependent on using a more circular shape, although some radial forms are square.

Asymmetrical Design

Asymmetry is a little harder to define. It is, in essence, the lack of symmetry but it is not really the opposite of symmetry.

While asymmetrical designs can create chaos, tension, confusion and excitement, they also have a distinct balance.

Why use an asymmetrical design scheme?

The primary reason most designers go for this style is to create a focal point or center of attention. Asymmetry creates a natural path for the eye – to the fullest, most brightly-colored or part of an image with the most action. It creates a sense of hierarchy and flow.

Sites that can most benefit from asymmetry are those who want to create an element of surprise or intrigue. The technique is commonly found on sites for things that would be classified as edgy, dark or off-the-beaten-path. Designers and photographers often use asymmetrical design concepts to create their portfolio sites.

Often an asymmetrical design scheme will pair different types of elements – such as a photo and text, different size frames, space and images – to create balance or what some might even argue to be a form of symmetry.

What Should I Use?

There is no perfect formula for picking whether to design around a symmetrical or asymmetrical scheme.

Working the symmetry can be easiest for more novice designers. It is less complicated to create balance using the theory of mirroring parts that with parts that don’t necessarily match. Working with a document grid is one easy way to create a symmetrical design with ease. Most grid systems have both horizontal and vertical symmetry built into the framework. Radial symmetry is great for smaller items or to create a sense of movement and flow. (Think about the universal sign for recycling; it is a great example of radial symmetry.)

Designing with asymmetry can be a little more difficult and should be well-planned. Most designers find it easiest to start with frames that include asymmetrical images in an overall symmetrical design scheme and work up to design outlines that are fully asymmetrical. The best advice is to follow your gut. Do the look of the site and the content match? Do they feel in sync with each other? Does the site feel balanced (even if you are using asymmetry)? If it feels off or wrong, you should probably consider another visual concept.

Combining Symmetrical and Asymmetrical Design

The most effective designs tend to use both concepts. Consider a symmetrical site outline but with images that are more off balance. Or look groupings that that have unbalanced sides with images that include perfectly mirrored photos. By using both techniques together, you can create a site with great visual potential.

About the Author -

Carrie Cousins has more than 10 years experience in the media industry, including writing for print and online publications, and design and editing. You can connect with her @carriecousins.

112 Flares Facebook 5 Twitter 29 Google+ 3 StumbleUpon 70 112 Flares ×