Masonry layout is a type of a grid system that is mostly based on columns and proper vertical alignment. Its key feature lies in the fact that it does not have customary rows with the fixed height; it consists of cells with big and small height placed side by side.
However, it does not mean that there is no harmony in this solution. On the contrary, everything is perfectly organized and well balanced. The deal is, masonry layout solves an issue of unnecessary space that is added to the cells when you need to create an ideal grid. Therefore, we can see an optimized structure with the content tightly packed together.
Masonry layout is widely associated with Pinterest. They both have the same style layout with a sort of refreshing, offbeat quality. Therefore, it comes as no surprise that it has become quite popular among artists who want to show works in an engaging rather than boring and banal way. It is used not only as a foundation for displaying portfolio items but also as a tool for enriching the entire design. As a result, we can witness some exciting trends for this approach. One such trend is a twisted masonry layout.
Twisted Masonry Layout – Spring Trend
Although masonry is an already original solution, however, it does not mean that you cannot make it even more innovative. Developers easily take them to the next level. Today we are going to consider some inspiring examples of masonry layout that was spiced up with some eccentricity.
Collection of Websites with Twisted Masonry Layouts
The first example in our collection is a personal portfolio of Nathan Taylor that instantly separates itself from the competition with its unique take on the homepage. The masonry grid occupies the entire page. Here many interesting things are worth taking note.
First, you will not see columns with equal width. The approach is more row-first than column-first. Therefore, sometimes you can see three columns in a row, sometimes four.
Secondly, each cell is used not just to display work but also to hint about the artist’s skills.
Thirdly, each cell has an effect. Some of them include animations; others demand a reaction from the user; there are even those that have mouse interactions.
Finally, the overall structure. Everything is well-thought-out. It is not a messy twisted masonry layout. On the contrary, it is a well-organized structure that was used to impress and, at the same time, bring value to the online readers by providing the necessary information.
Brilliant.
Groundwrk
Groundwork is not as impressive and massive as the previous example, however it still a perfect case in point.
It is an excellent example of how twisted masonry layout can benefit the minimalistic website designs. Not only does it draw the attention, but it also finishes off the theme playing a vital role in creating a general impression.
It is featured two times. The first one is lopsided and is deprived of organizational harmony, whereas the second one is a classic approach. These two perfectly work together. While the first variant adds a spice to the design, the second one contributes to the businesslike appeal.
Smart.
Passione
The design team behind Passione has turned masonry layout upside down by revealing its bizarre nature. Here the grid is genuinely artistic: it is lopsided, unbalanced, and disorganized. Nevertheless, it is still eye-pleasing and enjoyable.
The reason for that is that it is supported by some artistic touches such as custom typography, brush-like strokes, marker-styled borders, handwritten scripts. As a result, it feels like a masterpiece rather than a mini image gallery.
It is always intriguing when the actual grid that underlies the project cannot be seen with the naked eye. The website looks truly original and undoubtedly professional.
Stone and Style
Much like the previous example, Stone and Style do have a hidden masonry layout that underlies a truly original solution for the website foreground. You can delineate neither fixed columns nor rows here. The homepage has an unbalanced layout that naturally grabs the attention and directs it towards the content. Although at some point it feels like there are just two columns, however, the vast mascot in the shape of stone ruins this feeling thereby making user experience intriguing.
Note how the design team was managed to take the banal businesslike UI and turn it into something incredible.
Rino & Pelle
The design team behind Rino and Pelle employs not only twisted masonry layout but also a regular grid as well to bring about an original outcome.
They do not bother about ideal shapes, fixed height, same width, or even gaps. Some of the solutions have content scattered throughout the entire screen, while others, on the contrary, are densely packed together. As a result, the homepage has a pleasant boxy vibe that does not scare away online readers with its sharp and rigid nature. On the contrary, it feels warm and artistic that certainly appeals to the people.
de Staat van Creatie
The official website of de Staat van Creatie has a classic masonry layout. You can see how the content is carefully arranged into a row with a fixed height. However, unlike the traditional approach, here, columns have varied width. It was made on purpose.
The deal is the design team has twisted not only the layout but also the direction for exploration of the website. Instead of moving along Y-axis, you need to scroll the page horizontally. This tweak makes both site and masonry layout feel original. Besides, each cell features a beautiful duotone effect that gives the entire design a charming touch of retro.
Briefly, the website is rather straightforward. It is compact and minimal. However, namely twisted masonry layout in tandem with X-axis makes things look special.
Baswana
Here the twisted masonry layout makes the entire design pop. It instills a sense of sophistication. It stands aside from the others with its rebel attitude towards rules.
There is no fixed column width, nor fixed row height. Some gaps are significant. Each image is accompanied by the title set in a vertical direction. All the cells are placed in steps. Finally, the flow is lopsided. In the beginning, you can see a substantial left margin, whereas, in the end, you can see the vast right margin. The idea piques interest without a doubt.
Note, even though the solution is original, it is still managed to support the businesslike atmosphere. It adds spice as well as smartens the design and brand itself.
Antoni
The layout in Antoni’s homepage breaks away from the traditional grid. You can trace some features inherent to masonry style. However, it is undoubtedly twisted.
There are no rules, similarities, or patterns. The design team was managed to embrace chaos bringing energy to the interface, to say nothing about making it unique and splendid.
Small image, big images, small gaps, big gaps, images that stuck to the borders of the browsers and those that are freely floating: from one point of view, it is a mess, from another it is a skillfully organized structure. The idea is fantastic.
Conclusion
Masonry layout is an original answer to the banal image gallery. Even in its traditional version, it can win over readers with its freshness and originality. Therefore, twisted masonry layouts are even bigger eye-catchers and attention-grabbers.
Masonry layout is not rocket science, and it does not require from your reinventing the wheel. There are several ways to create one in your project.
First, you can use specifically developed JavaScript plugins such as Masonry or Isotope.
Secondly, you can use Flexbox and its ability to handle horizontal and vertical alignment with grace and proficiency.
Finally, you can try and create something alike using old-school CSS tricks powered by jQuery magic.
