Experimental 3D page layout inspired by Flipboard(tympanus.net)
tympanus.net
Experimental 3D page layout inspired by Flipboard
http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/
28 comments
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.
Actually reading an article is a different matter, I hate sites that "support" flipboard and do away with scrolling.
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.
will it actually be used effectively? eh...probably not for anything other than on the ipad.
You can do the exact same thing without page flips. Headlines and pictures front-and-center? Sounds like almost every blog ever written.
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.
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.
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.
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.
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.
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.
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
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
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.
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.
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.
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).
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?
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?
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".
I always assumed these were the standards:
http://www.iab.net/guidelines/508676/508767/displayguideline...
http://www.iab.net/guidelines/508676/508767/displayguideline...
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".
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.
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?
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?
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.
Very neat demo! Works in Firefox 12 as well, but the rendering is not quite as smooth as in Chrome.
This is really good and I can't wait to crib this once I have an appropriate idea :D
The filler copy for all the stories is hilarious. How was it generated?
It looks like Hipster Ipsum:
http://hipsteripsum.me/
http://hipsteripsum.me/
Very cool demo!
Really good!
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!".