5 ms·

Experimental 3D page layout inspired by Flipboard

69 points by pbotelho 14y ago

jeffehobbs 14y ago
Very cool demo!
huragok 14y ago
This is really good and I can't wait to crib this once I have an appropriate idea :D
Kartificial 14y ago
Very neat demo! Works in Firefox 12 as well, but the rendering is not quite as smooth as in Chrome.
dangrossman 14y 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 14y 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".
  - dangrossman 14y 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".
  - dugmartin 14y ago
    I always assumed these were the standards: http://www.iab.net/guidelines/508676/508767/displayguidelines http://www.iab.net/guidelines/508676/508767/displayguideline...
dquigley 14y 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 14y 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://homepage.mac.com/bradster/iarchitect/qtime.htm http://en.wikipedia.org/wiki/RealThings http://en.wikipedia.org/wiki/RealThings
rawfael 14y ago
Really good!
8ig8 14y 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 14y 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.
- VDegesys 14y 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 14y 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!".
- VDegesys 14y 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 14y ago
    You can do the exact same thing without page flips. Headlines and pictures front-and-center? Sounds like almost every blog ever written.
    - VDegesys 14y ago
      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.
- ricardobeat 14y ago
joering2 14y 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?
- pbotelho 14y ago
  Thanks! You can use it of course (with caution :) )
  - joering2 14y ago
    what you mean - caution?
    - pbotelho 14y ago
      it's just a proof of concept.. not fully tested
Hovertruck 14y 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.
zf1234 14y 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 14y ago
The filler copy for all the stories is hilarious. How was it generated?
- lbotos 14y ago
  It looks like Hipster Ipsum: http://hipsteripsum.me/ http://hipsteripsum.me/
elliottcarlson 14y 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.

69 points by pbotelho 14y ago

jeffehobbs 14y ago

Very cool demo!

huragok 14y ago

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

Kartificial 14y ago

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

dangrossman 14y 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 14y 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".
- dangrossman 14y 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".
- dugmartin 14y ago
  I always assumed these were the standards: http://www.iab.net/guidelines/508676/508767/displayguidelines http://www.iab.net/guidelines/508676/508767/displayguideline...

dquigley 14y 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 14y 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://homepage.mac.com/bradster/iarchitect/qtime.htm http://en.wikipedia.org/wiki/RealThings http://en.wikipedia.org/wiki/RealThings

rawfael 14y ago

Really good!

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

VDegesys 14y 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 14y 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!".

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

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

pbotelho 14y ago
Thanks! You can use it of course (with caution :) )
- joering2 14y ago
  what you mean - caution?
  - pbotelho 14y ago
    it's just a proof of concept.. not fully tested

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

zf1234 14y 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 14y ago

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

lbotos 14y ago
It looks like Hipster Ipsum: http://hipsteripsum.me/ http://hipsteripsum.me/

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