I’m not really sure who officially started it, but it seems that Pinterest made it famous. I’m talking about the current trendy grid/masonry layout that everyone seems to love.
Well, I’m officially declaring it an anti-usability pattern that has fewer advantages than we think. The websites that quickly come to mind that are using this design pattern include:
That’s just a few I came up with off the top of my head. If you do a search for the concept of copying Pinterest, you’ll see lots of round-ups of Pinterest-like clones and even a discussion of how this has affected web design.
Overall, I think this style of layout is not appropriate for a lot of websites. Many of the sites that use this layout are doing it badly and (I believe) it will have an adverse effect on quality of traffic. All the sites mentioned above appear to do nothing to solve any kind of design problem with their grid layout other than squeezing more content above the fold.
I don’t think it’s appropriate for Google+, because Google+ is competing with Twitter, which presents its content in a visually linear manner, rather than the mentally cumbersome grid. No, I don’t expect Google+ to be a Twitter clone, as that would somewhat defeat the purpose of what they are trying to build. But I don’t think it helps to just copy Pinterest and hope it all works out (not that they did that, but it seems like it). Google+ is a usability nightmare, and one of the reasons has to do with the visual overkill that it creates with the grid layout.
SitePoint is, more or less, a web design blog. They too use it, I believe, to their detriment. I believe the linear blog layout is much easier to digest, and encourages better quality reading. Yes, the grid format will get you many more scans and maybe even more clicks. But I think the quality of readership in proportion to traffic goes down when this type of layout is used on a standard blog like theirs.
On Digg and Cut 4, I can deal a little more with the grid format. In those environments, the goal of the website may be to encourage the more superficial browsing like someone might do on something like Pinterest. But personally, I’d still prefer the linear format even for those.
That’s why Twitter and Instagram have been so successful, and will continue to be.
Eventually I expect this trend to die out and designers will realize that, over the long haul, the linear format is much easier to digest, and encourages a higher quality of user.
December 4, 2013 — 2:27 am
Agreed. This is the reason why I never enjoyed using Pinterest; it’s too cluttered for my liking. Resizing also disrupts the flow of content and causes a delay in browsing.
December 19, 2013 — 7:03 am
Very true! me too don’t have much liking to pinterest layout, scroll scroll and scroll .. now I think where “ABOVE THE FOLD” rule that we have been applying to the websites has gone. Most of the rule of UI and UX seems sacrificed. Now my client demands layout like pinterest, they want websites that never ends to the bottom.
December 4, 2013 — 5:26 am
“That’s why Twitter and Instagram have been so successful, and will continue to be.” – you seem very confident about that statement, do you have any real proof to back up this hypothesis?
December 4, 2013 — 6:20 am
Well, it’s just an opinion, but I think their success is largely due to the simplicity of both apps. And I think the linear format contributes to that. Again, just an opinion.
December 4, 2013 — 5:33 am
I’ve seen this kind of layout referred to as ‘Masonry’.
December 4, 2013 — 9:35 am
I don’t think you should call it a grid layout. Many websites are styled with grid layouts and they don’t look like the ones you mentioned. It’s kind of misleading because grids in general are important for webdesign.
December 4, 2013 — 9:41 am
This post is probably referencing to ‘Masonry’ which I never adopted and I also feel the content is overkill in aspect of the concept
December 4, 2013 — 1:27 pm
I don’t think there is an official name for this style. The ‘masonry’ label is generally in reference to a jQuery plugin of the same name that, if I recall, has been around longer than Pinterest .
Nonetheless, I added the word “masonry” to the first sentence of the post, just to avoid confusion.
December 4, 2013 — 2:44 pm
I think the grid trends are fine, they are grids after all. The problem I have is that they seem to be mindlessly utilized without thought as to why that particular grid benefits the design. Many people think that its a sort of golden rule.
There are so many ways to make and break the grid and I feel the tech with web design is just getting to the point where we can start to experiment with new grids for new experiences.
The trend may be part of the limitation of tech (or imagination) as opposed to people being confused.
December 4, 2013 — 4:51 pm
Calling this the “Grid trend” is a bit misleading (or at least confusing) given that responsive/fluid grids a la Foundation and Bootstrap are a core component of most modern websites (and the concept of a fixed grid system with respect to CSS has been around for a long time).
Just a thought, it may be better to refer to this design trend as the “mosaic” or “masonry” trend (e.g. masonry.js) as that’s a bit more accurate and doesn’t confuse things with the concept of a fixed or responsive grid which is a pretty essential component to most modern responsive sites.
December 4, 2013 — 7:42 pm
Yeah, the title might be a tad confusing, but I think the article is pretty clear. It’s not exactly the easiest thing to label, since (as mentioned already) it doesn’t seem to have a label other than “Pinterest-style grid” — which maybe I should have used instead.
EDIT: I’ve corrected the title of the post to reflect specifically what I’m talking about. Sorry for the confusion and thanks for those pointing it out. 🙂
December 5, 2013 — 2:22 am
I’m in disagreement with this article. Grid layouts or masonry are great for digesting random, psuedo-interesting content such as pinterest or social media or finding a random article to read. Your eye is allowed to naturally wander the page finding the gem of content you want to digest without the monotony of lists. Your mind and visual cortex was not evolved to search perfect repeating series — rather you were meant to find a ripe berry in the randomness of undergrowth. Don’t forget that 1000 years of mankind creating lists is nowhere near enough time for our mind t o become accustomed to information presented this way. We’re still just gatherers. We do well sifting out bad content from good, and grid layouts present content in a way that’s easy to jump across and sift without having to look at every single item.
These layouts ARE horrible for finding content when you’re looking for something specific, but when you know what you want to find you don’t go to pinterest or google+ etc. you search google or wikipedia.
December 12, 2013 — 11:28 am
I agree wholeheartedly that if the primary objective of a website is to find specific information is Pinterest model a misunderstanding, but if the purpose does not have a specific goal, it is certainly a choice that supports the user’s purpose. So it seems slightly narrowed perspective to consider Pinterest model as useless. it all depends on what the purpose is.
December 5, 2013 — 3:44 am
Yeah, I think you meant to say Masonry. Grid itself is a perfectly fine concept.
I agree that Masonry gives that “cluttered” feel if not handled right, but I think Pinterest got away with it because of the user’s main focus on the images and Google Plus handles it quite well with spacious white spaces and such.
December 5, 2013 — 9:46 am
I tend to think of it as a ‘stacked column’ layout.
December 5, 2013 — 9:58 am
Pinterest works because it’s supposed to be used like a notice board of images and the occasional post-it note, (I doubt anyone’s notice boards at home are in a clean, web site grid layout to make it easier to absorb the info on it). So people are more accustomed, in this instance, to sifting through a visual mess to pick out what they need/want to see/what appeals to them. Pinterest taps into an existing experience and has run with it.
It could be argued that in adopting this design, Google+ is trying to challenge the way we use (and think about) Masonry.
Ultimately though, and this is my personal opinion, Google+ is about usability and the quick delivery of information – such a Facebook and Twitter. In its attempt to try and compete with other popular social media platforms, Google+ has adopted a trending design that is not necessarily suited to its information delivery or its users’ experience. Our brains need some sort of structure to help them organise and process information in a logical order, otherwise bits of text/notes will get skimmed over (messy notice board scenario/selective information processing). Google + users could possibly be fed much greater amounts information and improve delivery, usability and experience if Masonry wasn’t used.
In short – Masonry, works best for images, very short quotes and non-essential information.
(wow bit of a long rant sorry!)
December 5, 2013 — 11:29 am
I agree – the grid/masonry style UI makes it hard for the eyes, and therefore brain to quickly understand what content is actually being presented. Sitepoint’s style is largely much better than say Pinterest’s or Google’s, as the UI ‘blocks’ are constrained and are all of equal height, thus allowing a much easier viewing experience. However when you’re faced with a wall of alternating block heights, it’s just an utter mess for the eyes to sort through. Really surprised this design style became as popular as it did.
December 5, 2013 — 2:43 pm
You don’t like “Masonry”, this is the accepted term for describing the particular layout you describe.
December 5, 2013 — 3:18 pm
Totally agree. This is actually a trend that is now slipping into libraries and higher-ed web design, which–because of ADA, a weird, varied, massive target-audience–must be hyper-sensitive to accessibility and usability. Okay, so most of these sites are really bad anyway, but now they’re getting competent developers on staff who are excited to change things up, and Masonry is a good way to SEEM cutting edge. But damn is it a pain to look at.
I actually think it’s good for Pinterest, because there’s nothing about Pinterest that tries to associate one tile to the other: they have no relation and can exist purely floating in space. Non-prof and higher-ed sites that have an agenda, have thematically related content, etc., only do harm to themselves by adopting this style.
December 5, 2013 — 5:28 pm
After Pinterest got big every design coming from the UI department at a former employer looked like Pinterest. Articles to read, events to register for, search results…everything. I asked one once “what did UI folks do before Pinterest was invented?” The response was just nervous laughter.
December 5, 2013 — 5:53 pm
We’ve called it Tiles for a long time, and we hate it.
The key for our decisions about where it “could” be used is whether your site holds image-based items or text-based items.
Text {it probably won’t work well at all};
Images {it could work, but look around for some other layout first};
December 12, 2013 — 5:17 pm
I think you’ve nailed the crux of it. It’s more appropriate for image based content, less so for articles, unless you’re trying to generate an experience where a reader stumbles upon content rather than searches for specific content.
It’s a versatile design system that scales to different screens. This is why it has become so popular.
Our community has an opportunity to guide our clients on when it’s the best solution for the content.
December 5, 2013 — 5:59 pm
Grids most certainly should never be ditched. They provide a consistent framework for your content which is vital for making sense of a website structure.
Twitter, Instagram, G+ and Pinterest are all based on grids, just different grids for different content requirements.
The issue you have with Pinterest/G+/Facebook is that you can not be sure the length of the content being shared. Different posts contain different types of content, and each of the types of content occupy different amounts of screen real-estate.
With Twitter and Instagram you can (usually) guarantee the length and width of each element, and therefore a more rigid grid can be applied.
I don’t think we can ditch the pintrest/G+/Facebook styled grid until we can find a better approach to browsing content of different sizes and types.
(by the way – I agree it can be difficult to view this sometimes, but also it can be very helpful when trying to filter content and utilise all of the space available.
December 7, 2013 — 1:44 am
Here’s an interesting Twitter discussion stemming from a tweet to the above article:
https://twitter.com/godaisies/status/408598915903025152
They point out two public library websites that use this style of layout:
http://www.nypl.org/
http://chicago.bibliocms.com/
December 13, 2013 — 9:58 pm
The Chicago library site does not work! All the images are distorted vertically and are bitmapped, at least in Safari 5 on a Mac. Definitely not a recommendation for this approach!
December 14, 2013 — 6:32 am
I don’t see what you’re seeing. I’ve tried on Safari 6.1 on Mac and they look fine. I think when you say “bitmapped” maybe you’re referring to the fact that you’re on a retina Mac and the images aren’t optimized for that.
But other than that, I don’t see a big problem with it.
December 12, 2013 — 11:28 am
My main problem with Pinterest now is all those crazy-long-Pinterest-optimised-pins that have cropped up everywhere. You miss about 20 pins just looking at this one super long one.
Save it for Behance.
December 12, 2013 — 12:03 pm
Without statistics, facts or even a diagram that proves your hypothesis, I don’t think promoting our opinion is a wise thing. Pinterest covers a medium that Twitter, Facebook or Google do poorly and that is display visual content in an easily accessible manner. Websites that use this format think their content can also benefit from this display method. The beauty is in the chaos. If you cannot appreciate this style of content delivery, just switch off CSS styling and read a page of text.
December 12, 2013 — 12:37 pm
Surely an overused interface! I completely agree.
But, I like it for Pinterest. Others here have said it is “messy” but I see that as kind of the point. You don’t look through the images linearly, it is more random to find inspiration. That randomness has long been part of finding new inspiration that takes your design work in a new unexpected direction.
December 12, 2013 — 2:03 pm
There are 2 types of designs.
1- User enters the page, thinks how cool the page looks, plays with jquery functions, slides up, down etc. BUT (a very big but) doesn’t or can’t focus on the content. Which we all want eventually is the content.
2- User enters the page, thinks a normal page, therefore focuses on the content.
All my life I tried to balance those 2 in my designs and its quite hard.
In which I never understood people who liked pinterest style. I’m afraid to tell my opinions about modern designs because supporters & fanboys of those design patterns are worse than hitler. They tend to linch you everywhere with capslock.
Finally my subconscious is free. Thanks for this post. You made me feel relieved.
December 12, 2013 — 2:07 pm
There is little to no evidence to support any of the claims in this article, making it hardly persuasive. It lacks supporting data and analysis.
December 12, 2013 — 2:12 pm
As put forth, this post is pointless. It’s a zero sum argument (opinion) like MS vs Apple.
Don’t take sides, rather, consider appropriate solutions to structural challenges, and just put the Masonry/Isotope approach into your toolbox to be used when needed.
Don’t just blindly wish things away because they’re currently being overused. If all readers here are web devs (or such), then the work you do currently (or next) will ultimately be “over-used” and eventually phased out by newer “best-practices” or “trends”.
The world is liquid and so is the virtual one.
December 12, 2013 — 11:09 pm
Nicholas and James:
I really didn’t expect this article to go viral like it did. It is only my opinion, and I think it’s okay for someone on the Internet to have an opinion and encourage discussion. 🙂
Nonetheless, these are some thoughts I put down that I still stand by, even without data. Why? Because I know what I find usable and unusable. It doesn’t take a rocket scientist to judge what is cluttered and impractical. I’ve been working on websites for 14 years, so I think it’s not so outlandish that I might have a valid point in here somewhere. 🙂
December 12, 2013 — 2:33 pm
I don’t dig that style either, very confusing
December 12, 2013 — 3:10 pm
What I like about pinterest style grids is that the design concept is not broken by pictures that are the’wrong’ shape. It’s so easy to design a beautiful rigid grid that breaks down as soon as the client starts to use it, unless they are designers themselves perhaps or are highly motivated to maintain the grid. If you crop images to fit a grid you may lose meaningful parts of the image. Most people prioritise meaning and content over appearance, these grids are only an interface the users passes through on the way to full content. Is there a way to measure the efficiency of these different grid and list approaches?
December 12, 2013 — 3:18 pm
I cannot agree more with this article.
A grid has its place in many websites, but so many are using it unthoughtfully IMO.
Two of the great services I love more, Pocket and Prismatic felt in this trap (at least in Pocket you can switch to a list. In Prismatic there’s no final decision about this apparently, I’m talking about the preview version)
December 12, 2013 — 3:26 pm
This article isn’t very well argued. Some in depth technical analysis is missing. It’s highly opinionated and not founded in worthwhile argument format. What a dissappointment.
December 12, 2013 — 3:29 pm
Hmm. Here’s some data that you might find interesting. Shows some pretty strong growth for Pinterest. http://techcrunch.com/2012/03/14/this-is-everything-you-need-to-know-about-pinterest-infographic/
December 12, 2013 — 11:19 pm
This layout is fine for Pinterest. I allude to that towards the end. I think they’ve done a good job with it, and it seems to work for their business model.
That being said, I don’t use Pinterest. I hate Pinterest. It’s annoying and mentally tiring. I feel overwhelmed and unsatisfied when browsing a site like that. Instagram (not comparing, just saying) is so much nicer with its linear, easy to digest layout. I hope they don’t change.
December 12, 2013 — 4:39 pm
Hmmm I see the point and agree but also I think the layout you are talking about (Pinterst style) is bad for some and good for others. If you are trying to drive a single idea then NO PINTEREST STYLE but if the site is displaying a never ending and growing content like Pinterest it is OK.
December 12, 2013 — 4:53 pm
I agree with the article. I use “grids” because balance and flow is important, but I have never gotten used to the Pinterest style. I leave all sites that use it for articles as I find myself clicking away trying to get what I want to read and just getting more boxes…
I imagine for image display it has it’s uses, but when consuming actual information I find it very difficult to navigate or locate the information I am looking for.
December 12, 2013 — 5:07 pm
ART HISTORY 101: Phil Meggs : “Masonry” is incorrect. This is a Dutch Grid Design exemplified by works of Piet Mondrian, De Stijl, etc. The style is called neoplasticism (painting). If companies strategically used this grid, instead of using it ONLY because it looks cool, they (Companies) will always lead to failure and possibly poor click rates.
December 12, 2013 — 11:15 pm
Looks like you might be right:
https://en.wikipedia.org/wiki/De_Stijl
That’s what I was implying in eariler comments (i.e that there was likely another term for it), and why I originally referred to this simply as a “grid”. The modern name of “masonry” doesn’t sound right from a design history perspective, but since it is the term most people seem to be familiar with, then I think it’s fine to call it that. Especially since I don’t think the name “Neoplasticism” is going to catch on any time soon! 🙂
December 12, 2013 — 5:18 pm
the masonry layout works extremely well for large and quick consumption of media (photos and videos), not so well for blogs. every design style has its purpose and works in the right context, i don’t think the masonry layout will die off.
December 12, 2013 — 5:38 pm
It can make you feel lost in a sea of information/pictures/text.
December 12, 2013 — 7:15 pm
I personally belive some of the websites named up there are better with grid or “cards” because of the intense number of information to process. For example, Pinterest is just a bunch of images and the whole concept of the platform is to discover new ones, so they are displayed so you can see as many as possible at the same time. That’s the whole purpose of it. Though the timeline of activity from people you follow could be laid out in a different way (yup, as a list for example).
December 12, 2013 — 7:34 pm
Actually, Google+ copied Facebook. Whether or not Facebook copied Pinterest is another story…
December 12, 2013 — 10:18 pm
Thanks for comments links to the two libraries. In a matters of seconds, I was able to find a handful of very interesting articles. I LOVE this layout! I LOVE Pinterest too. Our eyes are able to scan quickly, peruse and pick out something to more carefully look at or read. I get really excited looking at so many cool images, quotes, info, etc on Pinterest and other sites.
Yes, I ‘get’ that it’s overwhelming and ppl don’t know where to focus. Therefore, if your site is about a specific service or product, KISS. Keep the home page sweet and simple. Don’t fill it with tons of graphics like Pinterest. One of my sites is very linear because of the very issues discussed.
I worked with a difficult theme for an advanced “mosaic” layout. A pal took one look and said, “it’s too busy, can’t focus.” I dumped it cos I valued her opinion. However, for another site I’m building, focused on my classic punk rock photos and new photos, I’ll have a grid on the home page. BUT every image WILL be sized similarly. The row height WILL be aligned, not like Pinterest and other sites.
BUT if your site is all about a lot of different items, like the library, art museum, store, news, etc: grids, tiles, masonry are fab to quickly get an idea what is offered and to zoom in on what you dig. Certainly utilizes space efficiently, at the cost of uniformity.
As an artist, photographer, graphic designer: what we did before Pinterest grids? We worked very hard (spent a lot of time and thought) to lay out info in aligned columns and rows, carefully editing and moving type and graphics to fit everything … then continuing on another page. It was a terrible, frustrating waste of time. Instead of creating and sharing info, we were spending too much time copy-fitting.
What did we do before columns and rows? We created paper scrolls. What did we do before desktop publishing with the computer? We used various printing presses and moveable type. Before that, we hand wrote. Before all that, that cave walls.
As technology changes, so does design.
I certainly read, understand, learn and retain more now than before. The grids, and especially more free-flowing grid like Pinterest layouts, are exciting and accessible.
IF you have a better idea, SHOW us both the design and efficient ways of accomplishing your preferred layouts. Til then, a bit of sound and fury signifying nothing … to quote a man who wrote with pen and quill.
December 13, 2013 — 1:28 am
I just saw this discussion and right off the top I want to say that when I first saw Pinterest my first thought was “at last.” I’m a graphic designer, a visual learner, a great fan of internet research. However, for years I’ve looked at sites by using Google’s images site searches. A picture is worth a thousand words and trying to decipher a website’s various menus to find what I’m looking for is such a waste of time. No, it doesn’t always work. Yes, sometimes I run into Flash or can’t see images, but when I’m browsing and want to get a sense of what a site is all about, I do better by seeing their photos and graphics first. Pinterest was developed in for visual people who spent their lives right-clicking on images that they then stored on their hard drives as visual reference. We are their audience. We “get” Pinterest’s purpose. We want to find and save beautiful or useful info without having to dig our way through a site or blog. Our society is more and more visual and I really appreciate a site that puts its contents on display on the home page. A well-written headline and a photo or graphic is far more likely to get me to click. It’s sort of the theory behind Time Magazine’s original “People” section (before the magazine came into being) — larger bold subheads and a graphic of some sort had far more allure to the reader than large blocks of text. NPR.org uses a similar format headline+photo format and I’m far more likely to click and then read the complete article if I can read a little bit of the content before leaving the home page. Maybe it’s the difference in our brain structures, but I’m very happy to have this kind of navigation structure — when appropriate.
December 13, 2013 — 1:59 am
Like with everything, it’s about knowing when to use it. Yes, most of the time it is misused (and WAY overused), but that doesn’t mean the technique isn’t the best option in some cases. This comes down to understanding the subtleties of the given subject and human interaction. It’s about creating UI/UX with purpose, rather than adding bling.
December 15, 2013 — 8:36 pm
I personally like this style for Pinterest because I tend to be mindlessly scrolling through images, but I agree that for Google+ it is cumbersome. Anything that involves reading I prefer to be ordered in a logical sequence.
December 25, 2013 — 11:59 am
I agree to a certain degree. I wrote this blog post about it sometime ago. Might be of interest to you: http://atendesigngroup.com/blog/careful-those-cards
April 18, 2014 — 11:45 pm
Very relevant:
http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/
May 28, 2022 — 12:16 am
Guess what? It’s 2022, and masonry/grid has not gone away. In fact, every single WordPress theme is masonry. So depressing.