Here are some ‘one pager’ sites that, in my opinion, don’t work so well. My goal here is to provide constructive criticism just as I would in an artistic critique of a traditional work of art.
- Go Pivotal – Update (4/24/13) – Pivotal has redesigned their website which does not use the single-page design technique anymore.
Let me preface by saying that I’ve never seen a website employ this technique before: a video that plays as the user scrolls by implementing a series of photographs as frames much like old flip-style animated books. Perhaps this was Pivotal’s goal – to do something that hadn’t been done before. After all, Pivotal builds applications. They’re innovators. Hell, I even use their tracking software. However, it doesn’t change the fact that this long scrollable website is unnecessary and, quite frankly, annoying. Between the performance hit (18.5 MB to load the website) and inconsistent timing between mouse scrolls, this technique seems to fall apart. The black and white photographs that make up the flip-style animation are certainly engaging, but I think a better solution is to simply have a large video near the top of the page. To Pivotal’s defense, the mobile version of the same website is elegant. It’s small in size, still has stunning photography, and makes statements fast. Why not just pull this over to the desktop resolution?
Tyler Media – A beautifully designed, well crafted, single-page website. The website is aesthetically pleasing but, it’s over sixteen megabytes to load the site. Performance aside, there are user experience problems. As I’m scrolling I feel like I’m getting lost, wondering how long the page is, wondering where I’m supposed to look or click. I feel like It’s unnecessary to force the user through such a long page to make a statement. I say: Say what you need to say, without the fluff.</li>
Designed to Move – Another aesthetically beautiful one-page design. It has delightful information graphics and engaging content. Unlike the previous sites, Designed to Move implements fixed navigation, allowing for quick navigation to the various sections on the page. The problem: It just feels too long. I find myself wondering where the end is, where the main statement will be addressed, where I might take some action. As a designer, I might solve these problems through extreme simplification – a large, bold statement at the very top and some sort of call to action. Period. I might then add small graphical icons to offer navigation to the sub-sections should the user want to learn more. Interestingly, Designed to Move does provide a primary statement and some calls to action but my first action is scrolling… not actually clicking.
Lost World Fair: Atlantis More of a playful experience rather than a content-rich website, this one pager is also done well. The key to this site’s success is the fixed man in the tube, following the user down the page. He follows you. He’s responsible for connecting your scrolling with a persistent focal point, guiding you to tidbits of content and interesting information. Even though this site does not have a fixed navigation, the site still works because I know how deep I appear to be within the design.
Avalanche at Tunnel Creek – This website is almost a hybrid of a traditional website and a one pager. It’s job is to tell a story. There are still sections to this website and I’m assuming this decision was made to reduce bandwidth. This is, in my opinion, the best example for a one page website. It breaks the mold. It brings magazine style story telling to a whole new level – by introducing animation and interaction to enhance the story. It’s engaging, it’s enjoyable to read and it feels thoughtful.
Why > How
When analyzing these sites I’m reminded of Frank Chimero’s big ideas blog post where he says “Why is greater than how”. Was a one page design necessary to execute the goals for these websites? Or was a one page design just something to show off technical prowess? What were the reasons, if any, to create a one page website? My point is this: don’t use design patterns because they’re trends; use design patterns because they’re grounded in thoughtful purpose. I say, make your design decisions solve the problems inherent in the task you’re given.