How to Design an Impressive and Effective One Page Website

One page websites, or single page websites are very popular these days. Designers especially like them for their own business or portfolio websites.

Even though there are limitations of a one page website, there are many advantages as well. So today we decided to do researching and learn what are the advantages and drawbacks of single page interfaces (websites and apps) and also, how can we deliver an impressive one page UX.

These are 7 essential principles that should you follow, you will be empowered to create more than just impressive designs, they will allow you to design high conversion rate one page websites that will be highly profitable.

So let’s begin with a comparison of both types of web/app interfaces.

One Page Website vs. Multi Page Website

One Page:

Ease: These websites are easier to navigate and they deliver a better user experience because the user does not have to click through multiple pages to understand the deal.

SEO: Even though SEO is tricky because if your page is too heavy, SEO will not score good, otherwise, if you have a single-page layout, then your homepage page rank will be the page rank of all your pages.

Creativity: One page layouts give a lot of freedom to unleash your creativity. Since the space can be unlimited (if it is an infinite scroll website), the designer can go crazy.

Impact: When you have designed a site that is not the average joe, the use will obviously be impressed.

Mobile: One page layouts are especially useful for mobile devices as navigating through multiple pages is not easy on them.

Multi Page:

Content: Multi page layout gives you freedom to put as much content as you want. One page layout cannot carry much data because otherwise it would become too heavy and that’s the worst thing that can happen to a website.

Page Speed: Usually one page layouts use lots of jQuery effects and they don’t run smoothly on low speed computers and mobile devices. Also using large size jQuery plugins can increase page volume.

Load Time: Homepage of a multi page website will obviously load faster compared to a single page website because the homepage of a multi page website will contain much less data.

Update: Multi page websites are much easier to update.

Keyword Optimization: Each page of multi page website can be optimized for selected keywords, but on single page websites, you’ll have to optimize the whole site. This is a nightmare for copywriters and somewhat an impossible task.

What you need to know before starting to design

There are mainly two things that you need to know before you actually start sketching out. These are your target audience and your purpose of the website.

Target Audience

Of course, internet contains the most heterogeneous audience imaginable. But you can only design your thing with specific audience in mind, everybody else is irrelevant right now.

Let’s take an example and assume that your website is about a book on baby care, so then your audience is likely to be young females who recently became a mother. Now you should design your website keeping those women in mind. Of course some old men or little children might also open your website, but they are irrelevant here.

You need to analyze the demographics and psychographics of your target audience and have them clear in your mind. Once you know the target audience, only then a great design can be made.

Determine the main objective

Purpose of the website is the other aspect that is equally important for a great design. By the way, by great I mean effective, a design that gets the message through, a design that makes the user do what you want them to do. A great design does not necessarily look very flashy, it can be incredibly simple. In fact, it usually is incredibly simple.

Getting back to the topic, the purpose of your website needs to be exactly clear in your head. This purpose can be: “sell my book” or “get people to sign up for (something)” or “find clients” or anything such.

There should be one major purpose of in your mind. There might be secondary objectives that you want to achieve, but one major purpose should be clear that cannot be compromised even when others can.

Rules of drawing the layout

Once you have laid the foundation right and you know your target audience as well as the purpose of your website, then it is time to draw the layout.

Basics remain the same

You need to remember that basics of a website are the same. You still need a clearly visible navigation bar, you still need to divide all the content in sections, you still need to do everything you do in other websites. The only difference is that you do everything on a single page instead of many.

Add fixed navigation

One page websites are very long, sometimes they are infinitely long. In that case, I suggest you make your navigation bar stay fixed so that when the user scrolls down, the navigation retains its position and stays visible regardless of the fact that user has scrolled down.

Designing Hierarchy

Since everything will be placed on the homepage, you need to design a logical hierarchy for your design. That means you divide the content into sections, give all the sections a visibly different color scheme/layout and order them logically.

For instance, if you run a design studio, your website may start with introduction of your team, then you can place your portfolio, then maybe your clients list, and in the end a contact form.

Sections can be added or removed according to the needs but ordering them logically is very crucial. If you have set the target audience in mind, then ordering will not be a problem.

Design for the love of it

One page websites can be boring, so you must make them interesting. You design to show-off, you must design to nail it!
Average is not enough in one page designs. You need to use large, very large objects, typographies, high contrast coloring schemes and so on. The bottom line is that the website must keep the visitor engaged and mesmerized.

Code to impress

Usually we code to make it absolutely error-free, light and SEO friendly. All these things do matter in one page websites as well, but there is another factor. You need to code to impress. You must add jQuery animations, you can add CSS transitions and everything else that can animate or make the website dynamic.

Evaluate

This is the step we usually forget. Once you can made the website, you must evaluate after a while and check if it is fulfilling the purpose it was designed and check if the target audience is being influenced the way you wanted them or not. You can do this all with a little help from Google Analytics or Clicky or another one of such analytics services.