What Is Asymmetrical Balance and When Should You Use It?

classic blue coupe die cast model

What Is Asymmetrical Balance and When Should You Use It?

Referencing the principles of design to understand asymmetrical balance is useful for creating dynamic, engaging website layouts.

The principles of design are used as a loose guideline by many working in digital and traditional art. The principles are proportion, unity, emphasis, rhythm and balance. They are useful in web design for the same reasons they are useful in other artistic disciplines: drawing viewers in and creating an appealing visual. In web design, making site layouts attention-grabbing and easy to interact with is vital to getting page traffic and habitual users.

So where does balance fit into all this? Balance refers to the distribution of visual weight on a page or screen, with an implied axis in the center. This means the left and right (or top and bottom) sides of a page should be designed with awareness of how they affect each other visually. It helps images look complete, while an unbalanced image will make viewers uncomfortable or leave them with the nagging sense that something is left unfinished. Appropriate balance makes pages look professional, clean and engaging. When done with care, it can guide a viewer’s eyes to the most important sections of a website.

What Types of Balance Exist?

There are four kinds of balance, though two are most commonly known: symmetrical and asymmetrical. Symmetrical balance generally looks like a mirrored image — an example is two large blocks on one side, and two similarly large blocks on the other. This look conveys solidity, tradition and logic. Asymmetrical balance is trickier to pin down because it has more variation, but it should create the same sense that distribution around an axis has been measured even if the forms themselves  are different.

Radial balance refers to a design that has elements emanating from a center point, like rays from a sun. Mosaic balance does not have a center point or axis to determine placement. Instead of diverting the eye to certain forms first, all objects have the same level of emphasis, scattered though they might be.

There are three kinds of symmetry: reflection, rotational, and translational. Reflection symmetry is the most commonly referenced kind, and it describes an image that is exactly the same reflected across a center point. Rotational symmetry refers to identical items that cluster around a center point. Translation refers to when forms are repeated in different locations, like wood beams, and has some overlap with the design element of repetition.

What Is Asymmetrical Balance?

working in a group

Asymmetrical balance requires more thought and juggling of forms than symmetrical balance, but it has the payoff of a more dynamic, engaging design. Color, size, and shape are some of the factors in what gives an aspect of the design visual weight. Additionally, visual direction works with visual weight to direct attention toward different sections of a design — if two figures are placed close together they have more weight, and if a “heavy” form is placed close to the axis its weight is lessened. The placement of objects and distribution of weight leads the eye around the layout in a path that prioritizes more important information.

The use of negative space also takes on an important role in asymmetrical balance — there is inherent asymmetry between negative space and forms on a page. Lighter and brighter colors carry more weight than dark and dull ones, so an expanse of empty space, in the form of a column or margin, helps balance a series of objects heading the top of the page. Distance between objects determines the tension between them. Location on the page helps determine weight. Items that are closer to the center have less weight, just as sitting closer to the center of a seesaw has a less dramatic effect than sitting on the seat at the end.

The goal when employing this kind of balance is to consider all of these factors and make sure weight on both sides of a layout are more or less equal. A wide, neon-pink rectangle on the left has to be balanced by the other side, whether by large sections of blankness or by a trio of bright circles descending the page.

When Should You Use Asymmetrical Balance?

apple-business computer connection

Designs that need more attention can benefit from the use of asymmetrical balance. Home pages, page headers and advertisements are some of the situations where immediate appeal and uniqueness will help convince viewers to either delve deeper into your website or read what you have put in front of them. This kind of balance is probably not as ideal for a traditional law firm or government website, though there may be exceptions. However, it can give off exactly the kind of intriguing first impression you need for projects that are splashy, fun and nontraditional. Below are some more specific opportunities to use this technique besides as a way to engage viewers.

Employing It Along With Symmetry

asymmetrical balance macbook pro on white surface

Asymmetry can be used in combination with symmetry to add contrast to layouts that require more structure. If a page features a grid, asymmetrical sidebars will add visual interest. A symmetrical graphic as a heading may be contrasted by asymmetrical columns below, with important background information in the larger, more commanding column. Using these two aspects together can make a website look clean and planned, while using a more varied kind of balance helps show different sections on a website.

Using the Golden Ratio

The golden ratio is a good point of reference for layouts that are organized as very consistently shaped rectangles. The ratio is a useful tool in determining compatible sizes for these columns and blocks. Either the ratio itself (1:1.618) or the visualization of it can demonstrate complementary sizes and lead the eye in a particular path. Seeing a graphic of the ratio broken down into increasingly smaller rectangles is helpful because screens are rectangular and you are working in a rectangular space as a result.

Highlighting Important Material

This kind of balance helps determine a hierarchy of importance by guiding the eye to more important information, which should look heavier on the page, and then to details that should be read after the preliminary information. This hierarchy can be helpful to those who are inundated with text and graphics all day and may have information fatigue. Important information will be easy to pick out and users always appreciate the directness.

Organizing Content-Heavy Pages

Large, famous brands with a lot of different categories of information and links to display often use very asymmetrical, complex layouts in order to fit it all. News websites with many article thumbnails often have rows for the many sections of the publication, with lots of subcategorization and graphics denoting these sections.

How Do You Create Asymmetrical Balance?

Giving a page a satisfyingly asymmetric design requires thought and attention to the big picture, but learning to have an eye for balance can make the process more intuitive. Look around for different examples of this type of balance, and you will see how common it is.

Newspaper columns and journals are often asymmetrical and are able to use such layouts to extend the professional look of their product. It helps make room for more columns of text and sidebars, and adds color variance even if the publication never breaks from black and white. Text sizing, spacing and density create shades of gray when viewed as a mass. The denser and smaller the text, the darker the color of the text block.

For more visual-heavy designs, considering not just the color and size but the content of the photographs is helpful. Bold background colors or stark lines in a picture can add gravitas, and weight, to that area of the layout. For example, railings in a photo provide a convenient grounding spot for text and add weight because of the sharp line they cut.

Determining Weight on a Page

man reading car magazine

Most page designs require more creative thinking about the forms and elements involved because they may be more complicated than the simple examples commonly used to illustrate asymmetrical balance. One of the more common examples of this balance used in textbooks is a graphic that shows a large circle on one side and two smaller circles on the other side. That graphic demonstrates how size can carry weight, but plenty of other qualities of a form also determine its weight on a page.

Location is a factor in how commanding a form is. Heavy objects located close to the axis aren’t as heavy as they would be on the edges of the page. Color, too, is important. Bright or pale colors have more weight than dull ones, so blank white space can offset a large, bold image in one section of your layout. Distance between objects, or tension, makes them lighter. Regularly shaped graphics or text backgrounds like circles, squares and triangles are more impactful than irregular ones, so shape also affects weight.

When it comes down to it, weight in graphic design is a measure of how much attention an element takes up compared to everything else on the page. Considering color, size, distances and location helps give a sense of what an image’s weight is, and over time it can help you develop a more intuitive sense of how to balance a layout.