How to Use Asymmetry and Symmetry in Design

Rangan Das

December 1, 2022

With brand designs driven by a purpose, it's essential to look at the visual balance before you publish. In this blog, we explore how using asymmetry and symmetry can get the best out of your designs.

A key to effective communication through the visual medium is the understanding of fundamental design principles. Balance is one such fundamental aspect of design. A balanced design allows a visual element to achieve greater harmony with its audience, allowing the viewers to take in all the information with minimal effort. This is true for any visual element — a photograph, a movie, a poster, your company logo, or your website.

A poorly designed poster with a lot of visual clutter [top left] and a well-balanced poster exhibiting symmetry [right]. Photo by Yonghyun Lee on Unsplash

Balance in art is a crucial element. It does not matter if you are creating a symmetrical design or an asymmetric one. Like a poster, the posts you share as a brand on social media can either have a long-lasting impact on the audience or may completely fail to communicate the core message. 

In this article, we explore how we can use balance, symmetry, and asymmetry in design to better communicate with our audience while looking at how these were used in different places — TV shows, movies, paintings, websites, logos, and more. 

What is symmetry (and asymmetry)?

When talking about balance and symmetry, both terms are often used interchangeably, but they are not the same. One might assume that symmetry and balance are synonymous in general. But there is much more to the idea of balance than symmetry when it comes to design principles.

The visual quality of symmetry is the repetition of elements within an image along an axis, a path, or a center. The goal of visual balance is to make a design appear evenly distributed throughout the composition. On the other hand, anything that is not symmetrical is referred to as asymmetry.

Your design may get lost in the crowd if it is too perfect, or too symmetric. In the end, it might not have the desired effect. Because of this, some designers use asymmetry to break free from the limitations and predictability of symmetry. 

Asymmetry can be risky to work with for both novices and experienced graphic designers because the wrong composition can make the design appear chaotic. But true balance takes advantage of both symmetry and asymmetry.

An example of symmetry in classical art. View of the palace and gardens of Versailles, seen from the avenue de Paris, Pierre-Antoine Patel, 1668. Source: Google Arts and Culture.
Pather Panchali train scene
An example of an asymmetrical shot from Satyajit Ray’s Pather Panchali. Source: Dominik Formanowicz, Medium.

The "12 apostles" scene in the second episode : r/MrRobot
Symmetry has been extensively used in cinematography too. Here are two shots from the TV show Mr. Robot exhibiting reflectional symmetry. Source: Reddit
Asymmetry [top] and symmetry [bottom] in packaging design. Source: Kimp & Packaging Digest

What is balance?

Balance determines the visual weight of your composition. It determines how each region of your design attracts the attention of the audience. There are four ways in which you can achieve balance in your design. 

Symmetrical balance

When your composition has the same visual weight on both sides of an axis, you have achieved symmetrical balance. Visualize two identical mirror images facing one another on all sides of a central axis. Balance like this invokes grace and simplicity. Although attractive to the eye, it is also very predictable.

Asymmetrical balance

A composition with asymmetrical balance has unequal weight on both sides. This visual technique, which has a large focal point on one side and several smaller, less interesting focal points on the other, is more visually intriguing than its symmetrical counterpart.

Top best 2019 logo design trends | Turbologo
Examples of asymmetry in branding. Source: Turbologo

Radial balance

Radial balance describes the way visual components spread outward from a central point. Key examples include the Target company logo, and the BMW, Mercedes-Benz, and Mitsubishi logos. 

BMW, Mercedes-Benz, and Mitsubishi logos. Source: Logopedia
Wikipedia’s home page at www.wikipedia.org is a classic example of radial balance.

Balanced mosaic

Consider mosaic balance as organized chaos that, despite appearing to be noise because it lacks a clear focal point, creates balance. No single element predominates the composition; all elements share a similar emphasis.

How to print out a Pinterest board — Fran Flynn Courses
Pinterest is a great example of a balanced mosaic since every element in the visual field should get equal importance. By filling the visual field with multiple elements that deserve attention, it creates a sense of balance. Source: Fran Flynn Courses

The different types of symmetry

While balance is a design principle, symmetry is a tool to achieve balance. Here are the different types of symmetry you can implement in your design. 

Reflectional symmetry

Logo, company nameDescription automatically generated

Just picture slicing an apple in half. Reflectional symmetry is when both sides cross a central line and are mirror images of one another. This method, also known as bilateral symmetry, can be applied vertically, horizontally, or diagonally. Reflectional symmetry can have perfect symmetry, in which case the image is identical on both sides. An example is the Airbnb logo.

Translational symmetry

Audi Logo and symbol, meaning, history, PNG, brand

Imagine the same shape occurring repeatedly. When visual components appear repeatedly throughout a space, this is known as translational symmetry. This cycle can be repeated in any direction and for any amount of time. 

Rotational symmetry

Target Logo and symbol, meaning, history, PNG, brand

Rotational symmetry can be visualized as spinning windmills and moving car wheels. This technique, also known as radial symmetry, involves all visual elements rotating at any angle around a central point. For capturing a sense of motion, dynamic action, or speed, this kind of symmetry works best.

Glide reflective symmetry

Everybody has noticed footprints in the sand or snow. Consider how every step creates a reflection of the foot to the opposite, but due to movement, each footprint doesn't match the other.

A variation on reflectional symmetry called glide reflectional symmetry involves moving each mirror image from its original position. Like rotational symmetry, it suggests forward motion.

Inverted symmetry

When a portion of an image is reversed and repeated across an axis, inverted symmetry is produced. Like reflectional symmetry, but the other way around and not mirrored.

Biaxial symmetry

Sun Microsystems - Wikipedia

When both the x and y axis are reflected to make copies of themselves, biaxial symmetry is produced. On the top, bottom left, and right of these, there are symmetrical patterns (horizontal and vertical axis). Learn how to draw mandalas. This pattern is frequently used with radial symmetry in patterns like snowflakes, patterns, and architectural designs.

Near symmetry

In drawing and painting, near symmetry, which refers to minor variations of any symmetry type, is the most widely used symmetry type. Imagine it as any of the earlier symmetry types we discussed, but with a few minor flaws. Anytime you use your judgment to draw something symmetrical, you rely on near symmetry because you are content when it appears to be close enough and not with mathematical precision. Examples are the Nintendo Switch and the new HP logo. 

Asymmetry

Composition is probably asymmetrical if it doesn't fall into one of the categories. Asymmetry presents a challenge and a benefit to you as a designer. Because our eyes naturally find balanced, symmetrical designs to be more interesting and beautiful, these designs tend to be more engaging. The Google logo is famous for its implementation of asymmetry. 

Examples of balance in art and design

The best way to understand balance (and how you can use symmetry and asymmetry to achieve that) is to have a look at some examples. 

Apple

Graphical user interface, websiteDescription automatically generated

We can find an excellent example of reflectional symmetry on Apple’s Mac page. The artwork with the MacBook is placed in the center, and the screen and the keyboard are opened symmetrically, making it somewhat biaxially symmetrical too. 

The lower section of the web page maintains the same reflectional symmetry, showcasing the different models available. Every header text is center aligned on the web page from the very beginning, allowing the viewer to keep their focus right in the center of the page.

Apple also makes generous use of white space throughout its website. This avoids visual clutter, allowing users to relax. Every section has just the right amount of visual information, which keeps the website looking balanced. 

Microsoft

For a similar task, Microsoft takes a completely different design approach. Microsoft’s Surface devices are showcased using asymmetrical design. The web page puts text on the left and images on the right.

The brand uses this design throughout the rest of the web page. Since we tend to read from left to right, Microsoft keeps important information to the left of the screen. This allows the viewers to easily read about the key features of the Surface product lineup. 

Microsoft places the images on the right to add context to the textual information. However, at certain sections, Microsoft switches the layout, moving the images to the left and the text to the right. This makes the website less boring as sudden changes disrupt the predictability. 

With a healthy mix of images, videos, and animations, the brand keeps the website well-balanced. 

Pocket

Pocket uses a balanced mosaic design to arrange all its content in a grid. Since the website is a content aggregator, this form of design makes sense. However, Pocket still uses a lot of white space to keep its web page looking tidy. 

Wrapping up

Developing a new design for a product or branding can be a challenging task. But knowing the fundamental design principles help. For collaborative design development, creative collaboration platforms like Artwork Flow can be quite useful. With tools like online scale or online color extractor, achieving visual balance becomes easier.

Related Articles