Back in the early years of the web, one of the most recurring usability mantras was that users don’t scroll past the fold. As a consequence, web designers were encouraged not to make pages that were too “scroll-intensive”: instead, they should leverage on granular and hypertextual information architectures, and struggle to make the most out of the space above the fold, for example by horizontally aligning items and using tiny fonts. The home page of a popular design web site of the early ’00s, Kaliber 10000, is a good testimony of the then-predominant visual style.

Those were the days of the Windows 98-ME-XP transition, of dial-up connections and 800×600 PC monitors. Today, more than the 90% of users around the world browse the web with a resolution equal to or higher than 1024×768, and a significant percentage of them does it with a touch device, where scrolling with a swipe is a much pleasant experience than on a mouse-controlled desktop.

Lots of blank space, big type and full-size pictures are the visual constituents of a new approach to designing web page layouts that has developed in the post-iPad years. Take the iMac product page for example: the 2014 as opposed to the 2004 one. While multicolumn text ruled the old page, now the narrative develops in a linear fashion, by simply scrolling down the page through a series of sections, each revolving on a single topic and bearing a different layout from the preceding one. Each section takes up the whole horizontal width, thus imposing a step-by-step reading process, and features a tighter editorial interplay between pictures and copy. We could say that the 2014 layout is magazine-like, while the 2004 resembles more that of a newspaper.

I decided to study this new paradigm in-depth, on the premises of a couple of questions:

• can we abstract the fundamental rules of this new visual language in the form of repeatable design patterns?
• can we associate them to basic content models and translate them into CMS requirements?

So, I built a list of fifty web sites and pages from the following sources:

• the most recent and the most user-favorited sites according to two specialized portals, Onepagelove.com and Onepagemania.com
• a dozen “best of” articles on storytelling, parallax, and the like
• a selection of recent product sites and other web properties of some big Internet players such as Apple, Google or Facebook.

Then, I grouped them in four broad categories, in order to better identify segment-specific patterns: product, service, portfolio, storytelling.

After going through this, I think that this kind of abstraction is possible. Here are the design patterns I propose, along with some technical hints concerning CMS content modeling and popular (jQuery-based) JavaScript utilities.

Layout patterns

Thoughtful information chunking and presentation is the main working principle of a single-page web site. Each and every one of the web sites in the list show a clear sectioning of content in distinct in-page “chapters”. Despite being visually very different one from the other, chapters can be assimilated to a limited set of recurrent organization schemes.

Hero

Problem

The attention span of online users is notoriously very limited. The space above the fold is then crucial to engaging the user and preventing him to go away: that’s why it should be designed to be both pleasant and informative at a glance.

Usage

Since all the web sites I examined rely on a “hero area conscious” design, I think we should consider this a defining pattern, and therefore it should be always applied in the design of one-pagers.

Solution

Think of the hero area as a sort of an elevator pitch: delivering a very direct and discernible message is key, in order to make it easy for the user to recognize the subject matter and the main selling point. Therefore, emotion plays a big role in the design of a hero area, and none of Norman‘s dimensions should be left off: depict pleasant subjects in a pleasant context (visceral level), clearly address the benefit to the user (behavioral level), recall the cultural message connected to the subject and treat it as a valuable element (reflective level).

The combination of a full-size photo with a concise and straight headline copy set in big type is the most common recipe for achieving this. Hero area graphics often adapt to precisely fit the viewport, in order to achieve a magazine-like cover effect.

Other frequent subjects in hero areas are testimonials and lifestyle-evoking situations. Infographics-intensive hero areas can be very effective at the behavioral level, while pure copy can be a very powerful visceral-and-reflective device.

---

Image-plus-text

Problem

Web users don’t read, but skim through content: this has always been another staple of web usability. One-pagers need to build on this principle, especially to prevent fatigue when interaction is reduced to a pure act of reading and scrolling. In fact, the most marketing oriented pages fit better in the category of presentational media, such as “Power Point” slide decks, where text is restricted to concise and bold statements, leaving room for pictures to convey and reinforce meaning.

Usage

This is definitely a general purpose pattern. It should be applied when, for the sake of reasoning, a topic needs to be enhanced by a single big photo or illustration.

Solution

Reduce copy to a box of no more than 20-30 words; if you need more, divide text in headings and body. In feature stories, with chapters exceeding a word count of 100, the relationship between textual and pictorial content should be rebalanced by introducing, for example, a slideshow instead of a single static photo. It is not infrequent that in adjacent image-plus-text sections the layout is swapped, in order to add visual movement to the page.

---

Static enumeration

Problem

It is often necessary to display several information items as a list or table. Despite being a powerful reasoning mechanism, enumerations are usually boring to the reader. In order to make them effective, it is necessary to make them visually interesting.

Usage

Another versatile and widely-adopted pattern, we could consider it as a “spiffed-up” bullet list.

Solution

Provide a picture for each item in the list. Keep lists simple: try not to exceed a length of three or four items, and avoid internal hierarchy. When lists need to be longer, split items among multiple lines and columns in order to keep their size reasonably big. For best results, the number of items in the list should be even, so they can be displayed in a symmetrical fashion, and copy length and structure should be consistent.

---

Carousel

Problem

Sometimes elements in a list require a lot of visual space to be displayed effectively. For example, apps web sites usually need to display some screenshots if the user interface, and presenting these images all at once in a static list would require too much screen real estate.

Usage

While the static enumeration pattern is good for listing brief, mainly textual content items, carousels allow the display of series of graphic-intensive elements, such as photo galleries and slideshows.

Solution

Display one element at a time in an interactive slideshow. For maximum efficiency, the slideshow area must correspond to a single visual chapter in the page. The user should be able to navigate back and forth between slides by clicking on “previous” and “back” arrows, and by swiping directly on the content. He should also be able to intuitively detect the total number of slides and the currently displayed one.

---

Full-width

Problem

Sometimes communication requires a visual richness that is hard to reduce to a structured set of CMS fields: I think of animations, maps, infographics and other complex illustrations. It seldom happens among the web sites I examined, but it’s a situation than should be taken into account.

Usage

To the designer’s discretion, whenever a content element, in order to be effective, should retain the maximum available space, and is impractical to translate or manage in a CMS. This is a sort of a residual pattern, to be adopted only as a last resort.

Solution

Simply provide a single embed field for external content, or directly hard-code everything.

Navigation patterns

Default linear scrolling is the basic navigation mechanism of single page web sites. In fact, the rediscovery of sequentiality in storytelling is a defining element of this new trend, and it comes as no surprise that almost all the web sites I have examined require the user to simply scroll the browser window in order to sift through content. Thanks to JavaScript plugins such as jQuery.scrollTo, automated, progressive scrolling can make up for a very cinematic experience. Other libraries, such as jQuery.inview and jQuery-scrollspy, are able to detect the current scroll offset and if an element is currently on- or off-stage, making it possible to trigger animations and other behaviors accordingly.

But scrolling is not the only way of navigating single-page websites: usually these web sites feature also some kind of interactive, anchor-based internal navigation that is triggered from user actions on the page in order to directly bring single sections into view. To achieve this programmatically, in the CMS there must be a way to univocally identify chapters so that they can become an entry in the menu and a landing destination.

Linear scrolling

Problem

Layouts with big elements and a lot of breathing room require obviously more pixels, and end up making long pages with most of the content off-view.

Usage

Whenever the page content exceeds the browser viewport. Actually, as far as this sample is concerned, it is almost always the case.

Solution

Linear scrolling is readily available in the browser. Usually it is a matter of vertical scrolling, but horizontal scrolling is employed as well. The browsing experience is usually enhanced by animating the transition between sections as the user scrolls. Animation-wise, “overflow” scrolling inside an HTML element can be less fluid than the default whole-window one, especially on Safari iOS, so it should be discouraged.

---

Start

Problem

When the hero area is made to exactly fit the viewport a potential discoverability problem arises, because an unexperienced user may be led to think that there’s nothing more to scroll for. This is especially true in browsers that hide scrollbars when idle, such as Safari on iOS.

Usage

It is always a good practice to place hints in the UI that help the user browse content more easily, particularly when important sections are initially off-stage and are thus invisible. Therefore, to some extent, this practice should always be encouraged.

Solution

Designers should insert a redundant perceived affordance that encourages the user to start scrolling. The two most common solutions, at least in vertical-scrolling pages, are a down-facing arrow and a “scroll down” textual hint. This kind of visual aid can, and should, be made interactive, and turned into a link to the next step, whatever it is.

---

Persistent menu

Problem

The lack of a familiar, menu-based navigation system in the layout can be a cause of disorientation. In web sites, menus serve not only as a mean of moving between pages, but also as a table of contents and as a “you are here” communication device.

Usage

Despite apparently useless in scrolling single-page web sites, an anchor menu should always be featured as an additional, direct access internal navigation system to enhance usability. Most of all when content is rigidly structured in discrete thematic sections.

Solution

Provide a menu, either horizontal or vertical, and make sure it’s immediately displayed along with the hero area. Usually the menu’s position should remain fixed and in the foreground during scrolling, so that it is always visible no matter how high the offset is. “Scrollspy” behavior is frequently adopted to highlight the menu item that corresponds to the current scrolling coordinates.

---

Step-by-step

Problem

Some graphic designs inspired by slide presentations and motion graphics suggest to use the viewport

Usage

As in the Linear Scrolling pattern, this kind of navigation should be provided whenever content exceeds the viewport, but when the designer wants to emphasize the self-paced, slideshow-like element of the experience.

Solution

Disable the default automatic overflow of the main browser window, and give access to the other off-view elements only by means of automatic transitions fired by user actions, such as clicking on a “next” button.

Transition patterns

When not overdone, animated transitions are a welcome enhancement in single-pagers. They add a playful element to navigation that helps for a smoother and more memorable user experience.

Preloader

Problem

Initial slow page load time can be a serious issue: it is reported that 40% of people abandon a website that takes more than 3 seconds to load. Therefore it’s necessary to elegantly manage the wait, by providing visual feedback and avoiding sloppy rendering behaviors such as FOUC or jerky asset display.

Usage

When the overall page weight is high and most elements need to be loaded in advance in order to provide a smooth user experience.

Solution

Due to technical limitations, desktop-like progressive bars still cannot be reliably implemented in the HTML5 world. In spite of this, it suffices to show a simple loading animation such as the ubiquitous spinning wheel, and revealing the page content only when fully loaded.

---

Animated Layout

Problem

In default window scrolling, objects move in parallel at the same speed and retain their position. Everybody is accustomed to that, and it can be quite boring to the eye. Animating entire sections or even single objects can spiff things up and provide a more pleasant and memorable experience, even better if animation is tied to the narrative of the page.

Usage

Whenever the user experience needs to evoke concepts of dynamism and playfulness.

Solution

Parallax effects are an ubiquitous solution to spiff up a page, by moving objects at a different speed during scrolling or tilting. Parallax.js is just one of the libraries devoted to this: in the HTML and CSS code it is necessary to separate elements in the page and absolutely position them, something that can be taken into account in content modeling and CMS design. When animating elements by their position, high granularity of moving (e.g. shifting single elements instead of whole sections) corresponds to complex data structures: more fields in the CMS and more precise data entry are then required.

---

Progressive redesign

Problem

Videos and motion graphics are powerful storytelling media, because by moving items on the screen in sync they can show narrative progression and relationships between objects and concepts in a very intuitive and engaging way.

Usage

When the page focuses on storytelling by means of illustration and cinematic techniques.

Solution

Develop the page as a single illustration, and attach animation to scrolling and other interaction events. For best results, employ technologies such as SVG, CSS3 and the HTML5 canvas. It is a technically challenging solution: as a matter of fact, it is hard to imagine a CMS behind it.

“Drill down” patterns

Information chunking means also prioritizing contents and structuring it in different levels of depth. Especially in marketing-oriented layouts, topics should always be addressed first in a concise and mostly visual way, for example with an image-plus-text section appealing to anyone; further evidence and detail, such as documents, data tables and pictures should be made available upon user request.

Modal View

Problem

Many times in-depth content requires a significant amount of dedicated screen real estate and user attention, but placing it in a standalone main page can be dispersive and inefficient.

Usage

Whenever the in-depth content to provide is a self-contained content object, such as a video, that doesn’t justify a dedicated main page, and works only after having previously introduced its subject matter.

Solution

Provide a clear “learn more”-type call to action, and open content in a child window. Popular “lightbox” libraries like Colorbox can easily deal with many types of content out of the box, such as pictures, galleries, videos or HTML snippets, and are a de facto standard for such situations.

---

Reveal

Problem

When in-depth content is produced in the form of a complete, independent page, accessing it with a traditional HTML hyperlink would cause a total window refresh, something that temporarily breaks user engagement and that, by today standards, can be often avoided without usability or SEO side-effects.

Usage

A variation on the Modal View pattern, it should be seen as a smarter way of managing the traditional navigation between pages.

Solution

Open the detail view inside the main page via an AJAX call, and present it as a modal child view by exploding it with a smooth transition and visually suggesting its logical dependence from the main view (e.g. an “exit” button).

Conclusion

There has been a lot of talk concerning single-page web interfaces from a user experience standpoint: AJAX-based navigation and parallax effects, for examples, have been, and still are, the subject of many technical articles and development projects. One-pagers represent a big paradigm shift also in terms of information design and visual communication: nevertheless, it seems to me that discussion and research hasn’t yet gone past occasional “best of” galleries.

Knowledge is still in the head and hands of talented web designers, such as those behind the web sites I have reviewed. Abstracting it in the form of reusable design patterns can contribute to the development of a “one-page visual language” that can be embraced by marketers, content creators and other web professionals as well.

Last updated: November 19, 2014