The Secret to One-Page Designs


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.

onepage-envato

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

bcandullo

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.

volll

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

webleeddesign

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.

This entry was posted in Design Styles, Resources, Websites and tagged , . Bookmark the permalink.

21 Responses to The Secret to One-Page Designs

  1. Pingback: The Secret to One-Page Designs | Design Newz

  2. Hetal says:

    Nice article… But one page sites are nightmares for SEO. Would love to see an article on one page site SEO

  3. Pingback: CSS Brigit | The Secret to One-Page Designs

  4. Pingback: tripwire magazine | tripwire magazine

  5. Nice article, but isn’t that bcandullo.com site a multi-page site?

  6. Pingback: The Secret to One-Page Designs | Most Inspired: Design Inspiration Blog « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  7. These are really nice. I used to use the one page design, but I’ve gotten a weird aversion to scrolling lately.

  8. Pingback: The Secret to One-Page Designs | Web Design Updates

  9. Pingback: 65+ Awesome Fresh Link for Designers and Developers | tripwire magazine

  10. Pingback: The week in links 11/09/09 - Craig Baldwin's Blog

  11. Brad says:

    Many thanks for the feature.

    @Leif it is a multi-page site but technically the portfolio is ‘one page’.

    Cheers.

  12. Pingback: Darklg Web (darklgweb) 's status on Friday, 11-Sep-09 14:07:16 UTC - Identi.ca

  13. Pingback: MacDaddy Links of the Week: Sep. 6-11 | bkmacdaddy designs

  14. Entertica says:

    Nice article. We’re adopting one-page too. Enough to explain who we are and what we do.

  15. Pingback: links for 2009-09-20 | AndySowards.com :: Professional Web Design, Development, Programming Freelancer, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  16. Am I the only one who thinks this 1 page design thing is a passing fad, don’t people expect a full site now instead of just 1 page with everything

  17. Pingback: Monthly Mother Lode of MacDaddy Links: September 2009 | bkmacdaddy designs

  18. One-Page Designs are great for portfolios…

  19. Jeff says:

    I am a big fan of the one page folio. nice article.

  20. Am I the only one who thinks this 1 page design thing is a passing fad, don’t people expect a full site now instead of just 1 page with everything