It has long been believed that a symmetrical face is considered attractive to the public. I remember coming in on my first day at work so many moons ago to have my then-manager remarking that me, together with 3 other new recruits in my division, has a symmetrical face that portends in his words, “a sign of great intelligence”. To be perfectly honest with you, I’ve always thought that was a lot of hogwash.
I was never a fan of symmetrical design. Ever since I was old enough to choose my own clothes, I refuse to wear double pocket shirts and that while some people could look good in double-breasted suits, I will never be caught dead in one. It’s for the same reason that I’m particularly drawn to Rei Kawakubo’s idiosyncratic approach to fashion design. Used intelligently, asymmetry can create a discordant, distinctive look that somehow translates well in the current state of web design.
Asymmetry in web design
Because the human body can look superficially symmetrical from a distance, it is easy to assume that symmetry is the preferred order of the world. Dig a little deeper however and you’ll start seeing that the human body is full of asymmetry as well. The heart for example slightly juts out to the left because the left part of the heart is the one that has to pump blood all over your body. The lungs too might seem perfectly symmetrical but the right lung is actually bigger and has one more lobe than the left one.
While it’s easy to mistake asymmetry for chaos and a lack of balance, this dissonance can also be used to create a form of visual narrative. With asymmetrical design, it is possible to manipulate a viewer’s attention by making use of this inherent imbalance. The thing is, asymmetry can be somewhat tricky to use because the distinction between controlled and utter chaos isn’t a clear one, which is why I’ve outlined some tips you could use in using asymmetry in web design.
Use in conjunction with split screen design
Split screen web design and asymmetry is practically Romeo & Juliet, but without the grisly double suicide. In case you weren’t aware already, split screen design is a technique in web design in which the display is divided into two or more self-contained screens. In practice, it’s somewhat similar to grid-based layouts you typically find in modern websites except that split screen isn’t used to arrange contents.
The split screen I’m referring to here is the one commonly applied in main pages and landing/splash pages. Split screen is a useful technique when you have two main elements that you want to showcase side-by-side and asymmetrical web design can be used by having those two elements be different in nature. Instead of putting a pair of images side-by-side, why not pair up an image with textual contents or even a negative space? Which conveniently, leads to my next point.
Used in conjunction with a negative space
Negative space used to be referred to as white space, which in the olden days would refer to the empty background on a piece of paper, which are most commonly colored white. In the modern world of web design however, a website can be colored in any background, which is why they’re now referred to as negative space. In the continually rising trend of minimalism in web design, negative space has gained more and more traction.
The normal trend is to place the hero element in the center surrounded by negative space but using asymmetry, it is possible to have your hero element in one side while having negative space on the other side. Going this route allows you and your designers to play around with that empty section and its relationship with the hero element. Try using all of that creative energy you’ve been storing with this practice.
To draw attention to your call-to-action button or other links
Now, one of the ways you could fill that negative space is by inserting a call-to-action button or links you want to showcase in your website. Instead of simply using the typical navigation bar, asymmetry can be a neat way of injecting some element of originality within your website navigation. Other options include showcasing your call-to-action button by putting it side by side with the hero element.
To dictate motion and flow
Right now we’ve already covered the hero element, the negative space and the variety of uses you could find for that negative space. The last point to cover is the relationship between the two halves of an asymmetrical layout. One of the selling points in asymmetrical design is that it is useful in lending more weight to one side of the equation but it could also be used to create a narrative flow from one side to the other.
For example, when you laid eyes on an arrow, it is only natural for you to look at the direction that arrow is pointing. Using this same principle, you could manipulate the use of shapes, colors, etc to point viewers to the next destination, whether they’re call-to-action button or links as described above. Asymmetry can also be used to imply motion, where you could for example put an image of a runner in one side to give that image a life-like quality.
Settling in with asymmetrical design
The first thing you and your viewers are going to notice about asymmetrical design is its off-kilter quality. I admit, it might take some getting used to your first time around and because of its perceived imbalance and chaotic quality; it’s entirely possible you might not be able to get it right the first time round. It’s not an easy concept to master, design concepts tend to be tricky that way, but don’t let that dissuade you from trying as its unique and original quality could separate you from the rest of the pack.