Navigation

30 one-page sites you’ll wish you had built

By Rahul Mistry | Inspiration | Oct 7, 2013

With web users bombarded with so much information, web designers are constantly exploring new ways to deliver content. One-page websites are now being widely adopted with some of the biggest brands in the world using them to provide users with a fast, clean and simple experience that is simultaneously effective and beautiful.

Over the past few years, we’ve seen the trend towards one-page websites grow thanks to the introduction of HTML5 and jQuery, which make it easy to build stunning websites with nifty transitions and effects.

Below are 30 stunning one-page HTML5 websites, covering everything from minimalist design and simple navigation to parallax scrolling. If you’re looking for inspiration for your new single page HTML5 website, take a look at the list below:

 

1. Trionn Design

Having won several awards, Trionn Design’s one-page HTML5 website uses parallax scrolling to make it easier for users to navigate through the site. This responsive design uses attractive images to keep users engaged, and also incorporates some great CSS effects.

1page-001

 

2. Oakley Airbrake MX

Oakley have created this entertaining and eye catching site, combining parallax scrolling and amazing photography to showcase the new Airbrake MX goggles in a unique way.

1page-002

 

3. Scroll for your health

Not only is this site stunning but it also provides useful information on your ‘5 a day’, encouraging visitors to eat more fruit. The site makes use of clever parallax scrolling for a bright, almost video-like feel.

1page-003

 

4. Laura Baffari

Graphic designer Laura Baffari has created a stunning interactive portfolio that uses horizontal scroll and touch swipe for smartphones and tablets. When entering the site you’ll see tiles displaying her work which can be scrolled through in any direction.

1page-004

 

5. Pati & Felipe

This one’s for all the romantics out there. This has to be the most unique way to confirm your attendance to a wedding. A beautiful story of a couple who met many years ago, this site uses parallax scrolling with some great animation and inventive typography.

1page-005

 

6. Ian James Cox

Another portfolio bound to provide you with inspiration, freelance digital designer Ian James Cox has created an inventive doodle effect one-page website based around the “Duffy Bold” font and the popular Scroll Path jQuery plugin.

1page-006

 

7. Air Jordan 2012

Footwear specialists Nike created a captivating website for the Air Jordan 2012. Built around the footwear itself, the site uses parallax scrolling to take visitors through the creation of the trainer and the materials used as it’s assembled.

1page-007

 

8. My Pizza Oven

Pizza fanatic Renato has created this alluring site for his pizza party business. Not only does this site make you hungry but the use of graphical elements throughout the page adds a nice touch.

1page-008

 

9. Marty.com

Created by Martin Ringlein, Design Manager at Twitter, this one page design is truly unique. Use the arrows at the bottom to set the presentation slideshows in motion and see what Martin has been up to since 1999. If you’re looking for inspiration for an original navigation, do check this site out!

1page-009

 

10. Smart Phood

Smart Phood is a research project about how people eat. This colourful HTML5 one-pager has a unique scroll that gives it the ‘wow’ factor.

1page-010

 

11. numéro10

I can’t imagine how much work has gone into creating this one-page website. It uses parallax scrolling and loads of amazing transitions and graphic elements that you’re unlikely to see on any other site. Simply breathtaking!

1page-011

 

12. Saucony Kinvara 3

An excellent interactive experience using parallax scrolling and amazing transitions and effects to present the complete journey of the shoe coming together.

1page-012

 

13. Pi’s Epic Journey

This one-pager is as epic as the movie itself. It’s a stunning HTML5 parallax scrolling site that takes a behind-the-scenes look at some of the greatest moments of the movie.

1page-013

 

14. New Skoda Octavia

The new Skoda Octavia’s dedicated HTML5 website invites visitors to discover it through an immersive animated experience. This stunning one-pager uses parallax scrolling and a unique type of navigation that creates an engaging experience.

1page-014

 

15. Every Last Drop

An informative website which takes an in-depth look at how much water the average person consumes every day in the UK. The site uses graphic elements and transitions to spark conversation on an important issue.

1page-015

 

16. Reverend Danger

Stylistically similar to Minecraft, Reverend Danger uses a range of animation and CSS techniques to create a fun experience for visitors. This one-pager combines an interesting slider at the top where visitors can change the images from ‘reverend to danger’.

1page-016

 

17. Festa Italiana

Festa Italiana is another fun website that uses bright colours and graphical elements that move as you scroll down.

1page-017

 

18. Activate

Quench your thirst with this website by Activate. As you scroll down the site you are presented with clickable floating bottles. The site has some excellent transitions and effects throughout.

1page-018

 

19. D’Angelico Guitars

D’Angelico guitars were embraced by many and remained popular until the 70’s. Now the legend is reborn with a stunning HTML5 one-pager that makes great use of sound and parallax scrolling to take you through the journey.

1page-019

 

20. State of the Business Owner 2013

A unique take on the popular concept of the traditional infographic, this HTML5 one-page site present statistics from a report that reveals critical factors for small and midsize business success in 2013. Scroll down to see the transitions and effects that reveal the stats.

1page-020

 

21. Marco Rosella

A fantastic one-page portfolio site in HTML5 with a zoomable user interface powered by SVG.

1page-021

 

22. Jules Bassoleil

Jules Bassoleil’s single page portfolio has an amazingly logical and effective navigation with the graphics jumping out at you.

1page-022

 

23. Sergio Pedercini

Italian web designer Sergio Pedercini has created an elegant site to display his portfolio. The bright colours and the bouncing navigation make it attractive and easy to use.

1page-023

 

24. VonDutch

Fashion label Von Dutch’s use of parallax scrolling adds a sense of movement to its story. Icons and images move in and out of place as you scroll down the page, providing a fluid experience.

1page-024

 

25. CoolApps

A simple yet attractive HTML5 one-pager that uses animation to provide a great floating effect.

1page-025

 

26. Pixelmess

Horizontal scrolling is quite common on creative agency websites, and Pixelmess’s site is an example of it working particularly well. The combination of retro fonts and illustrations makes you feel like you’re playing an old school video game which is even more engaging.

1page-026

 

27. Renault Zoe

Renault uses a combination of parallax scrolling, audio and video to create an interactive and amazing experience for visitors.

1page-027

 

28. Officeline Lei

This is one of the best product presentation sites I’ve seen lately. The site use of parallax scrolling to present swivelling chairs specifically designed for women.

1page-028

 

29. All-N-1 House of Beauty

This responsive HTML5 one-pager features a fluid layout that includes several interactive elements and animations to make it more engaging.

1page-029

 

30. Kinderfotografie Evi Hermans

Children’s photographer Evi Hermans has created this fun and playful one-page website. Not only are the photos lovely, but this beautiful site is made even more interactive through the use of animations.

1page-030

 

Do you wish you’d built these sites? Have you built a better one? Let us know in the comments.

Share this post
Comments (no login required)
  • Ken

    Nice inspiration here. But still a little worried about SEO with One page sites.

    http://www.kindredtechnology.com

    • http://www.fasttrackcreations.com/blog Nikhil Malhotra

      I believe if the design is usable, coding is up to the mark and you have some quality content on the page then it will score high on SEO.

    • http://www.fasttrackcreations.com/blog Nikhil Malhotra

      I recently wrote an article on awwwards relevant to the topic.Might be useful for you.Here it is – http://www.awwwards.com/delve-into-the-world-of-one-page-websites.html
      Let us know your thoughts.

  • http://bilelz.fr/ bilelz

    nice collection

    what about my mine? :)
    bilelz.fr

  • HemanthMalli

    Amazing collection !! Very creative and interactive websites !!

    http://www.jacksonvillewebdesignservices.com/web-design.html

  • Andy Astrand

    I think it’s a nice idea BUT I’m a little worried about the significant number of people who’ll look and go…. what do I click on? where is everything? I don’t want to be judgemental but some people are dumb.

    • Solodin

      Very true, I love one page site designs and use them when I can but it comes down to the target audience of the site. Older users who don’t experience the web that often are used to classic layouts.

      If you’re dealing with a modern site targeted at a younger audience then I’m all for it. It’s a fine line to draw but there’s also the issue of eventually you need to integrate your audience into modern trends and standards.

  • Ian Shere

    @andyastrand:disqus – yes I agree. Personally, I found only a few of these that I wouldn’t have immediately clicked the back button. I try to build sites that have navigation-for-dumbies as stock standard. Why do designers call this sort of thing “edgy” or “pushing the envelope”? Surely good design (whether on the web or architecturally or graphically) is about user experience. Many of these make me think of one of the webs most horrible experiments – mystery meat navigation.

    AND, I too, wonder what Google will think of one page sites. We’ve long been told more pages = authority (yes, I admit spammy/affiliate sites that are one page do rank well), but maybe we’ve been sold a line there. For me, I refuse to do 1 page sites. Again, user experience. Even if Google is OK with them, I would judge a company and it’s one page site to be less than a company with a 10, or 100, page site. Rightly or wrongly, it’s about appearance.

  • http://www.fasttrackcreations.com/blog Nikhil Malhotra

    Nice Collection.i wonder if mine can be featured as one of the collections…

  • David Selden-Treiman

    Great Collection. Unfortunately, a lot of these take a really long time to load though, even on a fast connection.

  • Beaute Book

    Thanks for sharing. It has a great collection,. That gives very creative and innovative idea.

  • alandot spiders

    hi,
    thank you for sharing such a great informative and attractive designs with us.
    these are too good.
    you have a great collection of the good websites.

  • Larry O

    All of them are great. One of them took about 20 seconds to load and as a consumer I would of been gone to the next site.

  • Laurent

    These one are good too :
    For Arianespace : http://www.arianespace.tv/ariane5-html5/FR/
    & for Cabarey http://www.cabarey.fr

  • http://www.cssawards.net/ CSS Awards

    Good list!

  • http://www.trendybiz.com/ Ricky

    Awesome article. Actually i just recently made a one-pager for our new billing app http://sweetinvoice.com, There is 3D illistration with CSS3 animation :)

  • A Name

    A lot of these aren’t websites; they’re slideshows.

    And there’s a reason people don’t like Powerpoint slideshows.

  • Fabio

    Great collection! Also there are some productions of italian web agencies :)
    I hope in the future we can list some of our creations ;)

    http://www.seodigital.it

  • thetotobox

    Very nice, looking forward to apply the same concept on my website:
    http://www.thetotobox.com

  • chris

    If anyone is interested have a look too at this template – Slidexy – that we’ve put together: http://www.tallhat.com/templates/slidexy/ – it uses jQuery scrolling and is responsive as it also presents the same content well on iPhone and iPad. It ‘spreads’ the content for 2D scrolling using JS, then on iPhone it presents the same content in a much simpler vertical column format.

  • Michael Mody

    This is a great collection. I think the D’Angelico Guitars one is my favorite, though I am also partial to one I have worked on – http://belecara.com/.