Symmetry creates balance, and balance in design creates harmony, order, and aesthetically pleasing results. It is found everywhere in nature, and is probably why we find it to be so beautiful. Symmetry is one of the fundamental principles in gestaltism, a human behavior theory that proposes that our mind naturally creates order and completeness in the things we see and encounter. However, symmetry can get boring. Asymmetry is a break in symmetry, which when used effectively, can make things more interesting. We will also talk about asymmetry. How can designers use symmetry as a tool? In this guide, we’ll look into symmetry as a part of design and cover the basic concepts of symmetry, some symmetry techniques, tips and best practices, and a discussion of a few websites that embody symmetry. There are three types of symmetry: reflection [bilateral], rotational [radial], and translational symmetry. Each can be used in design to create strong points of interest and visual stability. Reflection symmetry is also known as bilateral symmetry. It is the “mirror” effect, or when one object is reflected across a plane to create another instance of itself. Types of Symmetry
Reflection Symmetry
Rotational Symmetry
Rotational symmetry [or radial symmetry] is when an object is rotated in a certain direction around a point.
Translational Symmetry
Translational symmetry is when an object is relocated to another position while maintaining its general or exact orientation.
In the example below, we’ve moved one object several times at even intervals. These intervals do not have to be equal in order to maintain translational symmetry; they just need to be proportional.
It can also be used strategically and more profoundly to create the feeling of motion and speed just like rotational symmetry.
Asymmetry
Asymmetry is the lack of symmetry. Asymmetry can also represent an object that breaks a predefined pattern of symmetry, or an imbalance of design elements. Asymmetry can be used as a design tool to create points of interest and organize visual hierarchy within a group of similar elements.
It creates disorder, which can call attention to certain points of a design through distinction. In nature, we can see asymmetry in tree branches, in clouds, and in the fur of animals.
Asymmetry vs. Symmetry
An asymmetrical object is visually heavier than symmetrical objects. Therefore, symmetry is great for patterns, backgrounds, the general layout, content, and anything else that is meant to be visually passive. Asymmetry is effective in drawing attention and breaking monotony.
Symmetry/Asymmetry Design Tips and Best Practices
When working with symmetry [or asymmetry] in design, there are several best practices you should keep in mind.
Use Symmetry Strategically
Strategic use of symmetry [and the lack of it] is a powerful design tool. Designs that need more stability, a strong organizational structure, and a classic and trusting message, tend to use more symmetry in the design. For risk-loving designs, providing asymmetry can reinforce the message.
You can use asymmetry to punctuate an otherwise orderly, boring design.
Translational Symmetry is Good for Layout Structure
Keeping pieces of content roughly the same size and spanning them across a web page or print piece is a great way to keep symmetry while maintaining enough space for all of the essential text and imagery. For example, many grid layout systems [such as the 960 Grid System] exhibit translational symmetry in the way they break up column widths to maintain balance and proportion.
Use Rotational Symmetry to Convey Movement and Action
Rotational symmetry can simulate motion even in an otherwise flat and static medium.
It can also infer progress or forward movement.
Use Asymmetry to Draw Attention
Asymmetry can make designs more interesting overall, but it serves another primary purpose: to grab attention and create visual hierarchy. Sometimes a design can intentionally be thrown off balance to direct the viewer’s eyes to a certain area.
Follow Your Gut Instinct
Symmetry is natural. If you know of Gestalt principles, then you’ll no doubt already know that our brains are wired to create symmetry and balance in the things we encounter. Our bodies have natural symmetry.
Symmetry is in nature and is all around us. If something looks and feels unbalanced, it probably is.
Symmetry in Web Design: Examples
Below you’ll find 15 examples of how symmetry and asymmetry are used in designs. From the use of symmetry, we can see how each design portrays a certain message, with those designs that have more symmetry being more calming and organized, while those with more asymmetry tend to be more unconventional and organic.
IWC
Regenerator
Beanstalk
Pointless Corp
This design, however, does a bit more by adding some interest with overflowing elements such as the logo and imagery. Note that even though these two design elements [and a few more throughout the site] add visual interest, they still balance each other out to maintain symmetry in the design. The logo on the left is darker and overlapping, but it is balanced by the more complex and brighter image to the right of the tagline.
Typographisme
The orange “TG” stamp, for example, serves to punctuate the monotonous symmetry. Coda Automotive
For interest — and likely due to practical content-related layout purposes as well — the shapes of the squares also vary in size, yet still maintain visual balance on either side by mixing up size versus complexity, color, and density. Jessica Allen
As you can see, asymmetry is equally effective as a design tool. Ambassadors for Life
What keeps this design interesting is the jarring asymmetry in the main photos below the “process” content, helping draw focus to the site’s featured story. QTRLY
Elegant Seagulls
Dark Sky
There is a general use of rotational symmetry up top around the list of features, but also a more concrete use down below by the “Our Team” section. Beyond this, there’s asymmetry going on in the background, while the main elements of content retain balance. This is a great mixture of using visual interest created by asymmetry, with balance, proportion and organization made with strategic symmetry.
SVN 2 FTP
Forever Heavy
Summary
Symmetry [or lack thereof] can be a very strong tool in design projects. It can create or maintain balance, calmness, and stability.
It can communicate integrity, professionalism, and solidarity. Asymmetry, on the other hand, can develop strong points of interest, uniqueness, and character. Using symmetry and asymmetry in their various forms can do a lot for our designs.
Resources and Further Reading on Symmetry
- Is Your Web Design Balanced?
- Symmetry and Asymmetry in Web Design
- Does Red Weigh More than Blue?
- A Treatise on the Aesthetics of Symmetry
- Tools and Resources for Creating Symmetrical Patterns, Art, and Design
Related Content
- Reductionism in Web Design
- Creating a User Interface That Speaks Your Users’ Language
- Minimalism in Web Design: A Guide
How is your website’s SEO?
Use our free tool to get your score calculated in under 60 seconds.
Get Your SEO ScoreRelated Resources
- Ultimate Guide to Microformats: Reference and Examples
- Effective Website Help Systems: Tips and Examples
- 30 Beautiful Clean and Simple Web Designs for Inspiration
- Showcase: 30 Beautiful Blog Designs for Inspiration
- 30 Beautiful iOS App Website Designs for Inspiration
- 30 Beautiful Dark Website Designs for Inspiration
- 30 Inspiring Dark Web Designs
- 50 Clean Websites for Inspiration
- 50 Awesome App Websites for Inspiration
- Website Design Services
- Web Design Agency
- Web Design Pricing
- How Much Should a Website Cost in 2022?
- Award-Winning Blog Design Services: Upgrade Your Blog
- Build Your Site With a Trusted Custom Web Design Company
- Ecommerce Website Development Services
- B2B Web Design Agency
- Database-Driven Web Design
- Web Design for Excavation Companies: Top 5 Tips [With Examples!]
- 5 Web Design Tips for Fence Installers
- 5 Simple and Successful Web Design Tips for Auto Parts Retailers
- Tips for Medical Website Designs
- Medical Website Design from an Award Winning Agency
- Top 10 Effective Web Design Tips for Auto Service Centers
- Web Design for Renewable Energy: Tips for a Site That Shines
- Insurance Website Design Services
- 5 Web Design Tips for Fertility Clinics
How is your website’s SEO?
Use our free tool to get your score calculated in under 60 seconds.
Get Your SEO ScoreWebFX Careers
Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.