Symmetry in Web Design

The Why and How Of It?

Creating a fine balance between your website design elements helps in improving the quality of visual communication. But, if your design is not balanced it will become confusing for users to understand. Put it simply, your website design will lose its impact if it is not properly balanced. And, in order to balance the design you need to use symmetry.

In this post, we’ll discuss about symmetry and how different types of symmetry can be used to have proper balance in your web/website designs.


Symmetry – An Overview

Symmetry creates a sense of harmony in web design, and thereby helps make the design visually pleasing to users’ eyes. In its simplest form, symmetry helps in the arrangements of elements web design elements – where the elements on a page have equal margins (or space) on both sides.

When the design composition is evenly distributed around an axis or a central point, it leads to symmetry. However, keep in your mind that a symmetrical design cannot be identical at all times, and perfect symmetry happens when the two sides of an element can be folded in a single half. For instance, folding a rectangle from the middle will help in achieving a line of symmetry.

Symetric Image

Symetric Image

One more thing you should keep in mind is that symmetry won’t always be appropriate in web design, and you may prefer to have an asymmetrical design instead.

Lack of balance in a design or lack of symmetry leads to asymmetry in design. Wondering, why you should care about making a design asymmetrical? If you need freedom of expression, i.e. want to make objects in your design appear as dynamic or need to define complex relationships, then asymmetry should be preferred in design. But, remember that complex relationships can cause confusion and the varying intensity of the design can tire the readers’ eye.


Types of Symmetry and How They Are Used in Web Designs

In order to create a symmetry in design, you need to know about the different types of symmetry.

1. Reflection symmetry

Also called bilateral symmetry. It creates a “mirror effect” of an object (or an element in web design) around a central axis.

For example, the Typographisme website design (as shown in the screenshot below) uses reflection symmetry. The content of the this website is evenly centered, and equal on either side when it’s folded in half. However, the design also features plenty of asymmetrical forms, to bring attention of users’ towards distinct elements of the design. The TG stamp in the design, for example, is an asymmetrical element.

Typographisme Website

Typographisme Website

2. Rotation symmetry

Radial symmetry is the rotation of objects around a common center point in equally distant increments. In essence, when something is rotated around a circle to develop rotational symmetry.

This type of symmetry is preferred in web designs that includes circular patterns and is used to convey “motion and action”. For example, most part of the Vanmoof website is symmetrically balanced. Right from the home page to the top of the design uses radial symmetry to create a sense of balance. In this website, most of the elements of content are centered.

VanMoof Website

VanMoof Website

3. Translation symmetry

Also called crystallographic symmetry. This type of symmetry is appropriate for the design where elements need to be placed in different areas of space. It is ideal to be used for background patterns and repetitive elements in a website design. Additionally, this type of symmetry should be preferred in website having lots of content (i.e. a content-heavy website). That’s because, such sites contain too many elements and blocks of content, and so it becomes essential to make all the content balanced and organized to avoid confusion.

For example, Coda Automotive is a content-heavy website and uses translation symmetry, in making the block shape of same-size repeated in several places.

Coda Motive - Car Design Website

Coda Motive – Car Design Website


Final Words

Symmetry in design portrays balance, unity, and a sense of elegance in web design. What’s more? Adding symmetrical elements in a web design help in increasing the visual aesthetics of the design, and thereby enhances the users’ experience.

A word of caution, symmetry is static in nature and can make the design look uninteresting to the eye. So, if you want to add dynamic elements and make the design more interesting, you can prefer to add asymmetrical elements in your website design. Make sure to prefer symmetry or  asymmetry in web design after carefully analyzing your needs.

Author Bio

This post is brought to you by Samuel Dawson, working as front-end developer for Designs2HTML Ltd. a leading PSD to HTML5 conversion company and he shares concrete information, latest trend & tips on front-end development technologies.

Tobias Gebauer

Webworker, web developer and also web designer. I love blogging and working on my websites all the time. I like to share great web design inspiration, freebies and tutorials with the world :).

You may also like...

Pinterest