Professional Documents
Culture Documents
Design Principles - Compositional, Symmetrical and Asymmetrical Balance - Smashing Magazine
Design Principles - Compositional, Symmetrical and Asymmetrical Balance - Smashing Magazine
A balanced composition feels right. It feels stable and aesthetically pleasing. While
some of its elements might be focal points and attract your eye, no one area of the
composition draws your eye so much that you can’t see the other areas.
An unbalanced composition can lead to tension. When a design is unbalanced, the individual
elements dominate the whole and the composition becomes less than the sum of its parts. In
some projects, unbalanced might be right for the message you’re trying to communicate, but
generally you want balanced compositions.
Note: This is the seventh and final post in a series on design principles. You can find the first
six posts here:
Happiness is not a matter of intensity but of balance, order, rhythm and harmony.
–
Thomas Merton
Assuming you were both about the same size, you were able to easily balance on the seesaw.
The following image appears to be in balance, with two equally sized people equally distant
from the fulcrum on which the seesaw balances.
The person on the left makes the seesaw rotate counterclockwise, and the person on the right
makes it rotate clockwise by an equal amount. The force of each person acts in a different
direction, and their sum is zero.
If one of the people was much bigger, though, the balance would be thrown off.
Unbalanced seesaw.
This image doesn’t feel right because we know the person on the left isn’t big enough to
balance the person on the right. The clockwise force should be much greater, and the seesaw
should be touching the ground on the right.
However, if the larger person slid in toward the center, then the seesaw would be balanced
again.
Here, the force of the larger person is reduced by being closer to the fulcrum on which the
seesaw balances. I’ll trust you’ve been on a seesaw before or at least watched others play on one
and that you have a pretty good sense of what’s going on.
Visual balance is similar. Physical weight is replaced by visual weight. The direction in which
the physical weight acts is replaced by visual direction.
As a reminder, below are definitions for visual weight and visual direction, although I’ll refer
you back to the fourth post in this series (↦ https://www.smashingmagazine.com/2014/12/12/design-
principles-visual-weight-direction/) for more details.
visual weight. This is the perceived weight of a visual element. It’s a measure of how
much anything on the page attracts the eye of the viewer.
visual direction. This is the perceived direction of a visual force. It’s the direction in
which we think an element should be moving if it were given a chance to move
according to the forces acting on it.
You don’t use instruments to measure the forces. You don’t use formulas to calculate whether
everything is in balance. Rather, you use your eye to determine whether a composition is
balanced.
↓
More after jump! Continue reading below
Visual weight is a measure of the visual interest of an element or area in a design. When a
composition is visually balanced, every part of it holds some interest. The visual interest is
balanced, which keeps viewers engaged with the design.
Without visual balance, viewers might not see all areas of the design. They probably won’t
spend any time in areas with less visual weight or interest. Any information in those areas
could easily go unnoticed.
You would balance a design visually because you want to balance the points of interest in your
composition, so that viewers spend time with all of the information you want to convey.
Symmetrical balance.
Symmetrical balance occurs when equal weights are on equal sides of a composition,
balanced around a fulcrum or axis in the center. Symmetrical balance evokes feelings of
formality (it’s sometimes called formal balance) and elegance. A wedding invitation is a good
example of a composition that you’d likely want to be symmetrically balanced.
The downside of symmetrical balance is that it’s static and sometimes regarded as boring.
Because half of the composition mirrors the other half, at least half of the composition will be
rather predictable.
Asymmetrical balance.
Asymmetrical balance results from unequal visual weight on each side of the composition.
One side of the composition might contain a dominant element, which could be balanced by a
couple or more lesser focal points on the other side. One visually heavy element on one side
might be balanced by a handful of lighter elements on the other.
Radial balance.
Radial balance occurs when elements radiate from a common center. Rays of sunlight and
ripples in a pond after a stone is tossed in are examples of radial balance. Maintaining a focal
point (fulcrum) is easy because it’s always the center.
Because everything radiates from a common center, everything also leads to that center,
making it a strong point of attraction.
Mosaic balance.
Mosaic balance (or crystallographic balance) results from balanced chaos. Think Jackson
Pollack paintings. The composition lacks distinct focal points, and the elements share a
uniform emphasis. The lack of hierarchy leads to visual noise at first glance. Somehow,
though, it all works together.
Symmetry And Asymmetry # ↦ ( #Symmetry-And-
Asymmetry)
Both symmetry and asymmetry can be used throughout a composition, independent of, yet
while contributing to, the final balance. You can have symmetrical forms in an asymmetrically
balanced composition and vice versa.
Symmetry is usually seen as beautiful and harmonized; however, it can also be seen as static
and dull. Asymmetry tends to be more interesting and dynamic, despite not being regarded as
intrinsically beautiful.
SYMMETRY # ↦ ( #SYMMETRY)
There are three primary types of symmetry.
Reflection symmetry (or bilateral symmetry) occurs when everything is mirrored around a
central axis. It’s probably the first thing you think of when you hear the word “symmetry.” The
axis can be in any direction or orientation, although it’s often vertical or horizontal.
Everything on one side of the axis is mirrored on the other side. Natural forms that grow or
move across earth’s surface develop reflection symmetry. A human face and a butterfly are
examples.
When the reflection is a perfect mirror image, the symmetry is said to be pure. Much of the
time it won’t be perfect and each side will have slight variations. This is near symmetry, and it’s
more common than pure symmetry.
The symmetry can even occur over multiple axes at the same time. For example, the left and
right half of a composition could mirror each other, while the top and bottom also mirror each
other. Snowflakes show reflection symmetry over more than two axes.
Rotational symmetry (or radial symmetry) occurs when everything rotates around a
common center. It can occur at any angle or frequency, as long as there’s a common center.
Natural forms that grow or move perpendicular to the earth’s surface develop rotational
symmetry. The petals of a sunflower are an example. Rotation without reflection can be used
to show motion, speed or dynamic action. Think of the spinning wheels of a moving car.
Translational symmetry (or crystallographic symmetry) occurs when elements are repeated
over different locations in space. Repeating fence posts are an example. The repetition creates
translation symmetry. It can occur in any direction or at any distance, as long as the basic
orientation is the same. Natural forms develop translational symmetry through reproduction.
You can create rhythm, motion, speed and dynamic action through translation symmetry.
The butterfly is an example of reflection symmetry, the fence posts show translation symmetry, and the
sunflower is an example of radial symmetry.
Symmetrical forms are commonly seen as the figure, as opposed to the ground. A symmetrical
form will carry more weight than a similarly sized and shaped asymmetrical form.
Symmetrical forms convey balance in and of themselves, but they could appear too stable and
too balanced, leading to a lack of interest. Symmetrical forms also lead to passive space
because the negative space is equal all around the form.
ASYMMETRY # ↦ ( #ASYMMETRY)
Asymmetrical forms lack the balance of symmetrical forms, although you can asymmetrically
balance an entire composition. Asymmetry is rather common in natural forms: you’re probably
right- or left-handed; fiddler crabs have different sized claws; trees branches grow in different
directions; clouds have random shapes.
Asymmetry creates more complex relationships between elements, and so it tends to be more
interesting than symmetry. Because it’s more interesting, asymmetry can be used to draw
attention.
Space around asymmetrical forms is more active. Unpredictable patterns are created, and
overall you have more freedom of expression with asymmetry than with symmetry. The
tradeoff is that it’s harder to achieve.
Much in the same way that similarity and contrast work together, you can combine symmetry
and asymmetry (↦ https://www.vanseodesign.com/web-design/symmetry-asymmetry/) to good effect.
Balance symmetrical forms in an asymmetrical way, or balance asymmetrical forms
symmetrically. Break up symmetrical forms with a random mark to add interest. Contrast
symmetry and asymmetry in your composition to make elements get more attention.
Gestalt Principles # ↦ ( #Gestalt-Principles)
Throughout this series I’ve tried to point out how many design principles arise from gestalt
principles. I also hope that as you’ve followed along you’ve seen how different design
principles build on each other.
One of the gestalt principles specifically addresses symmetry and order and certainly applies
to compositional balance. It’s hardly the only principle that applies, though.
The simplicity of symmetrical forms is predicted by the Law of Prägnanz. Gestalt principles
such as focal points and similarity contribute to visual weight. Principles such as continuation,
common fate and parallelism impart visual direction. I also mentioned that symmetrical forms
are more likely to be seen as figure rather than ground.
I hope this idea that the principles of gestalt lead to many of the design principles that guide us
has become clearer as you’ve read through this series. The design principles we follow didn’t
arise out of thin air; they emerged from the psychology of the way we perceive our visual
environment.
Examples # ↦ ( #Examples)
It’s time for screenshots. I have a few more websites than usual for this last article in the series,
and I’ve grouped them according to the four types of balance.
As I’ve reiterated throughout the series, what follows is my opinion. This is how I see the
balance in these designs. You might see it differently, which is fine. Thinking critically about
the designs is more important than our agreeing about what we think.
Thecf162ffe54b7/04-helen-and-hard-opt.jpg)
balance isn’t perfectly symmetrically.) The columns have different amounts of text, for
example.
However, notice the top of the page. Both the logo and navigation bar are centered, but they
don’t appear to be visually centered. My eye wants the logo to be centered on the ampersand,
or at least closer to it. The three menu items on the right side of the navigation bar have more
letters than those on the left. My eye wants them to be the same and wants the center to be in
between the “About” and “People” links.
I think moving these two elements out of center to make them look like they’re visually
centered would balance the composition a little better.
The home page of Tilde (↦ https://tilde.io) is another design that’s symmetrically balanced. Like
Helen & Hard, everything here revolves around a vertical axis running down the center of the
page: the navigation, the text, the people in the image. It’s the same as you scroll down the
page.
(↦ https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4f84a222-b5bb-44a2-9806-
176860ca2156/05-tilde-opt.png)
As with Helen & Hard, the symmetry isn’t pure. Centered lines of text aren’t mirror images, for
one thing. Also, a couple of elements are off: the “Meet the Team” arrow pointing right and the
text at the bottom of the page ending in another arrow pointing right.
Both are calls to action and both break the symmetry, calling extra attention to themselves.
Notice how both arrows use colors that contrast with their background, further increasing the
attraction of these elements.
(↦ https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2cf7f1e-5b34-4bec-ae05-
694da3c2931c/06-carrie-voldengen-opt.jpg)
The mass of the page is a large rectangle that’s composed of a grid of smaller rectangular
images. On its own, this grid is symmetrical around both the vertical and horizontal axes. It
feels very strong and stable. On its own, it’s very balanced and looks like it’s not going
anywhere.
To the right, a block of text pulls down on the shape. It’s counterbalanced by text and the
circular logo in the upper left. Both provide a relatively equal amount of visual weight acting
on the grid in opposite directions.
The distance to an imagined fulcrum is about the same as the weights. The text on the right is
larger and darker overall, but the blue circular logo gives more weight to its general area. The
circle even connects to the top-left corner of the grid through a single color.
The text below the grid seems to hang from it, and it’s light enough on its own not to throw the
composition out of balance.
Notice that the space also feels balanced. The areas down the left, along the top right and down
the right, including a bit of the bottom right, all balance each other. The area on the left is
larger than the area on the right, but the right has additional space on the top and bottom.
The images at the top of Hirondelle USA’s (↦ https://hirondelleusa.org) home page rotate. I grabbed a
screenshot of this one specifically to talk about the asymmetrical balance established at the top
of the page.
The column in the image is slightly off center, and it anchors the composition with a strong
vertical line — it’s an object we know weighs a lot. The railing on the left provides a strong
connection with the left edge of the screen. It, too, feels anchored. It’s hard to imagine any
design element on the page throwing either out of balance.
The text above the railing feels supported by the railing; however, it’s also visually balanced by
the image of the boy on the right. You might view the railing as hanging off the left side of the
pole, pulling it out of balance, but I think the intrinsic interest of the boy as well as the darker
values in the background behind him counterbalance both the rail and the text on the left and
keep things in balance.
There’s a sense of translation symmetry as the gold lines of text repeat in the upper left and
lower right of the image, as well as in the button further down the page. The white text is
repeated as well.
( #EXAMPLES-OF-RADIAL-
(↦ https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/284139e5-ce7b-49e6-916a-
EXAMPLES OF RADIAL BALANCE # ↦
BALANCE)
2e05b612bd27/07-hirondelle-usa-opt.jpg)
The smaller circle in the upper right adds a little translation symmetry and some asymmetry,
increasing visual interest in the composition.
Opera’s Shiny Demos home page isn’t circular, but the text links all seem to emanate from a
(↦ https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8cc28a95-c280-4281-b859-
common or near common center. It’s easy to imagine the whole shape spinning around one of
59fc22729e14/08-vlog-it-opt.jpg)
the squares in the middle or maybe one of the corners where four squares meet.
Screenshot of Vlog.it. (View large version (↦ https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-
adb4-46f01eedd629/8cc28a95-c280-4281-b859-59fc22729e14/08-vlog-it-opt.jpg))
(↦ https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5a83cb4f-a6f9-4445-a0df-
c51e840791ab/09-shinydemos-opt.png)
The Shiny Demos heading in the upper left and the Opera logo in the lower right
counterbalance each other and also appear to radiate from the same center as the text links.
It’s a good example of how radial balance doesn’t necessarily require the use of circles.
EXAMPLES OF MOSAIC BALANCE # ↦ ( #EXAMPLES-OF-MOSAIC-
BALANCE)
You might expect mosaic balance to be the least used online, especially after I offered Jackson
Pollack paintings as an example of mosaic balance. Many more examples are online than you
might realize.
The home page of Rabbit’s Tale was a good example. There was certainly a random and chaotic
feel with the letters strewn about, but the balance in the composition works.
(↦ https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f3f1dfec-ae59-4b86-a97f-
3aaf704d2ce6/10-rabbitstale-opt.jpg)
There are close to equal areas of color and space on both sides (right and left) to balance each
other. The rabbit in the middle even serves as a fulcrum. It might also stand out a little after
you’ve seen it, but overall the elements don’t call attention to themselves individually.
I’m not going to try to figure out which elements counterbalance each other, one element at a
time, but hopefully you agree that there’s an overall balance. If anything, the chaos is weightier
on the right, but not to the point of throwing off the balance.
Content-heavy websites such as news and magazine websites exhibit mosaic balance as well.
You might recognize the home page of The Onion (↦ https://theonion.com). In the screenshot, I’ve
removed the background image behind the top of the page.
(↦ https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3fb18775-1299-4215-9112-
743c779fa7fe/11-the-onion-opt.jpg)
There’s a lot to look at. The layout isn’t symmetrical. The columns aren’t equal in size. It’s hard
Screenshot of The Onion. (View large version (↦ https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-
to identify what counterbalances what. The blocks of content have different amounts of
42bb-adb4-46f01eedd629/3fb18775-1299-4215-9112-743c779fa7fe/11-the-onion-opt.jpg))
content inside and, consequently, are different sizes. Nothing radiates from a common center.
There’s a bit of chaos and randomness in the different-sized blocks, some denser than others.
Because the stories on the website change daily, a different chaos will appear each day. Overall,
it works.
Perhaps it’s a stretch to say that it’s a mosaic balance, but again I would argue that it is and that
many websites exhibit this sort of chaotic balance, although something tells me that much of
the chaos we see online wasn’t planned.
Summary # ↦ ( #Summary)
It’s taken a while to get here, but that concludes our series on design principles. I hope you’ve
enjoyed it, learned something new or found the series to be a good review of fundamental
design principles.
As you can guess, I think the fundamentals are important. I started this series to show how all
of these principles arise out of human perception and gestalt theory. I didn’t make them up.
The principles are based on how we all perceive and interpret our visual environment.
For example, one reason we notice focal points is because they contrast with the elements
around them. They stand out as different. That’s important when you need to quickly
determine friend from foe. That ability was important for our survival as a species, and so our
eyes developed to make the determination quickly.
However, design principles aren’t hard and fast rules. They’re guidelines. There’s no one right
way to communicate that two elements are similar or different, for example. You don’t need to
follow any of these principles, although you should understand them and have a reason for
breaking them.
Again, I hope you’ve enjoyed this series, and I hope even more that something in the series has
given you more control over the visual communication in your designs.
(il, ml, al)
Explore more on
www.smashingmagazine.com