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.

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.

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.

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.

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.