3

The front page on https://trello.com/ is an example of something I am seeing more and more frequently on the web.

It is almost like a set of slides, stacked one on top of the other.

Here's another example: https://www.atlassian.com/ And another http://www.thoughtworks.com/

Is there a name for this style? Is there a history or source of where it came from?

3
  • I'm not sure how relevant to this site the question is, would it be more useful in webmasters.stackexchange.com ?
    – Möoz
    Commented Sep 30, 2014 at 23:36
  • No particular name. Just a trend away from 'many short pages' to 'one long page with the sections clearly delineated visually.
    – DA01
    Commented Oct 1, 2014 at 4:16
  • 1
    Possibly you mean "snow fall page" named after a page on the NY times site a few years back. Here's an article explaining it a bit more.
    – JonW
    Commented Oct 1, 2014 at 6:06

3 Answers 3

3

Long-Page Scrolling Design

The paucity of answers show that the industry hasn't settled on a term yet, but my personal preference is Long-Page Scrolling Design. This has been around for at at least a couple of years, being identified as a trend by Usability101.net as early as June 2012.

What could conceivably have started out as a way to facilitate super trendy (and overdone) parallax scrolling features has evolved into a design pattern that's proven to be quite sticky. Here are a couple of reasons:

A Step Up and Away from Carousels

The major benefit I've seen from long-page design is that it frees the designer from having to use carousels or sliders. If the idea is to invite scrolling, then the concept of "the fold" (and the need to cram stuff above it) loses strength.

More Narrative-Friendly

Breaking the page into separate sections (or 'slides' as you've called them) makes it easier to tell a story. First this point, then that, then the other. It also makes it excellent for showing off product features. The example I generally use when describing this type of design is the Moz.com products page

--

As a potentially controversial side note, I think Apple's iPhone product feature page design has been the stand out leader when it comes to implementing this pattern. The latest version of the iPhone 6 design feature page is an superb example of long page scrolling design. Utilizing understated HTML5 animations to further invite and encourage the user to scroll their way through an expertly crafted narrative.

Some Links to Check Out

1

I've been seeing this kind of layout generally used in landing pages with a low amount of content, which is then divided into sections or blocks and laid out vertically in just one page.

When speaking to colleagues, we call this kind of approach a "one-page layout", generally assuming we do that kind of visual division between sections.

There's also the added functionality of sections taking the full width and height of the viewport, and snapping into place as you scroll. I personally find it useful in some occasions, and have used this little script to do so: fullPage.js

0

It has been generally referred to as 'Snowfall', coming from The New York Times website when they posted this article

Interestingly, Wired have created a new version of this that scrolls horizontally instead of vertically, which is possibly more tablet friendly. I think the first examples we saw of this were from the BBC a few years ago when they re-designed their home page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.