4 Examples of Great Below the Fold Web Design

4 Examples of Great Below the Fold Web Design

“Above the fold” thinking needs to die. But what does the alternative look like?

It was not obvious to me that “the fold” was not real when I first started writing about web design, content management, and usability. Like many non-designers, I had to have the Truth preached to me by someone with more experience and insight into the field. But the case only needed to be made once. There is no “fold” in web design, and believing that there is can lead to some huge design and content mistakes.

That said, it’s hard to rid yourself of the “above the fold” mindset when you haven’t seen (or noticed) design alternatives. So, without further ado, here are four examples that we love of websites that use subtle clues to make better use of their entire landing page—both above and below the fold.

1. Life Below 600px

Life below 600px, using an iceberg as a metaphor for deeper content below the fold.

I can’t get over how perfect the iceberg metaphor is in this piece. An old example, but with a design that has withstood the test of time, now backed by UX data that proves everyone scrolls.

I’m not sure if this was the first article to state the case against “the fold” in web design, but it’s the first one I saw. There’s a lot to like here. The post is about eight years old, but the design is barely showing its age (the biggest tell is that it’s not responsivemobile websites were still only barely a thing).

First off, the iceberg image is a perfect (if obvious) metaphor for the argument that content needs to be deep. Not only does the idea resonate, but the shape of the iceberg is a subtle visual clue to scroll down.

Of course, the whole page is about why design should focus on more than just that top screen, so it makes sense that it would use good below the fold design. Nevertheless, if you need proof, this page speaks for itself.

2. abovethefold.fyi

The landing screen for "above the fold is a myth" showing a blue dotted line which indicates "the fold," and an arrow indicating that you can keep scrolling.

A bit cheeky, but effective nonetheless. The “The Fold” indicator in the corner is responsive to screen size, and is a great clue to users to start scrolling.

OK, it might be cheating to include “Above the Fold Is a Myth” on the list, but like our previous example, it does such a good job of illustrating its point that it’s hard to pass up. Plus, it has an excellent example of a tasteful “keep scrolling” indicator.

Like our previous example, this page is basically purpose-built to state the case for designing below the fold. (It’s not the only one, but by now we think we’ve made our point.)

3. Critical Mass

The Critical Mass page, with the text subtly positioned to encourage visitors to scroll down.

The bold headline paired with paragraph text creates an editorial feel that give this site an epic quality.

Here’s another example I love of a beautifully designed page using text as a visual cue for users to keep scrolling down the page. The design of this site feels almost like a glossy magazine, with the full-screen splash image showing the broad panoramic view, and the bold headline overlapping with the body text.

The subtle parallax scrolling action as you move further down the page is also a nice touch—neither disorienting nor overdone. Combined with a well-crafted story, and it’s guaranteed to keep users scrolling till they hit the bottom.

4. What Goes Up

Page for Epic's story "What Goes Up," which is designed to encourage users to scroll down.

The vertical lines in this design are a great clue to scroll down. Once users begin to scroll, the opening text of the article draws readers in.

Finally, our last below the fold example comes from this feature piece by Epic Magazine. The whole story is well-designed, perfectly complimenting the story it tells. But the opening does a superb job of laying out the page in a tantalizing way that draws readers deeper into the narrative.

Don’t let space below the fold go to waste.

Of course, it’s often hard to find good examples of below the fold web design because so many designs are obsessed with above-the-fold thinking. Horizontal lines or frames in the top portion of a website are likely to lead to a visual impression that your website stops there. That could create a self-fulfilling prophesy where content below the fold doesn’t get seen because the design itself ignores it.

Home page design for Yeti.

As much as we love Yeti, you’d be forgiven for thinking there was nothing more to this home page than what you see here. It’s easy to miss content below the fold—and that’s their mistake.

This example from our favorite coffee tumbler company is an excellent example: from this design, you’d never know there was more to see beyond the top screen. Yeti is actually doing itself a disservice by allowing its design to discourage scrolling behavior. They could make better use of their full website real estate if they used a less constricting design.

It may seem counterintuitive to think past the top screen of your web design, but you should do it anyway. When you focus all your attention on that above-the-fold space, you train your users to believe that it is all that matters. If they have no reason to scroll down, they may not do it—and that will mean all that space goes to waste.

The good news is that you don’t need to try that hard to get users to scroll. In fact, most will do so automatically. Facebook and our own web experience have made scrolling behavior so automatic that we become frustrated by sites that don’t scroll the way we expect. Web users are content hungry. They came to your page for a reason. When you only give them the top fold of your screen, they’re likely to leave disappointed.

Trust your users to scroll down the page. Give them half a reason, and they will.

The post 4 Examples of Great Below the Fold Web Design appeared first on build/create studios.