Unique Asymmetrical Layout in Web Design

I’m sure you have seen this all the web over but there are some websites that go a little bit out of their way by embracing asymmetric designs. If you take a look at the examples below, you will see exactly what I have in mind; what I am referring to are websites which don’t have the typical, cookie cutter layouts – no, no, no. I mean websites where things are not typically rectangular elements displayed in a neat and predictable fashion; I mean something different and edgy.

Why Go With an Asymmetric Design?

There are a few reasons why you would want to go with this type of design, as there always are. First and foremost, this type of design makes a statement. For most of these examples, the site wants to grab your attention as this type of design is something unexpected as all users of the internet are so used to the simple and well aligned website style. There is nothing wrong with having this wow factor at all, if you will. It is simply not what people expect to see when they visit a website.

At the same time, a bold website like this is a simple attempt at creating something unique and different. Once again, there is nothing wrong with that, and all power to you. I think that if you want to express some creativity, making things unaligned is a good start. This is especially awesome if the brand allows you to do so too; not every business has the ability to create a modern and wild design like the ones you see in this post. So, if you can go wild, go for it! You have my full support!

What Makes These Designs Work So Well?

There is one key element that makes these asymmetric designs work and that is balance. Without balance none of these designs would work, they would all look awkward and weird. Granted some designs are meant to do that, they cater to a specific flow, a specific story, a specific audience and are not mean at all for general or typical users. But, let’s exclude those from this.

If you take a look at the basic design principles, balance is one of the main things you will learn about. You will be told that two of the same items next to each other will be harmonious; you will be told that if you want a small circle on a canvas you will need to counterbalance it so that it does not look weird or out of place – so it does not look off balance – and therefore looks good. You can do a lot of different things to counterbalance this small circle; you can start by placing a larger one on the canvas, a little away from it so that the two work together well. You can play with white space, with textures, with depth, with colours, with emphasis, with distance, just to name a few.

The same idea of a small balanced circle is true for off balance web design elements, just because they are not perfectly aligned and perfectly sized elements on a web page, does not mean they do not look good or serve good purpose. I must say that balancing web site elements can be tough, but it is nothing too complicated as long as you a – practice, and b – understand what it is you are doing in terms of design principles.

Some Examples

Below I have gathered a bunch of examples from the web of sites which have this crazy and unique asymmetric design.

Andrzej Capinski Studio

Honestly, this is such a weird looking website when you first come across it – but at the same time it is so refreshing because of its unique design. I can see where the art direction for this design is coming from – the unique nature of architecture and to create something different. This website is balanced by the whitespace on the right and all the content that is weirdly but yet neatly organized on the left.

Andrzej Capinski Studio

Sjobygda Kunstnarhus

Frankly, I do not speak Norwegian but the website for this cabin retreat is, again, something else. There are a lot of off center triangles, and diagonal and vertical lines. Although this is a simple website there is actually a lot going on visually. There is a good balancing out between the image filled triangles and solid coloured ones as well as the placement of said triangle is working really well for the balance of this site overall.

Sjobygda Kunstnarhus

Alcyon Communication

Alcyon Communication’s website has a very nontraditional layout; it honestly does remind me a bit of the Flash based website. On this particular screen, the white circular navigation is balancing the rectangular shaped text. Using shapes to create balance was a good move on their part.

Alcyon Communication

Start Up Giraffe

I must say, this is one cute website. Their design tells a wonderful story as you keep on scrolling and very little is aligned to be in a cookie cutter format like most websites. It is also unlike other company or start up websites where you have a big image atop, then go down to the three neatly placed value props and so on. This is a unique site and that makes it very refreshing.

Start Up Giraffe

Dunlop

When you hover over one of the three scenarios presented on the home page the whole section expands to give you an opportunity to learn more about the particular tire type. I enjoy the little slide animation and the fact that the section expands and gives you a focus onto the selected tire versus the ones you are not so interested in. There is little going on when it comes to balancing as you are simply dividing up the width’s real estate for that section – it is all about proportions here.

Dunlop

Case3D

I find Case3D’s home page to be a trickster and here is why: most of their site is symmetrical and very well balanced, so the one section that is actually not balanced comes off as if it was in fact symmetrical when in reality it isn’t. The shot you see below captures this well. It is a design choice to make the blue/green triangles be off to the right and left sides but they are so well placed and look so inline; it is a job well done when it comes to balancing the asymmetric.

Case3D

The Wood

I find this home page – the overall website actually – to be so intriguing. The background image is center aligned and so are the sponsors but the main content which welcomes you to enter the website and see the experience it holds – which is fascinating by the way – is floating off to the left side. It is a bit weird the way they go about things on this site and on this page, but it is so different it works (and it works for the brand too).

The Wood

Sende

Lastly we have a studio whose about section – like all other sections on this single page website actually – is so off. It seems like the whole site is missing a grid. But the elements are strategically placed so that the heavy title works well with the heavy images and the light text in between them. Having the elements off balance give this whole website so much interest and freshness, it is amazing. It definitely makes them stand out from the crowd!

Sende
Advertisement