Print to Web Series: The One-Page Site = The New Poster?

Editor’s note: This is part of an ongoing series that explores the relationships and similarities between traditional print design and web design. For more inspiration, check out Patrick McNeil’s related article on the subject:

A huge trend that started a number of years ago was the single-page website. This approach packs all of the information into one page. It started off as a way to create a simple design, focused on rapid communication, often used as a simple e-commerce portal or an efficient portfolio page. But it’s evolved into an art form all its own.

As I’ve observed the flow of new single-page sites, it’s become more and more clear to me how connected the style is to poster design. (If you’re not already familiar, here’s a great gallery of notable poster designs throughout history.) But since these one-page online “posters” are interactive, designers can give them a twist.

Making a career transition from print to web design? HOW’s online web design tutorials can get you there. Start with From Print to Web: Translating Your Skills to New Media and Markets by Mark O’Brien.

The single page approach creates some unique opportunities in terms of navigation. For example, in many cases the user will scroll from top to bottom. This means they’ll consume the page in a predictable order. With a multi-page site, you have to be prepared for users to enter at any point in the site. But the flow of a single-page site lets the designer tell a story and finish off with a desired call to action.

Another interesting benefit is the simplicity from a coding standpoint. For example, there’s no need to make the design based on a repeatable page template, intended to expand and grow to fill an infinite range of content. This makes a content management system or other framework a lot less necessary.

Finally, another great perk is the potential for animation. Since the user is moving around inside a single page, you can use animated elements move from one frame of content to another. This is a popular tactic that you’ll see in many of the examples below.

How well do you truly understand the audience that you’re creating your website design for? Jose Caballer presents an online design tutorial on February 21: How to Define the ‘User’ in User Experience; learn more and register.

Here are some fantastic examples, and please click through to the sites—you have to experience them to truly appreciate them.

Sliding elements

A popular technique with single-page sites is the use of sliding elements. As the user scrolls, some elements of the page slide faster than others, sometimes even in different directions. So as the user scrolls down the page, it comes to life and is seemingly animated. This can be used to highlight certain elements, to transition to the next area, or to simply bring life to the content. Here are a few incredible examples:

Dynamically loading content

Another approach is to change the contents of the page based on the actions of the user. In the following example, the page dynamically loads up (reveals) the requested content rather than refreshing the whole page, creating fluid interaction for the user.

Drive to conversion

Sometimes as you work on a project, you come to realize a big multi-page site just isn’t needed and could actually take away from the focus. For example, some single-page sites exist to promote and sell a single product. As a result, the focus drives users towards the point of conversion. This style is particularly popular for mobile apps, but is applicable in many other situations as well.

Elements that follow you

I love it when single-page sites have elements move from one content area to another. For example, one of the sites below has the logo follow the user down the page, and another has an illustrated mascot flow with the contents of the page. These ever-present elements let you reinforce a brand or a feeling within the single-page context.

Fixed navigation

One of the most problematic parts of building a single-page site is helping users get around. In a typical site, the navigation stays in the same part of the page. But with a one-page site, the page might be very long, and scrolling all the way back to the top to find a link can be burdensome. One solution is to have a menu fixed in place when the page scrolls. This way, the navigation is always within clicking range and lets the user quickly jump to any section they’re interested in.

Push the envelope

Finally, I want to finish with a look at some really insane examples. These single page designs do things with HTML-based content that is hard to comprehend and in many cases pushes the boundaries of what we expect from a website.

This site looks like it’s all flash. But under the hood, it’s all HTML, CSS and a small mountain of JavaScript. The end product contains all the hallmarks of a Flash-based site: animation, transitions and sounds. Combine this with rich visuals, and the end result is super flashy.

I have yet to find another example that looks or feels like this site. Because it’s so text-based, it feels like a document editor, but it’s really an interactive tool for learning about this development company. The simplicity of the site at first feels bland, but as I used it, it grew on me and I appreciated its clarity.

While most one-pagers scroll vertically, this one moves horizontally. Other sites use this technique, too, but this is one of the best examples I’ve found.

One of the earliest approaches to making a one-page site interesting was what this page does: As you scroll down the page, the background appears to animate and change. In reality, the background is just a really long image.

This little gem combines a cool visual with a fun, creative animation, demonstrating the individual’s abilities in a refreshing way. No words are needed to communicate the skill of the person behind the site.

More resources for print designers transitioning to web design

5 thoughts on “Print to Web Series: The One-Page Site = The New Poster?

  1. Pingback: One-Page Web Designs: The New Poster? - Patrick McNeil

  2. Pingback: 207 Articles on Effective WebDesign - Winter 2011-2012 - PSD to HTML Blog