most inspired

One-page websites, or “one-pagers” as I like to call them have proven to be a very simple and effective way of relaying all needed information effectively. An issue with the standard website is that visitors need to go through a plethora of different pages before they find the information they are looking for, whilst if a visitor where to go to a one-page website, he/she knows that if the information they’re looking for isn’t available on that single page, it is not stated at all.

It is also makes the experience of visiting your website much easier to just have everything on a single page, and because of this, it’s becoming much more popular with design portfolios in particular. But not only are the designers picking up on this phenomena, and I’ve also seen some company websites adopting this trend also.

Another advantage of a one-page design is that they’re ideal for sites that don’t have much content, say galleries, and are a non-coders lifesaver when it comes to costs.

However, one-page designs also have their disadvantages. For one, a visitor will probably end up scrolling a lot more than usual on the page, as you need to fit everything on that one-page – this could be a valid reason why a visitor would not enjoy viewing such a site, and would simply leave.

So, “what does it take to make an effective one-page design?” I hear you cry, read on.

Making An Effective One-Page Design

There are a few points you need to keep in mind when it comes to designing your own one-pager, and they make all the difference in usability.

Focus on Vital Information

You’re only presenting one page to your visitors, so you have to make use of your space well. First and foremost, you need to concentrate on the most vital piece of information you want to portray. Let’s say you’re creating a design portfolio, then you could probably conclude that the most important pieces of information you want to provide are:

• Examples of Work
• Exactly What You Do
• Contact Information

So, this means you want to include such information “above-the-fold” of the page, which basically means in the top-most section of the page (before scrolling down). This is so as soon as the visitor hits your page, he/she will immediately receive the information they’re most likely after in-front of them first, rather than have to sift through the page themselves.

For a design portfolio, this may mean making the main focus of the page on your recent work previews, or a philosophy that you wish to convey to your visitors.

Use a Logical Layout

It’s very easy when creating a one-page design to put each section in a random order, but due to vastly common layouts on the web, people begin to expect certain sections in certain areas of a page. For example, a contact form should likely be placed at the bottom of the one page, or if there’s no scrolling to do, then on the far right. You would never expect a contact form to be right at the start of a page, as that placing would make no sense at all as a person would have no reason to contact you until they actually found out what you do, how much you charge, what your work is like, etc.

Be Selective

Because you only have one page to work with, you really need to be selective with that you want to present to a visitor who lands on the website. You can’t give them an entire history on your business and life, and still expect them to become engaged with the site when they need to scroll through continuously just to see some examples of your work (in the case of creating a design portfolio).

You really need to be ruthless in what text, titles, and images are placed on the website, and scrutinize the positioning and reason behind every element of the page.

Examples of Brilliant One-Pagers

Brad uses texture in amazing ways on this one-page design, and goes the extra mile to include navigation links which jump the visitor to the appropriate section on the page for increased usability and navigability.

A very interesting one-pager which features animations of robot-like figures on clouds without the use of Flash.

This has to be the most creative background I have seen in my life. Keep an eye on the color streams in the background as you scroll down. Definitely a feature to help keep visitors engaged and entertained as they scroll down the page.

Usability and Good Practices

As you can see from the examples above, one-page designs can work well with the right features in place. If you look at the navigation of both Volll and Bcandullo you see they feature jump links. These are simply links which allow you to skip to the relevant part of the page. The Envato network site also implements jump links.

If you’re going to create a one page website, you have to be weary of the more finer details of the page than you would with a standard website, and make sure you don’t miss out any details you needed to include.

A good practice would be to create a mini search feature which a visitor could use to skip through the page easily to find the information he/she is after.

Summary

So, in order to create an effective one-page design, you need to take into consideration the following:

• Precision of Content
• Positioning of Content
• Page Length
• Content Logic
• Increased Usability (Jump Links etc.)

I recommend you take a look around at some one-page designs before you jump right into it, as getting the design and layout right could pay off greatly.If you’re looking for some more one-page design inspiration, you could check out OnePageLove or FullSingle, it’s a gallery that features only one-page websites.

If you found this article useful, we recommend you subscribe to our awesome RSS feed so you can keep updated with the latest here on MostInspired.