Show Menu

User Interface Design - Symmetry Cheat Sheet by

design     user     interface     ui     symmetry

Symmetry and Asymmetry

Both symmetry and asymmetry can be used throughout a compos­ition, indepe­ndent of, yet while contri­buting to, the final balance. You can have symmet­rical forms in an asymme­tri­cally balanced compos­ition and vice versa.

Symmetry is usually seen as beautiful and harmon­ized; however, it can also be seen as static and dull. Asymmetry tends to be more intere­sting and dynamic, despite not being regarded as intrin­sically beautiful.

Reflection 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 “symme­try.” The axis can be in any direction or orient­ation, although it’s often vertical or horizo­ntal.

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 variat­ions. 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 compos­ition could mirror each other, while the top and bottom also mirror each other. Snowflakes show reflection symmetry over more than two axes.

Rotational Symmetry

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 perpen­dicular 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.

Transl­ational Symmetry

Transl­ational symmetry (or crysta­llo­graphic symmetry) occurs when elements are repeated over different locations in space. Repeating fence posts are an example. The repetition creates transl­ation symmetry. It can occur in any direction or at any distance, as long as the basic orient­ation is the same. Natural forms develop transl­ational symmetry through reprod­uction. You can create rhythm, motion, speed and dynamic action through transl­ation symmetry.
 

Asymmetry

Asymme­trical forms lack the balance of symmet­rical forms, although you can asymme­tri­cally balance an entire compos­ition. Asymmetry is rather common in natural forms: you’re probably right- or left-h­anded; fiddler crabs have different sized claws; trees branches grow in different direct­ions; clouds have random shapes.

Asymmetry creates more complex relati­onships between elements, and so it tends to be more intere­sting than symmetry. Because it’s more intere­sting, asymmetry can be used to draw attention.

Space around asymme­trical forms is more active. Unpred­ictable 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 to good effect. Balance symmet­rical forms in an asymme­trical way, or balance asymme­trical forms symmet­ric­ally. Break up symmet­rical forms with a random mark to add interest. Contrast symmetry and asymmetry in your compos­ition to make elements get more attention.

Gestalt Principles

Throughout this series I’ve tried to point out how many design principles arise from gestalt princi­ples. 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 specif­ically addresses symmetry and order and certainly applies to compos­itional balance. It’s hardly the only principle that applies, though.

The simplicity of symmet­rical forms is predicted by the Law of Prägnanz. Gestalt principles such as focal points and similarity contribute to visual weight. Principles such as contin­uation, common fate and parall­elism impart visual direction. I also mentioned that symmet­rical forms are more likely to be seen as figure rather than ground.

Visual Examples

The butterfly is an example of reflection symmetry, the fence posts show transl­ation symmetry, and the sunflower is an example of radial symmetry. (View large version)

Download the User Interface Design - Symmetry Cheat Sheet

1 Page
//media.cheatography.com/storage/thumb/davidpol_user-interface-design-symmetry.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          System Design Cheat Sheet
          Nielsen & Molich: UI Design Guidelines Cheat Sheet

          More Cheat Sheets by Davidpol

          M1340 Is it a Surgical Wound Cheat Sheet