Creating Off-Center Balance: Using Asymmetry in Web Design

Asymmetry is simply the absence of symmetry. But asymmetry does not have to lack balance and harmony.

Asymmetry and asymmetrical design can create a sense of energy and tension but also a sense of compositional harmony depending on use. While most people think first of symmetry as a naturally-occurring phenomenon – think of Leonardo da Vinci’s Vitruvian Man or the look of an animal’s face – asymmetry is also a natural phenomenon in different ways. Humans for example, tend to be dominantly left- or right-handed.

The uses of asymmetrical design can be wide-ranging. Often the technique is used to create a sense of chaos or confusion. Asymmetry can emphasize motion or action. It is most frequently used to establish a feeling of dominance and focal point on the screen.

There is not right or wrong to designing using asymmetry or symmetry. Some sites will even mix elements of each in the formation of the big picture. You can read more about symmetrical design in this previous Codrops post.

Asymmetrical Design Uses

What kinds of projects can benefit from asymmetrical design?

Simply, almost all of them.

The technique — when executed well — adds a great deal of contrast and dimension to projects. The key is to structure elements so that a nice balance is created. You don’t want your page to have a lopsided feel. Take special care to arrange elements in a way that match the tone of your project, with balance or not.

In web design, most of the conversation around symmetry refers to horizontal symmetry or asymmetry and the part of the site that appears above the scroll. Asymmetrical design can create balance or motion.

Most commonly asymmetrical design techniques are used in combination with items that have symmetry. Think about a website with a 350-pixel sidebar, for example. Immediately you have created an asymmetrical outline because the body of the website and sidebar are different widths. Photo placement often happens off center as well, creating an element of asymmetry.

Images and Text

One way to create a sense of balance is to pair unlike elements such as images and text. This is a common technique used by numerous designers.

The trick is in how you put the two together. It takes more than just a picture and a few words. The mood of the image and text (even the typeface) must be complementary.

One of the key elements in making this technique work is linking the text and image. Do the words and image “say” the same thing? Are they designed in such a way that they seem to connect? Do the weights of the typefaces mirror the weight in the image?

Images and Space

Space is paired with a heavy element (images or text) to create a sense of weight or motion. The emptiness of the space contrasts with the fullness of the rest of the page.

Look at the direction items in the image are pointing. Is there a face looking left? That creates a feeling of motion that moves a user from the left to right on the page. Is there a mountain peak? That directional point will move a visitor’s eye from bottom to top.

Another way to create asymmetry is to block off portions of the viewable area. Sidebars and color blocking are simple ways to do this. (Commonly when using this concept, the overall look is asymmetrical although the design has a distinct sense of symmetry within each section of the site.)

Color

Asymmetry can also be created with color choices. Sharp contrasts in hue – white vs. black, for example, or opposites on the color wheel – can feel off balance and even chaotic.

Asymmetrical color patterns are also natural and have an odd sense of balance to them. In many species, male animals will have almost perfectly symmetrical color markings whereas females seldom do. (It is thought that this naturally-occurring phenomenon is to help the “more attractive” males lead prey away from females and offspring.)

Balanced color schemes are based on principles of the color wheel. Combine and make color selections that fall outside these classic combinations for less symmetry and harmony in color.

Experiment with backgrounds that contrast with the images or text on top. Immediate asymmetry is created by pairing a pale, beige background with neon purple type – a rarely used pairing. Another common technique is to create an item with lots of color and pair it with an item containing little or no color.

Conclusion

Asymmetrical design can be tricky and beautiful. I love the element of surprise asymmetry creates almost as much as the planned balance that emits from a well-done asymmetrical design. Some of the best designs pair strong images and text for balance, creating a distinct eye track from the image to words on the screen.