How Pinterest Is Changing Website Design Forever




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

1. Hands

Pinterest via Edris Kim.

Click here to view this gallery.

More About: design, pinterest, trending

For more Dev & Design coverage:


This entry was posted in design, pinterest, trending and tagged , , , , , , , , , . Bookmark the permalink.