How Pinterest Is Changing Website Design Forever
by
88
Even if you haven’t ever visited popular visual bookmarking site Pinterest, you might recognize its design elements — which have been popping up everywhere since the startup burst onto the mainstream scene in 2011.
The site doesn’t use traditional web building blocks.
“It’s almost like a window-shopping mode,” says Khoi Vinh, the former design director for NYTimes.com.
“It puts the ball back in the user’s court,” muses Andrew Beck, a web designer at Blue Fountain Media.
“It flattens the information hierarchy,” describes Jeff Croft, a web designer and co-founder of ebook lending site Lendle.
Pinterest puts web content into sticky-note sized blocks users can organize onto pinboards that fill the entire browser screen. The majority of each block is filled by a photo, and the ability to “like,” “repin” or comment at the bottom make it look like its own mini web page.
Though the hot Palo Alto startup is staying mum about its user numbers, one study found it drives more traffic to websites than Google+, YouTube and LinkedIn combined.
As it has gained in popularity, so too has its unusual design.
Quora launched a new feature in December that incorporates a topic “boards.” In January, social video startup Chill.com redesigned the site to contain “bricks” of videos shared by the people who you follow, complete with social activity from other Chill users. And several content visualization projects such as Scrolldit, which launched in December, took on the Pinterest block-by-block content feel.
Pinterest didn’t invent the basic design structure, but it did help make it cool.
Most designers cite a layout plugin called jQuery Masonry while describing the look of Pinterest’s site. Launched in February of 2009 by designer David DeSandro, it makes it easy for web designers to create a vertical layout like that of Pinterest.
It also broke the system of organizing information online based on reverse chronology, as favored by Twitter and Facebook. Reverse chronology is a tired, overly-used system; as Vinh says, “I almost thought it was the default way to organize information on the web.”
Though many sites experimented with the jQuery Masonry layout, it didn’t immediately catch on with sites that were offering a service.
“The sites I saw before Pinterest that used this design were pretty much tech demos of how you could do this,” Croft says.
Pinterest, as far as the designers Mashable spoke with could remember, was the first site to take the idea to mainstream success. It showed how the design could solve certain challenges eloquently and how the traditional reverse chronology layout could be broken without scaring users away. In fact, it was attracting them in invitation-only droves.
Consequently, the design caught on. Croft says that five clients in the last six months have mentioned Pinterest when discussing what they want their website designs to look like.
“At a pure level, there’s an advantage if you ave set of information that benefits from people accessing it in a non-linear fashion,” Vinh says of the layout. “For most people, they saw it on Pinterest and want to be almost as cool as Pinterest.”
A Quora “board.”
Chill.com after its December redesign.
Check Out More of Mashable’s Coverage of Pinterest
![10 Awesome Animated Google+ Profiles [VIDEOS]](http://8.mshcdn.com/wp-content/uploads/2012/02/125,animatedgoogleplusprofiles.jpg)
We Recommend
![Apple to Unveil iPad 3 in March and It Could Look Like This [RUMOR]](http://images.outbrain.com/imageserver/s/1946118/minpFUwp99qdso8ZENLgee-0-135x100.jpg&did=Ip6no "Apple to Unveil iPad 3 in March and It Could Look Like This [RUMOR]")
![Whole Foods Debuts Kinect-Powered Shopping Carts [VIDEO]](http://5.mshcdn.com/wp-content/uploads/2012/03/125,shopping-cart-141x94.jpg)
1 
2 
3 
4 
5 
We love using Pinterest at G Adventures – http://www.pinterest.com/gadventures – Great way to promote our tours in a fun and different way.
Pinterest is not for self-promotion and should be kept that was or it will end up like boring Twitter
Funny… iGoogle has had this for years.
@Pinterest is taking over!
Wonder how to make this work on the eCommerce front with a site that has product to sell….easy if you only have minimal items, but when you get to the thousands it is hard to pull off.
traditional eCommerce site has nav bar somewhere that leads user to a narrowed-down category, then displays items in that category. What if you think of those categories as boards, then just pin your items? Could be a cool site to shop at :D
It’s Like a Visual Twitter to me!
Every page looks the same it is boring.
Nice article. I had the same idea a week ago. Pinterest and the Power of Social Bookmarking: Tag Yourself (Web Design is Dead) http://uber.la/2012/01/pinterest/
Like minds think alike.
Cheers, @jmacofearth http://www.uber.la
The Pinterestification of the web is upon us!
Where’s the “unlike” button when you need it!
this is such a naive title. i thought only techcrunch was able of such miserable journalism
http://www.cheetos.com/ Has been doing this for quite some time. This is nothing new, but it is smart. http://en.wikipedia.org/wiki/Gestalt_psychology
I doubt it, but it’s a style of website, I don’t think all websites will look like this in the future. This kind of design make posts look very messy.. it works in pinterest because they received a big load of posts but only there, a example I give is thefancy.com , which is more focused in products than memes and hipster photos, so there, seeing the big photo before you fancy is nice and fast…
Welcome to the grid system. This is how the web should be laid out.
Most Tumblr blog themes have a similar look to this and have for years, not to mention almost every other design portfolio site.
that’s exactly what I was thinking! I have been using a theme on Tumblr similar to Pinterest for so long… Pinterest is pretty much a better version of Tumblr without the teenagers.
Organize your Social Contacts with Socialdex! http://socialdex.co
Let’s share – https://pinterest.com/stevelevine/
That system is far too disorganized to have staying power for mainstream websites other than “collections of random stuff”. It works for Pinterest because it’s a collection of random stuff. It doesn’t work for Cheetos.com, because I don’t know what the message is. It’s overload.
I’ve had my invite and I’m busy setting up a few boards.
Very easy to use and enjoyable to find images to add.
Noticed that some people add varying amounts of descriptive text to the images to break up the shapes.
Some very artistic people using it.
Fascinating!
I am iffy on Pinterest. As noted they did not invent this style of web design. Heck this was out in 2009 http://www.creativeapplications.net/wp-content/uploads/2009/07/dropular00.jpg.
The difference between Pinterest and all the other websites prior that had the same exact layout is that Pinterest had millions invested. That’s how it achieved mainstream success.
Give me $27 million and I’ll take someone elses idea, and then act as if its mines. Money changes everything.
My knee-jerk reaction is that this is one of those fad “insights” where Insert_New_Popular_Site_Here is Changing [Insert_Topic_Here] Forever.
Some of it might just be cynicism, but I do think there is some rational objectivity in saying that the way Pinterest does things is not necessarily the best for every website. I, for one, like news (for example) to be in reverse chronological order. Makes sense to me. On the other hand, I do think a pinboard style site could possibly be interesting for resumes (hello Linkedin?).
Anyhow, just because one site pulls off something really well and popularizes a certain style, I would not be so quick to say that they are changing websites forever. Hyperbole, much?
Normally I would agree, but there are certain types of design aesthetic that become popularized through one breakout site that ends up having a far-reaching impact on design as a whole.
While Pinterest was no doubt inspired by the brilliant work of jQuery Masonry, it uses its own unique implementation along with a healthy dose of CSS3 elements. To me, the best part of this sort of layout taking hold is as Jeff Croft said in the article, regular people now want websites that work this way.
That’s a huge, huge wind or web standards and for future design because it means that stuff that is going to require modern web browsers is finally taking hold, convincing, if you will, people to stop wanting to design websites like its 2007 or 2008.
Love this site.
Loving Pinterest.
- the new big boy on the Silicon block. #Loveit
N’exagérons rien… Mais Tumblr devrait s’inspirer…
Officially, Pinterest’s TOS say that you’re not supposed to pin copyrighted photos.
Actually, most members do. This is a problem because unlike Google– which doesn’t store the images it shows as thumbnails — Pinterest makes a permanent, full-sized copy of the image file which remains on Pinterest even if the original image and page are taken down. So the copyright holder loses control of their work if someone pins it. And the copied photo may compete with the original in search results.
Not only that, but Pinterest’s TOS says:
Notice that Pinterest claims the right to SELL content or sublicense it.
Pinterest also provides handy HTML embed codes so that anyone on the web can grab and embed an image found on Pinterest on their money-earning blog or website. So far, not many people are exploiting Pinterest as a source of “free” (and usually illegal) images, but the capability is there.
Pinterest is an especial problem for Creative Commons photos. It violates the terms of the Creative Commons license by giving credit and a link back to the article, not to the actual photographer and source of the photo. If Pinterest really catches on, it may discourage Creative Commons photographers and artists — why offer your stuff in exchange for a a credit and SEO-boosting backlink if people are going to give your images away without credit or link?
I can see sharing your own stuff on Pinterest, but I’m really uneasy about how the site seems to encourage copyright violations of a kind that really can harm the original artist or photographer by competing directly with them.
My wife got in yesterday, she really likes it, she’s really into crafts, and is a cake decorator, and quilt maker. I thought it was set up nice too. I post a lot of content, and would also benefit with this type of layout. Great article Sarah.
Let’s share
http://www.pinterest.com/scottmessier
Love the vertical layout influence.
Also..kiss images displayed via CSS background tag goodbye. Pinterest cannot (yet) find those on the page.
Great read. Impact on banking/financial content?
Agree with Sarah: MingleWing.com and UberPaper.com have implemented many of these design elements. Anybeat.com just updated their public square to use this design too.
I love Pinterest but this article just made me think of the Inspiration Room – which was a clear forerunner to this design years ago…
definitely a great tool for mood board creation!
http://www.sweetmag.my
They want to turn Internet users into dummies that just have to point at a picture to navigate, it is sad that is what it is at best, but that is my opinion.
It really is brilliant how Pinterest is organizing information. I would love to see this design approach gain wide adoption, and not just for retail or transaction based sites, but for any information rich web site.
Agreed, it’s nothing new. It works well for easy to consume items, like food photos for example:
http://www.dafoodie.com
For the better? #li
Impact on traditional corporate layouts? #webdesign
I’ve been using Pinterest for almost a week now and I’m loving it. I found a lot of cool stuffs.
Even if you haven’t ever visited popular visual bookmarking site Pinterest, you might recognize its design elements — which have been popping up everywhere since the startup burst onto the mainstream scene in 2011.
The site doesn’t use traditional web building blocks.
“It’s almost like a window-shopping mode,” says Khoi Vinh, the former design director for NYTimes.com.
Oh I love pinterest its such a awesome social networking tool! the only downside is that they havents brought out the social pin it plugin for blog pages. It drives in lots of traffic!
Called it! :D
(It’s the picture version of the content curation)
Guess I should open a Pintrest account to see how its changing the world!
If you have yet to sign up, you are missing out.
Have you tried Pinterest yet? It needs work, but it’s neat.
Um isn’t Pinterest’s design just like the create your own news site designed by – wait for it – Microsoft of all people. It looks suspiciously like that design site created in Microsoft’s innovation lab or as I like to say “try to be like Apple, people!” lab. I can’t remember what the publishing platform was though so I guess Pinterest got it beat there. :)
Oh and Pinterest is a lawsuit waiting to happen. How many people even understand online copyright law let alone follow it when “pinning,” stuff?
Pinterest = NO INTEREST. Chaos is not good web design. It might be eye candy for the ADD generation, but how is this useful?
I guess the concept of information overload does not apply here? The key to attracting new users is make them “request an invitation” that gets them excited. Never thought I would see the day that a virtual pinboard got this many people excited.
Visual Twitter? Fastest site to reach 10MM ever?