Create an Awesome Single-Page Website

Not every website needs to be complex or include multiple pages of content and information.

Sometimes one page is enough.

But just because you are creating a website with only one page, does not mean that it will be easy.

Developing a single-page layout can require just as much thought and planning as some more complex sites. It needs to have all the same basic parts as a bigger site and should look visually stunning, work as expected and have a clear purpose.

Here we take a look at some awesome single-page designs, which are more popular than you might expect. While you can see what these sites look like, go ahead and visit them to experience some of the great user interface features built into many of these sites.

What is Single-Page Design?

Creatance

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

6eme Festival Premiers Actes

A single-page website is built in a single window.

The single-page concept is based more on scrolling rather than clicking (although clicking is not outlawed either) to see and move through the site and its contents.

A single-page website can be as simple as a “page” that fits neatly in a browser frame and is contained above the scroll. But that is not always the case. Single-page websites can scroll (although it is important not to create too deep of a page that can be overwhelming for users).

Simply, a single-page website is one that does not include links to other pages within the domain and all of the content is located in a central frame.

Why Opt for a Single-Page Design?

Adam Woodhouse

Lost Phones

Single-page web design comes with a lot of caveats and is not for every project.

Where it is gaining popularity is as a preview to an upcoming app or site with an e-mail opt in form, as a portfolio tool, as a page that encourages you to go elsewhere or for a company that can showcase its product or message simply.

Single-page websites are often highly designed, because they get one chance – one impression – to grab a user’s attention in a cluttered visual landscape.

These types of pages only work for sites that don’t have an abundance of content – sites that sell a single product; site aimed at promotion of another site, app or item; small portfolios or simple information.

While the design of these types of pages is often highly visual, text is kept to a minimum. Single-page sites also require a clear and easy-to-understand user interface so visitors know exactly what they are supposed to do with the site.

Have a Purpose and Goal

Track Time

My Corks

Fajne

Funny Faces

Start the single-page website design process with a clear purpose and goals. What do you want users to do on your site or what information should they soak in while there?

If you are previewing an app, for example, you might want users to provide an e-mail address so you can tell them when it launches. If you are selling a UI kit, your goal is to convert visitors into sales.

Other actions might include, filling out a form, watching a video or clicking through to another website all together.

Know what you want users to do before you begin the design and re-emphasize this throughout the process.

Design Tips for Success

Thinkbear

FK Agency

Now that you know what you want to happen with your website, use this set of simple tips to get on the road toward publication.

Create a first impression. You only get one chance to bring in new users. Your site needs to have visual appeal and tell users why they are there quickly.

Stay focused. Remember your goal and eliminate any tricks, design elements or copy that could get in the way.

Play up strong visuals. Whether it is color or images or beautiful typography, pick a great visual and use it in a big way.

Develop clear navigation. Even though you may be wondering what you need navigation for – it is only one page after all – any site that contains multiple scrolls, forms or links of any sort needs clear navigation. Tell users what different buttons will do (especially if they take you away from the site). Even sites with a small amount of content need to include clear and understandable directions or calls to action.

Stay organized. You will never be able to say everything you think of in the format (or space) of a single-page design. Stick to what’s important and order everything based on hierarchy. Write clean, clear copy and edit until the words are sharp and concise.

Have fun with the design.

Cool Tricks and Effects

Fifteen

Infumatic

Brig

Pixelstadium

There are an unlimited number of cool tricks and options out there that can help you make the most of a single-page web design. Some of these are even “stolen” from mobile concepts, where single page design is quite common.

Parallax scrolling: Scrolling effects are one of the most popular “tricks” in single page design. With the flick of the mouse, users get a new page without clicking or navigating away from the initial landing page. This type of effect can encourage users to see what comes next in the design by continuing to scroll, read and interact with the site. (You can learn even more about parallax scrolling in this previous Designmodo article.)

Mobile app landing pages: Create a specialty landing page that encourages users to download an app when visiting on your site on a mobile device or tablet. This “pop-up page” can help convert web users into regular app users.

Hidden navigation: Menus that pop in and out of the frame when the mouse comes near is a way to help save space in the overall design and provide navigation in a familiar location (most commonly at the top of the page). You can also experiment with other navigation tricks such as the one on Jamie Oliver’s Fifteen page where the navigation starts in the middle of the screen and moves to the top (and locks in position) as you scroll down the page.

Animation: If parallax is not your thing, consider an animated or video background for visual interest. Movement entices users to stick around and see what happens next.

Conclusion

As with any other type of design “trick” or trend, single-page websites only work if your content is created for it.

This style works best for sites with limited content and strong visuals.

Have you created a single-page website not mentioned here? Show it off by sharing a link in the comments.

Carrie Cousins has more than 10 years experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with her on Twitter @carriecousins and Google+.

Newsletter

26 Comments
  1. Scott Robinson Aug 8, 11:49 am

    What about when it comes to SEO? can this be implemented as if you were building different pages?

    Reply
    +4
  2. Casper Odendaal Aug 8, 12:15 pm

    I’m crazy about single-page websites! I created a nice responsive single-page site as my wedding invite :) Check it out here: http://www.casperendanel.co.za/

    Reply
    +14
    • Pete Aug 21, 10:44 pm

      Nice site but I would wonder if it’s the best idea to tell everyone on the internet when/where you are getting married! – not only do I know your location on the day but I could probably work out where you live and therefore know that your house is likely to be empty on that date. Plus this is also giving out personal information for spammers and of course allowing gate crashers to access your wedding….not really the best idea.

      Reply
      -2
    • Corentin Branquet Nov 9, 2:11 pm

      What an amazing single – page website !

      I love it !

      Reply
      0
  3. Robert Aug 8, 1:36 pm

    This might be useful to anyone looking to create a one page website

    http://www.outyear.co.uk/smint

    :)

    Reply
    -2
  4. Mariusz Aug 8, 1:51 pm

    I actually created my site as a one-page design because it was an MVP and I wanted to get it out there as soon as possible. So I did. Since then, it was featured in a couple of places and I’m still doing small incremental updates: http://mariusz.cc

    Reply
    +5
  5. Tooschee Aug 8, 3:20 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -10
  6. Mehar Ateeq Aug 8, 3:59 pm

    Good article i want help how i can add scroll to load more content in my 1 page website.

    Reply
    +4
  7. Amanda Aug 8, 5:12 pm

    Although I understand the question above in regard to SEO and needing more indexed pages to help elevate your rank, as a designer I am obsessed with single page designs. I created my personal web portfolio as a one-page design and used jquery for “clickable” links that scroll through the content.

    http://pixelsandpancakes.com

    Reply
    +2
    • ozgur coruhlu Aug 9, 4:32 pm

      You better check it out more often, since it doesn’t seem to load you css there.

      Reply
      +3
    • Mehar Ateeq Aug 12, 7:33 pm

      Your website not loaded you css files successfully.

      Reply
      +1
  8. Mike Aug 8, 5:39 pm

    I too echo the above comments with regards to SEO. I am newbie to web design (just in process of getting set up) and I am curious how SEO is implemented in single page websites, especially in portfolio site or similar. I get it wouldn’t be an issue if the single page was to promote an app or product.

    Good article thought and some nice examples to boot.

    Reply
    0
  9. Erick Jones Aug 9, 3:14 pm

    I’ve implemented a single-page concept for a project, who was massacred by SEO specialist. I want to know How can we use single-page and workaround the SEO to act as a multi-page website, not losing any if compared both approaches.

    Good article. I love Design Modo.

    Reply
    -1
  10. Scott Robinson Aug 9, 3:19 pm

    This one is a good article on SEO for Parallax websites
    http://www.awwwards.com/seo-optimization-for-parallax-scrolling-websites.html

    Reply
    -1
  11. ozgur coruhlu Aug 9, 4:30 pm

    I like the interactivity of a single page sites, however it kills me that its already overdone, I see some examples that its used just because. and of course the SEO is an other issue in many case. We have just launched our new site if any one wants to take look at it. http://batescreative.com

    Reply
    0
  12. Min Aug 9, 7:03 pm

    Great article!
    My reason for building my portfolio site in a single page was to save time, but after reading the article, it made me look in a different perspectives. Perhaps, I should rebuild the page with the tips from the article.
    Meanwhile, here is my site. http://endlessstudio.com/

    Reply
    -3
  13. Sunny Aug 9, 8:24 pm

    Is there any guide or tutorial resources on creating a single page website that I can use?

    Reply
    -1
  14. Ron Aug 9, 9:28 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -9
  15. Jens Nielsen Aug 13, 12:02 pm

    Thanks for including my site in the article, always nice with a little pad on the shoulder :)

    My reason for doing a single pager, is simple.
    I think it fits a portfolio perfect. Simple, clean, and to the point + when you have a full time job, its way easier to produce, when you don´t have all the time in the world.

    once again, thanks for the link.

    Jens Nielsen
    thinkbear.net

    Reply
    +4
  16. HemanthMalli Aug 13, 4:05 pm

    Right now im working on single page website. These websites are providing good inspiration for me. Thanks !! I like single page websites as they are interesting, easy to update and easy to navigate through scrolling.

    Reply
    0
  17. Ally Aug 13, 9:12 pm

    In relation to the SEO questions, yes 1 page is not ideal as it has no internal links by definition.
    But you’d take the same approach nonetheless- add in etc and then seek good quality inbound links

    Reply
    +1
  18. Ally Aug 13, 9:13 pm

    sorry my tagged words got deleted- H1, H2, meta description, meta title etc- and quality content for your 1 page..

    Reply
    0
  19. Andy Aug 16, 10:56 pm

    Nice read.

    Often by taking a content first approach it lends itself to a one pager quite naturally. They’re right when they’re right :)

    When we worked on the copy for Made By Block, we ended up here:

    http://www.madebyblock.com

    Reply
    +2
  20. louis currie Aug 22, 11:41 pm

    Single page websites is the direction to go if you want to transmit a message in a few scrolls. I used it for my personal website so people get a quick idea before bouncing off :D
    http://louiscurrie.co/

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters