One page design: anything but one-dimensional

Design and layout have always been decisive factors for success in online business. The design doesn’t just determine a company’s corporate identity, it also acts as the central point of recognition for customers. This makes design a crucial factor in customer communication – whether that’s in e-commerce or for the providing of a service.

The first step to achieving online success is to make sure your website is professionally and attractively designed. As the online front of a company, a website is the first stop for potential customers looking for information and offers. Depending on the industry, more or less innovative design solutions may be required to grab attention. For those who want a change from conventional website design, single page design could be the answer – it offers many advantages to standard website solutions.

What is one page design?

Websites are usually built in a similar way to traditional print media. When searching for information and content, the user jumps from page to page – in the same way that you might ‘flick’ through a magazine, users ‘click’ through your website via the navigation tools provided.

One page web design, also known as single page design or pageless design, breaks away from a typical structure that sees users click from page to page, opting instead for a different structure: a single page. All the relevant information that would normally be displayed across several different subpages is presented as part of this single page, meaning that users receive access to all important content without having to do any clicking. This simple navigation is achieved through an intuitive, user-friendly concept.

Navigation concepts in one page design

A website built in one page design contains a single HTML document. The content is loaded dynamically. In a traditional website, there are usually a number of HTML documents that are linked to each other. But since this navigation between pages isn’t possible in one page design, one pagers make use of specialized navigation concepts that take the user by the hand, enabling a more intuitive service.

  • Most one pagers feature a fixed navigation bar. This means that navigation is always set inside the on-screen display, allowing the user to jump to any element on this page without loading a new page.
  • Markers that allow you to jump to a new section or other call-to-actions simply take the user to another position within the same HTML document.
  • Through what’s known as a scroll spy, the user is always aware of which point of the website he/she is viewing.
  • By using a smooth scroll effect, jumping between different elements or back to the top of the page is done smoothly. You can view a demo of this effect in action here.
  • Often, interactive infographic and animation feature heavily in the center of a one pager. There are some good examples for interactive graphics on this website about the story of the Olympics.
  • Another common feature of one page design is parallax scrolling. Unlike traditional scrolling features, individual elements and levels of the website move at different speeds. By using this technique, a website’s depth can be increased. A classic example of parallax scrolling can be seen in the beautiful header image for the game Firewatch.
  • It’s also common to use flat design in combination with one page design. This refers to the deliberate refraining from shadows, three-dimensional elements, and other realistic textures. A flat design is intended to reinforce the reduced, minimalistic character of one page layouts, by focusing on limited content in its simplicity and structure. This reduced design results in shorter loading times and a better overall website performance. One of the best examples for great flat design in combination with one page design is the Microsoft homepage.

Is one page design right for me?

A simple one page structure offers many advantages, but it’s certainly not suitable for every type of website. So who should and who shouldn’t take advantage of this current website trend?

The first decision-making factor here is content. If you want to offer your visitors lots of information, perhaps even broken down into different categories, then a one pager isn’t suitable for your needs. In this instance, it’s recommended to opt for a clearer structure and navigation with sub-categories or sub-pages in order to make all information available to your users. If, for example, you wanted to implement a news portal, this would be very difficult with one page web design. Because of the wealth of information and sub-categories, a traditional multipage solution represents a better option.

But the amount of information isn’t the only thing to consider when it comes to one page design. The intention of the website is also a crucial factor. One pagers are especially good for one particular thing: sales. A corporate website in a single page design format represents the ideal opportunity to communicate core statements and skills clearly and transparently to site visitors. If the information is organized in a sensible order, potential customers don’t have to search to find important information they may need to make a purchasing decision. In other words, they are being presented with all relevant information at first glance.

Storytelling in one page design

One page web design gives you a great opportunity to take your site visitors directly from arrival to conversion. For this reason, one pagers almost always feature a Call-to-Action (CTA) at the bottom of the page, usually suggesting a purchase, registration, order placement, participation, or something similar. In order to guide the user in the right direction to the bottom of the page, your content must also be organized properly and make sense. The keyword here is storytelling. If you want to convince a site visitor, you’ve got to tell a story. One page designs offer an incredible opportunity to tell the story of a product, a service, or a campaign. The interplay of text and multimedia content can be used to create a particularly powerful user experience, because the reading flow doesn’t need to be interrupted. A good example of combining storytelling with interactivity is demonstrated in a Mercedes’ campaign homepage. By using different, clickable, interactive elements and videos, the car company takes the user on a journey with the story’s protagonist.

In summary: what websites and online projects are best for a one pager?

  • Agency web presences, such as this digital agency’s site Willow
  • Personal profiles for celebrities, bloggers, and freelancers, such as this page from Melanie DaVeid
  • Introductions to projects or campaigns, like this introduction from Denkwerk

or this one from Nike

But, in some cases, a classic multi-page website with a navigation bar and different sub-pages is simply more suitable. This is particularly true for shops with a wide range of products as well as websites with more text and a stronger focus on content, particularly high quantities of regularly changing content (like news portals).

Advantages and disadvantages of one page designs

In the right context, with the right content and the right strategy, a single page website offers a number of advantages. Concentrating on the essentials usually gives websites with a one page design format a simple and clear design, making it easy and intuitive for site visitors to use and navigate.

Through the stringent and narrative arrangement of content, you can tell a clear and conclusive story to your users. With a logical, successive order of content, you can also present offers and products in a comprehensible manner. The advantages and sales arguments of your offers and products can be clearly defined and explained, helping to lead the user directly to the point of conversion. The single page design is just as suitable for simple projects or event-related websites, because all relevant information can be placed on a single page in an easily visible manner.

But there are of course disadvantages to the single page website design. As explained above, one page web design is still fairly new and represents a change from the typical website navigation route. As a result, some users may be confused by the layout, interpreting it as an advertisement of some sort. For this reason, it’s important to leave markers indicating where users should scroll or click, to avoid a negative user experience.

The running theme in search engine optimization is that ‘content is king’. But in single page design, content is deliberately reduced to the bare essentials – which can make it difficult to implement a comprehensive content and keyword strategy, because you only have a limited amount of text to work with. This means that optimization in one page design is usually limited to main keywords and topic-relevant secondary keywords.

Lastly, depending on the range, size, and number of images or multimedia elements, users can experience increased loading times with one pagers. The flat design strategy mentioned above is one way of trying to counteract this.