Why symmetry is so important in modern design

Why symmetry is so important in modern design

Aesthetics is important in design.

When someone visits a website, they should feel a sense of harmony and order. If a site feels chaotic people don't feel encouraged to stay.

One of the pillars of aesthetics in graphic design is symmetry. Symmetry is the gestalt principle that tells us to look for a center in everything. 

Humans enjoy symmetry and they find the balance it gives pleasing. And it isn't just something that humans made up. It occurs in nature as well as art.

But why would we use it in modern designs? Why does it even matter? 

We're going to answer this question and bring a sense of balance to your world.

1. The three types of symmetry

There are three kinds of symmetry. 

Reflection, rotational, and translational symmetry. Visual stability is the center of each kind of symmetry.

Translational Symmetry

Translational Symmetry

We use translational symmetry when we repeat patterns in modern designs while maintaining that design's orientation.

One of the ironic things about design is the ability to create motion and speed with static graphics. When a series of similar symbols appear in a trailing pattern, our eyes move along the trail in one direction or another. 

This movement translates to movement in our minds. And this gives a website some sense of fluidity. 

The intervals between each repeat pattern only need to be proportional to be considered translational. 

Rotational Symmetry

Rotational Symmetry

To create rotational or radial symmetry, you place objects in a circular pattern around a central point. 

Rotational symmetry is everywhere in nature. Flowers are a prime example of rotational symmetry. If you look at a daisy, you see a circular pattern opening up from a single point.

You can use rotational symmetry in modern to designs to draw attention to a central point in a web page. 

Reflection Symmetry

Reflection Symmetry

Bilateral symmetry is the kind of symmetry we look for when we see a face or look at a human body. 

Bilateral symmetry is a reflection centered around one central axis line. You could essentially fold the image in half, flip it over and have the same image on both sides of the paper.

The axis line can sit at any angle. You can use a horizontal, vertical and diagonal line around which to "reflect" the pattern.  

In website design, you can use bilateral symmetry to orient content and images in similar patterns.

Symmetrical design

2. Asymmetry vs. Symmetry

Asymmetry is the absence of symmetry. It's an intentional unbalancing to create unease or draw attention or juxtapose. Usually, this just means "not identical on both sides of a central line"

Asymmetry can be just as useful as symmetry. But it must be employed carefully in the context of web design. 

You can introduce visual complexity with asymmetry. Or direct attention from one side of the page to another. 

Side menus create asymmetry on a web page, but they don't bring too much chaos to the design.

Asymmetry done right can do the same thing as symmetry. It can bring a sense of balance to an image or a layout. 

And yet symmetry is much easier to employ well than asymmetry. If you employ symmetry to a page with austere modern designs can make the page easier to navigate. 

But when you apply it to a more complex page, you might create a page that lacks visual appeal. It might seem sterile and distant and dead. 

The school of dynamism says asymmetrical designs applied to more complex and sterile modern designs make the page seem alive and active. 

Really, the goal in web design should be simplicity. 

And symmetry lends itself to a simple design over a complex one.

Symmetry In Nature

3. Symmetry used strategically in modern design

Symmetry can give the user a sense of trust. If you're trying for a message of authenticity, then balancing your design with symmetry is the way to go.

We associate symmetry with nature. This most likely is because it happens everywhere in nature. From spider webs to nautilus shells, we see it in every nook and cranny.

Nature is authentic. And symmetry is natural. And when we see it happen outside of nature, it reminds us of the natural order of things. 

On the other hand, if you're trying to impute a sense of adventure or risk, asymmetry could be useful. You will reinforce the message of risk by introducing chaos into your modern designs. 

Translational symmetry in modern design

Patterning a web page with translational symmetry allows you to cover more content without confusing the user

Keep each bit of copy to a paragraph or two and make each section the same size.

Snap these bits of copy into a grid with titles on each and you have a well-designed content section of your web page.

This modern designs strategy is intuitive and easy to navigate and scan.

Rotational symmetry can give a sense of action and motion to modern design

One of the best examples of rotational symmetry in modern designs is the cycle infographic. 

Instead of listing "step one, step two, step three" show how each step flows into the next by placing them around a circular graphic with arrows.

You can illustrate each step with an appropriate icon. Each icon can convey the message in a static way and the arrows placed symmetrically around a center point can convey motion.

Think of each element in modern designs as having a weight

Whether you're using symmetry or asymmetry in your modern designs, you should think of each element in your design as an object. Objects have different weights. And the same is true in web design.

Weight works a little differently in design mediums. Sure, small graphics might weigh less than large graphics. But dense or heavily textured objects weigh more than lighter and plainer objects.

You have to weigh these objects in a design just like you would an object on a scale. Too much of one weight in a quadrant and you have an unbalanced and chaotic design.


Vector icons a la carte from only $.99

Samples

Shop from thousands of high quality vector icons, providing a consistent look for your project. No subscriptions. Great prices. And free icon sets too.

Shop For Vector Icons


If you like this, please share!


Leave a comment

Comments will be approved before showing up.


Also in The Icon Blog

Where Does Intuition Come From?
Where Does Intuition Come From?

Intuition plays a key role in design, technology, and our everyday lives. But what is intuition really? Where does intuition come from? 

Continue Reading →

What Car Symbols Really Mean...
What Car Symbols Really Mean...

Continue Reading →

Why attractive design works better
Why attractive design works better

It's no secret that people are drawn to attractive things. Keep reading to learn more about why attractive design is so important.

Continue Reading →