Experimental 3D page layout inspired by Flipboard

http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/

by pbotelho • 14 years ago

69 28 14 years ago

tympanus.net

jeffehobbs• 14 years ago

Very cool demo!

huragok• 14 years ago

This is really good and I can't wait to crib this once I have an appropriate idea :D

Kartificial• 14 years ago

Very neat demo! Works in Firefox 12 as well, but the rendering is not quite as smooth as in Chrome.

dangrossman2• 14 years ago

For a moment I considered buying the ad space on the final page of the demo just to capitalize on the blip of traffic you'll be seeing today.

The space is 175x125, which is not a size I have a creative ready for. I've never seen a space that size before. Any reason for the nonstandard dimensions?

talmand• 14 years ago

I would imagine because most people are not aware of the standard dimensions for banner ads. Plus, in my experience, it seems like most people who think they know the "standard" dimensions would be surprised to learn that other people may think of different dimensions as "standard".

dugmartin• 14 years ago

I always assumed these were the standards:

http://www.iab.net/guidelines/508676/508767/displayguideline...

dangrossman2• 14 years ago

By "standard" I mean IAB sizes and the common sizes sold on BSA (where he's selling the ad). All the other ads on his site are common sizes; just this one slot is the weird "175x125 plus text".

dquigley• 14 years ago

This is definitely a cool demo.

One detail I noticed that might be worth adjusting is that I assumed clicking on the "Flip" box on the right side of the page would actually flip the page.

So from a usability perspective if you were actually implementing this on a real site, a popup when you click on that explaining how to swipe/drag the page over could be helpful since this is a new style of changing pages not everyone would expect? Or just make clicking on that button actually flip the page, although that kind of ruins the point of the design.

SimHacker• 14 years ago

Yeah, "cool demo, but..." -- I was also surprised that clicking the "Flip" 'button' didn't flip. Between that and the fact that you have to be on the left side to flip back, and on the right side to flip forward (just like a real book), instead of being able to flip either way from anywhere on the page, says that they are concentrating on the gimmicky "RealThing" metaphore of a book, and ignoring usability and Fitts' Law.

The User-Interface-Hall-Of-Shame-Worthy QuickTime 4.0 player and IBM's "RealThings" interface design methodology made the same mistake.

http://homepage.mac.com/bradster/iarchitect/qtime.htm http://en.wikipedia.org/wiki/RealThings

rawfael• 14 years ago

Really good!

8ig8• 14 years ago

This works surprising well on my iPad. Nice work.

But, I hope this doesn't mean I'll see more of this on websites. It reminds me of OnSwipe, which almost always results in me immediately hitting the back button (if my browser doesn't crash first).

A don't want novelty UIs. I've never had a problem reading a 'non-tablet-optimized' article on my iPad.

electrograv• 14 years ago

Very nice (as mentioned, very natural experience on the iPad). Constructive criticism: I really don't like how the back button works at all. Flipping pages here intuitively feels like scrolling, not page navigations. I really don't want to mash my back button 50 times to go back to the previous site when I'm done reading an article.

VDegesys3• 14 years ago

completely agree. If I click the back button, I want to go to where I was before accessing the entire "newspaper" not just back one page (which kinda defeats the entire purpose of being able to flip the pages back).

nagrom• 14 years ago

This is very pretty, but the UI is anachronistic. Whilst it is very cool to be able to do this and I really hope that people don't do this.

Scrolling through is a much nicer way to read through a site as you're not limited in your presentation of information by a form factor as you would be in a magazine - you don't need to fill a page and you don't need to cut information out to make a limit. If you need separators, use horizontal line separators.

This is a pretty technical accomplishment, but I see no reason to use it other than "wow! cool!".

VDegesys3• 14 years ago

at the same time, a UI like this can be really nice. I don't think it limits the presentation of information but actually simplifies it and let's you gain more info with a single glance. It also allows the designers/editors to draw you in with headlines and pictures in a traditional way, placing what is most important (we would hope) front and center.

will it actually be used effectively? eh...probably not for anything other than on the ipad.

unalone• 14 years ago

You can do the exact same thing without page flips. Headlines and pictures front-and-center? Sounds like almost every blog ever written.

ricardobeat• 14 years ago

I find page flipping to be perfectly suited to browsing section/feature pages. With a lot of boxy items, when you scroll you have to calculate your stops and take care to frame them correctly.

Actually reading an article is a different matter, I hate sites that "support" flipboard and do away with scrolling.

driverdan• 14 years ago

Agreed. Very cool but people need to move past paper and embrace the screen. Don't try to put paper on the screen, use the screen for what it is.

Hovertruck• 14 years ago

You might consider adding a curl to pages where there is a next page. Once you get to page 2 there's no real indication that there is more content after it.

joering22• 14 years ago

looks like lots of work went into this. it work great. respect. one suggestion. you made me click on article and it zoomed alright, my second thought was i can double click to close it down which obviously did not happen - and believe it it took minute to figure there is a close button on the top lol.

if you made me assume that i can click on the text anywhere to navigate, I immediately stop looking for buttons. adding double click would be awesome. thanks!

- what are the usage terms. can I build a project using this?

pbotelho2• 14 years ago

Thanks! You can use it of course (with caution :) )

joering22• 14 years ago

what you mean - caution?

zf1234• 14 years ago

I love the layout. It looks like it would be great for touch screen devices.

My first instinct was to click the "flip" button. It takes a lot of effort to click and drag with my mouse.

If it's possible I would consider something like making the page lift a little bit when the user hovers over an edge. Then just click to flip the page.

dangrover• 14 years ago

The filler copy for all the stories is hilarious. How was it generated?

lbotos• 14 years ago

It looks like Hipster Ipsum:

http://hipsteripsum.me/

elliottcarlson• 14 years ago

Looks nice - I noticed that when you pop-out an article, the back button still changes the pages behind the pop-out, perhaps it should add that to the stack as well to be able to get back to the page you were at.

Experimental 3D page layout inspired by Flipboard

Related Stories