Take you to comb the design of the long scrolling pages that are popular

In the case of certain content, the smaller the screen, the longer the page will naturally be. The rise of long scrolling pages is not without justification, with mobile-end market share squeezing, wearable devices and other small-screen pop, all of which are driving this trend even more popular.

The popularity of long scrolling pages has prompted designers to explore new navigation patterns and unique visual designs under new requirements, and the story has a new way of telling, and the browsing experience will be different. In such a context, we can summarize the following characteristics from the design, technology and strategy point of view:

Parallax scrolling Picture: The image material with different speed movement creates the similar 3D visual effect, brings the joyful visual effect to the user and quite effective interaction

Screen size paging: The Long scrolling page is divided into the same screen size of the page, this is a very effective way to split the content of the organization, you can make the content of the page more cohesive

Resident Navigation: Users can easily get lost when browsing long scrolling pages, the resident navigation bar can make users feel controllable and secure, avoid losing

Animation interaction: Triggering animations during scrolling can be fun for the user, which allows the user to enjoy the scrolling process

Multi-directional Scrolling page: This is a single page scrolling and long scrolling pages developed after so long after the new fashion, the page can be horizontal, vertical, from top to bottom in various directions scroll

Interactive information tip: Some users do not actively scroll the page, this time need to give appropriate mental prompts, such as "scrolling down" text and arrows, to avoid their confusion. You can also use the Action call button (CTA) and other design methods to prompt.

Many of the following long scrolling pages use these designs and techniques, which is why these pages are among the most memorable pages of the year.

Twitter

As a giant on social networking sites, Twitter's design is not bad. But what's more noteworthy is that it is the first pioneer to break the page design and is one of the most typical long scrolling page designs at the moment. Long scrolling page design is not only stylish but also useful for web sites such as Twitter, where users produce content. The infinite scrolling loading content not only guarantees browsing experience, but also facilitates the content organization.

Heart Kids NW

This is the website of New Zealand charitable organization heart kits. Long scrolling page design and animation together, scrolling operation can activate animation, stunning tones, poignant images, organized together to promote life-saving information.

It is noteworthy that the scrolling icon on the page and the indicated text on the landing page, and the resident hover navigation bar at the top.

The boat

SBS's Boat Web page is one of the most innovative long scrolling pages, and its design is as interesting as an interactive novel. Long-scrolling design gives the page a more immersive reading experience, and the existence of continuous animation and parallax makes it completely different from the traditional pages.

MCA leicester:the Seven Types of motorcycle Rider

This long scrolling page uses a gray helmet on the left as a navigation and a hint, and the user scrolls down to see the stacked page looking over and over, rendering the content.

It is this stacked page that combines the long scrolling design with the pagination design, which is very interesting.

Thirteen reasons Why Your Brain craves

Different concepts and components naturally harmonize in one page, using an information map to get in and coordinate all is a good choice. This is how the Web page is handled, and the smaller elements are freely and harmoniously flowing and rendered in this long scrolling single page. With proper animation and transition effects, monotonous data has a life.

Junko ' s story:surviving Hiroshima

The site is also SBS's, and Junko's Story tells the story by the information graph, showing the tragic plight of survivors of the Hiroshima nuclear bombing. Due to the seriousness of the content, the site's display form using the traditional graphics and text mixed row, but the overall color and style is still used in modern design.

Beagle

This page is a long scrolling page designed for the Podio tool beagle. The designer divides the content into the screen size pagination, uses to display the different content, the dynamic effect is taken to connect the page, the user's attraction moves from one paging to the next paging.

Bowhead (Tails and whales)

Like the Beagle Web site above, Bowbead's page design fully utilizes the advantages of long scrolling pages, showing their values clearly-though the entire page is designed for a single product. The website uses the dynamic effect to dilute the slide style display technique, maintains the content the attraction.

The Kings Arms

Not all the long scrolling pages are flashy, the London Kings Arms Bar uses a fixed background design, and the switch between pages is not flashy and overly dynamic.

However, the visual elements in the background use parallax images, the additional dynamic effect of the browsing process to reduce the monotony of the fixed background, so that the site to maintain vitality.

Wall ' s Ice Cream & airpure car fresheners

In stark contrast to the previous case, the Web page named Wall's Ice Cream & airpure car fresheners was designed with a gorgeous design, with brightly colored, colorful ice cream designed to navigate and you'll see interesting animations as the page scrolls down. Note the color change of the bottom progress bar and the fixed navigation design.

Beatrate Band

The Beatrate Band page also uses a long scrolling page design, which includes several experimental designs, including automatic video playback and horizontal rotation of the image.

Space Needle

The Space Needle website uses the multi-directional scrolling design, is also this kind of case the most outstanding and the most worth reference one.

More cases:

Keep

The Reveal (Lexus)

One John St

One to the, one to Kill

Cameo by Vimeo

Squarespace

Yep App

BeoPlay

Inbox by Google

Be Human by Reebok

Conclusion

From these excellent pages can be seen, long scrolling page is unique, the page design has very practical benefits. The advantages of long scrolling pages are obvious: comb the clutter of information, enhance page interactivity, free and reasonable navigation design, more beautiful and interesting visual design, and richer content rendering. Of course, considering its "long" features easy to confuse users, the content of the information should be reasonable control.