Traditionally CSS has limited our design capabilities on the web but with the introduction of Javascript driven layouts like Masonry. Often their uses are overlooked or misunderstood and used as a gimmick by trend followers – not designers.
Building from the top down
Masonry layouts have become a very effective way of displaying a collection of items that vary in height or width – like photographs, articles or even a mixture of design elements. Sites like Pinterest, Flickr and Designspiration utilise the attributes of this layout to pack as much information as they can onto the screen – and it works. Masonry can reduce the amount of white/ negative space on the page by fitting tiles of different sizes together – like an upside down game of Tetris. This isn’t exactly a new concept in web design – but it’s becoming popular as it respects the implications of responsive web design.
Masonry examples using Packery – http://packery.metafizzy.co/
When and where?
The most effective use of this layout is when you can’t predict the physical amount of content that is going to be displayed on a page or when it is automatically populated. A simple example to follow would be Designspiration. The website is a community driven image sharing tool for designers.
Designspiration masonry layout – http://designspiration.net/
Many community driven resources use masonry as an effective way to collage information on their website – and it works because of a few fundamentals. Think about the information they are displaying, and the hierarchy they need to create. In this case, images from multiple users – the more popular ones at the top and less popular as you scroll down. Simple and effective. Each image has been given the same width and placed within a column which gives the layout uniformity.
Common faults
Where masonry fails to be effective is when the content is too textual. Points between headings becomes hard to following – which often results in missing content. Our eyes can an interpret images much faster than text and this layout heavily favours the latter. A fairly good example would be the DazedDigital homepage.
Dazed masonry layout – http://www.dazeddigital.com/
The content after the slider uses the principles of a masonry layout to display a mixture of content with various sizes and purposes – blog articles, tweets and even promotions. It becomes an overwhelming amount of information and very hard to follow, leaving it up to the imagery to grab your attention. Although they have quite a unique target audience, they are still users like you and me. If you consciously try to follow one heading to the next it becomes a mind game – jumping from left to right and up and down – weirdly even in more extreme cases you would scroll back up the page to read an article that is chronologically next.
Engaging audiences on the web is hard enough so why make it impossible? Do you see forcing more content in the users face beneficial in any way? Or do you lose out on highlighting the information that has real value. In most cases the lack of hierarchy is often the biggest downfall of the masonry layout and should make you re-think why you are using it.
Masonry Resources:
Links
- http://ff0000.com/
- http://www.rodgerstownsend.
com/ - https://niice.co/
- http://designspiration.net/
- http://www.dazeddigital.com/
