Examples of Asymmetry in Design

Asymmetry in Design

If you look at print design and web design, there are examples of asymmetry everywhere. You may just not realize it. Asymmetry is a vital part of design, but it’s important to understand how to use it. You can use it to your advantage to create beautiful design work that is visually compelling. Let’s take a look at asymmetry and how you can apply it to your design work.

What is Asymmetry?

Asymmetry is when the parts of a design are not equal. This means that one part of a design can be bigger than another. The design can’t be divided equally, such as in half.

Where is Asymmetry Used?

Asymmetry is used everywhere. You just may have not realized it. For example, this site has an asymmetrical design. In the example below, you can see that the main content section is roughly twice the width of the sidebar. That is typical for most sites.

asymmetry web design example

This principle isn’t just pulled out of thin air. It’s actually based on what’s pleasing to our eye. There’s a science behind this, called the golden ration. The golden ratio is 1:1.618, and you’ll find it in more than just websites. It came from the Fibonacci system, which is a mathematical proportion. You’ll find it in nature, from flowers to seashells.

golden-ratio

You can see how each section is proportionate to the next. This is much more pleasing than if the section were divided into squares. It is neat and orderly, but still keeps you visually stimulated. That’s why you don’t see a lot of websites divided in half.

How Does Asymmetry Work?

A lot of designers run straight to dividing their page in half, and focus a lot on an equal grid. While grids are good, if used properly, asymmetry is your friend. A common design question I hear is “If one section is bigger than the other, won’t it overpower the page?”

The answer is a resounding no, but it’s important to understand why. The answer is balance. Let’s say you have a large section of text, and then the right column seems non-existent. The solution is to add an element to the right side in order to balance out the page. You might use a strong visual color, such as red, or really bold text to balance out the weight created from the large left side section.

Conclusion

From brochures to business cards, asymmetry is everywhere. Next time you sit down to a project, remember what we talked about and set up an asymmetrical layout for your work. Keep it balanced, and you’ll have a design that keeps people looking. Do you have any questions about asymmetry? Feel free to leave them in the comments section below.