
Experimental 3D page layout inspired by Flipboard - pbotelho
http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/
======
nagrom
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!".

~~~
VDegesys
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
You can do the exact same thing without page flips. Headlines and pictures
front-and-center? Sounds like almost every blog ever written.

~~~
VDegesys
it's not about placing headlines and pictures front and center, it's about
placing the right ones there, without adding too much complexity...you get the
headline, the first few lines of text.. that's nothing new, look to techcrunch
or pretty much anything as an example of that. It's the layout and the fact
that you see the entire page without being inundated with scroll bars and
overloaded with information... and a blog isn't exactly the right thing to be
using as an example to compare? in fact, a blog seems like it would care less
about which article's are being read and more about just articles being read
in general.

------
8ig8
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.

------
dquigley
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
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>

------
zf1234
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.

------
electrograv
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.

~~~
VDegesys
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).

------
dangrossman
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
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
I always assumed these were the standards:

[http://www.iab.net/guidelines/508676/508767/displayguideline...](http://www.iab.net/guidelines/508676/508767/displayguidelines)

------
elliottcarlson
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.

------
joering2
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?

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

~~~
joering2
what you mean - caution?

~~~
pbotelho
it's just a proof of concept.. not fully tested

------
Hovertruck
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.

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

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

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

~~~
lbotos
It looks like Hipster Ipsum:

<http://hipsteripsum.me/>

------
jeffehobbs
Very cool demo!

------
rawfael
Really good!

