50 Examples of Modern Single Page Website Designs

Posted in Inspiration • Posted on 30 Comments

Everyone loves to have fast and quick way to get what he/she wants. Single page websites are the best ways to offer your visitors all the quickness possible by compiling all the content you want in a single page. They can be extremely charming for designing your portfolio or to market/sell any product. However, if you have a lot of content to express or have diverse and unrelated content, then, you should choose traditional multi-page layout. If you want to design single page website on your own then you should also have extra ordinary JS skills to create interactive and smooth navigation effect. Today we present to you 50 impressive single page websites for your inspiration.

1. Barrel + BARC

Barrel   BARC

2. Help Us

Help Us

3. Catalytic Design

Santa Clarita

4. We Shoot Bottles

We Shoot Bottles

5. Mr. President: STOP THE LEAK

Mr

6. Natrashka

Natrashka

7. Third Culture Studios

Third Culture Studios

8. Riot Industries

Riot Industries

9. Sage Media

Sage Media

10. For The Record

For The Record

11. Beaver Lab

Beaver Lab

12. Bitbots Toys

Bitbots Toys

13. Iamjamie

iamjamie

14. Lilly’s Table

Lilly’s Table

15. F5

F5

16. Jon Renner

Jon Renner

17. C3 Media

C3 Media

18. Analog

Analog

19. Balazs Koch Photographer

Balazs Koch

20. Carmilla Vampire

Carmilla Vampire

21. Christian Arth

Christian Arth

22. Conway Anderson

Conway Anderson

23. Dale Harris

Dale Harris

24. Crystaleyes

CRYSTALEYES

25. Danmoore

danmoore

26. Edward Dark

Edward Dark

27. DavidSalvatori

DavidSalvatori

28. Fabmedia Studios

Fabmedia Studios

29. Ftdesigner

ftdesigner

30. Goin Nutty

Goin Nutty

31. Helveticards

Helveticards

32. Hire me

Hire me

33. Itsmeasgar

Itsmeasgar

34. Josh Sender

Josh Sender

35. Komrade

Komrade

36. Make Photoshop Faster

Make Photoshop Faster

37. Make Your Mark

Make your Mark

38. Mobily

mobily

39. MovieTweets

MovieTweets

40. Pusulaweb

Pusulaweb

41. Provenance Digital

Provenance Digital

42. Redesigning Claudiu Cioba

Redesigning

43. Rafael Vergani

Rafael Vergani

44. Tackle

Tackle

45. The Hope Design

The Hope Design

46. The Dollar Dreadful Family Library

The Dollar

47. The Beehive Market

The Beehive Market

48. Zitrusfrisch

zitrusfrisch

49. Twenty2designs

twenty2designs

50. TheCyberTouch

TheCyberTouch

That is all for this time. Let us know your thoughts about modern single page website designs. :)

80 Written ArticlesWebsiteGoogle+

Professional design writer and SEO expert. Trying to change my life with hard work.

30 Comments Best Comments First
  • shawn boyle

    Tuesday, September 14th, 2010 15:13

    13

    I am the person who built Sage Media’s website. In the past few weeks, I have watched this site go viral on different websites that promote and highlight web design. It is so refreshing to me to see my work get all this attention.

    Thanks everyone

    +4
  • Man Mohan

    Tuesday, September 14th, 2010 06:47

    12

    Hi Taimur,

    First of all, Thanks for my website CrystalEyes in your article.

    Nice inspirer article for whom those are looking for single website.

    +2
  • Ryan

    Monday, September 13th, 2010 13:19

    5

    Nice collection, I like #48 personally :)

    +1
  • Lobo

    Wednesday, September 15th, 2010 14:52

    14

    Does anybody know where to find tutorials about how to build single-page web site??

    Thank you for the great job!

    0
  • jacekks

    Monday, September 13th, 2010 22:48

    10

    Great collection. BUT.
    Why don’t you just disable this irritating lazy image-loading ?
    It’s something like cloud of tags. Everybody went crazy about it, but it was a crap that noone used at all.

    Usually I like to open a website in a new tab, in background, and wait till it loads while reading something else. This extension is just a fokin crap that makes web-browsing a terrible experience.

    Sincerely,
    Your reader

    0
    • Rony

      Wednesday, September 15th, 2010 10:10

      16

      You can set the code on how close to the edge an image should come before it is loaded (so you can download and display the image when it is not visible yet, so it won’t be flickering/fading/etc.).
      It’s all about http-request efficiency, and page load speed – and this technique is also very useful on websites with a bunch of heavy content.

      0
  • jDesai

    Tuesday, September 14th, 2010 05:07

    11

    Always a fan of single page awesomeness! Thanks for sharing. Great effort collecting all these sites. Much appreciated.

    0
  • enam

    Monday, September 13th, 2010 14:01

    1

    nice article. very good collection…thanks a lot.

    0
  • imran khan

    Monday, September 13th, 2010 16:21

    9

    Oh!!! wonderful…. the list is just amazing and totally inspired me… every single website is worth watching… Great collection

    Thanks for sharing =)

    0
  • michael

    Monday, September 13th, 2010 20:36

    8

    Some really cool sites, love the hire me one! check mine out too please, graphicsward.com

    0
  • Lau Ardelean

    Monday, September 13th, 2010 16:11

    2

    Also a good example of one-page sites check out my portfolio page: http://www.iamform.com. Not trying to self-promote. but rather contribute to this post. I’ve gotten quite a bit of attention regarding my site.

    Thanks,

    .lau

    0
  • freshness

    Monday, September 13th, 2010 16:56

    3

    Nice collection!
    Thank you for featuring our work (http://balazskoch.com).

    0
  • freshness

    Monday, September 13th, 2010 17:06

    4

    Another single-page website from our works: http://alexandrajavor.com
    Built on XHTML+CSS and jQuery with query string manipulation (“pages” are linkable) and AJAX techniques.
    No self-promote, just an example :)

    0
  • Edmundo Junior

    Monday, September 13th, 2010 13:48

    7

    Nice list! Love the Josh Sender website.

    Here’s another single page website with a nice parallax effect (yes, I made myself, hehe :x):
    http://www.recyclevida.com.br

    0
  • Alf Catadman

    Monday, September 13th, 2010 13:36

    6

    Nice roundup here! Makes perfect sense when you want to get the message across right away.

    0
  • Andrew

    Wednesday, September 15th, 2010 09:30

    15

    This is one of the best collections I’ve seen in a while. It’s great to see typography taking a front seat, and also people breaking out of the predictable website structures. Good work!

    0
  • Siku

    Tuesday, September 13th, 2011 03:43

    26

    Inspiring designs. Thanks :)

    0
  • Tanya

    Sunday, June 12th, 2011 10:01

    25

    Beautiful job! Thanks for sharing! I like the Natrashka very much.

    0
  • Jennifer

    Tuesday, October 18th, 2011 01:42

    27

    Wow great list! I was pretty impressed by this site: http://www.ironcreative.com/#/ Super slick transitions.

    0
  • JenniferHewitt

    Saturday, March 3rd, 2012 11:08

    28

    I like “The Hope Design”, really innovative and attractive. I liked the concept of how the word “Hope” is written.

    0
  • Dainis Graveris

    Thursday, March 29th, 2012 19:20

    30

    Mila, beautiful design indeed!

    0
  • Nishant

    Wednesday, March 14th, 2012 12:11

    29

    Hi there, the best Golf website in India, http://www.touchegolfschool.com, is worth considering.

    0
  • seb

    Tuesday, February 15th, 2011 08:52

    24

    Très belle liste ! Very nice list, I love daleharris.com website

    0
  • Geo

    Wednesday, February 2nd, 2011 15:42

    23

    Very inspiring modern design.
    Many thanks for this gallery!

    0
  • Cristian

    Friday, September 17th, 2010 19:14

    18

    I’m Cristian from KreativeHouse, thank you for publishing RossoCarmilla, our next collection!

    0
  • Adie

    Thursday, September 16th, 2010 16:59

    17

    Great list of examples here.

    Particularly like number 3 Catalytic Design.

    Another good example can be found at http://kyee.co.uk/

    0
  • Richard Harris

    Monday, September 20th, 2010 13:46

    19

    One page websites are great for websites that need to show just an overview. Anything more than that and the scrolling gets annoying.

    0
  • Alex

    Saturday, September 25th, 2010 21:58

    20

    Thanks Mate, that was a very well written article

    0
  • hellodavis

    Friday, November 19th, 2010 16:41

    22

    Would like to share our one page website (www.davismw.com)

    0
  • Josh Sender

    Thursday, October 28th, 2010 18:03

    21

    Thanks a lot for the feature :)
    -Josh Sender

    0
  • Dainis Graveris

    Thursday, March 29th, 2012 19:20

    30

    Mila, beautiful design indeed!

    0
  • Nishant

    Wednesday, March 14th, 2012 12:11

    29

    Hi there, the best Golf website in India, http://www.touchegolfschool.com, is worth considering.

    0
  • JenniferHewitt

    Saturday, March 3rd, 2012 11:08

    28

    I like “The Hope Design”, really innovative and attractive. I liked the concept of how the word “Hope” is written.

    0
  • Jennifer

    Tuesday, October 18th, 2011 01:42

    27

    Wow great list! I was pretty impressed by this site: http://www.ironcreative.com/#/ Super slick transitions.

    0
  • Siku

    Tuesday, September 13th, 2011 03:43

    26

    Inspiring designs. Thanks :)

    0
  • Tanya

    Sunday, June 12th, 2011 10:01

    25

    Beautiful job! Thanks for sharing! I like the Natrashka very much.

    0
  • seb

    Tuesday, February 15th, 2011 08:52

    24

    Très belle liste ! Very nice list, I love daleharris.com website

    0
  • Geo

    Wednesday, February 2nd, 2011 15:42

    23

    Very inspiring modern design.
    Many thanks for this gallery!

    0
  • hellodavis

    Friday, November 19th, 2010 16:41

    22

    Would like to share our one page website (www.davismw.com)

    0
  • Josh Sender

    Thursday, October 28th, 2010 18:03

    21

    Thanks a lot for the feature :)
    -Josh Sender

    0
  • Alex

    Saturday, September 25th, 2010 21:58

    20

    Thanks Mate, that was a very well written article

    0
  • Richard Harris

    Monday, September 20th, 2010 13:46

    19

    One page websites are great for websites that need to show just an overview. Anything more than that and the scrolling gets annoying.

    0
  • Cristian

    Friday, September 17th, 2010 19:14

    18

    I’m Cristian from KreativeHouse, thank you for publishing RossoCarmilla, our next collection!

    0
  • Adie

    Thursday, September 16th, 2010 16:59

    17

    Great list of examples here.

    Particularly like number 3 Catalytic Design.

    Another good example can be found at http://kyee.co.uk/

    0
  • Andrew

    Wednesday, September 15th, 2010 09:30

    15

    This is one of the best collections I’ve seen in a while. It’s great to see typography taking a front seat, and also people breaking out of the predictable website structures. Good work!

    0
  • Lobo

    Wednesday, September 15th, 2010 14:52

    14

    Does anybody know where to find tutorials about how to build single-page web site??

    Thank you for the great job!

    0
  • shawn boyle

    Tuesday, September 14th, 2010 15:13

    13

    I am the person who built Sage Media’s website. In the past few weeks, I have watched this site go viral on different websites that promote and highlight web design. It is so refreshing to me to see my work get all this attention.

    Thanks everyone

    +4
  • Man Mohan

    Tuesday, September 14th, 2010 06:47

    12

    Hi Taimur,

    First of all, Thanks for my website CrystalEyes in your article.

    Nice inspirer article for whom those are looking for single website.

    +2
  • jDesai

    Tuesday, September 14th, 2010 05:07

    11

    Always a fan of single page awesomeness! Thanks for sharing. Great effort collecting all these sites. Much appreciated.

    0
  • jacekks

    Monday, September 13th, 2010 22:48

    10

    Great collection. BUT.
    Why don’t you just disable this irritating lazy image-loading ?
    It’s something like cloud of tags. Everybody went crazy about it, but it was a crap that noone used at all.

    Usually I like to open a website in a new tab, in background, and wait till it loads while reading something else. This extension is just a fokin crap that makes web-browsing a terrible experience.

    Sincerely,
    Your reader

    0
    • Rony

      Wednesday, September 15th, 2010 10:10

      16

      You can set the code on how close to the edge an image should come before it is loaded (so you can download and display the image when it is not visible yet, so it won’t be flickering/fading/etc.).
      It’s all about http-request efficiency, and page load speed – and this technique is also very useful on websites with a bunch of heavy content.

      0
  • imran khan

    Monday, September 13th, 2010 16:21

    9

    Oh!!! wonderful…. the list is just amazing and totally inspired me… every single website is worth watching… Great collection

    Thanks for sharing =)

    0
  • michael

    Monday, September 13th, 2010 20:36

    8

    Some really cool sites, love the hire me one! check mine out too please, graphicsward.com

    0
  • Edmundo Junior

    Monday, September 13th, 2010 13:48

    7

    Nice list! Love the Josh Sender website.

    Here’s another single page website with a nice parallax effect (yes, I made myself, hehe :x):
    http://www.recyclevida.com.br

    0
  • Alf Catadman

    Monday, September 13th, 2010 13:36

    6

    Nice roundup here! Makes perfect sense when you want to get the message across right away.

    0
  • Ryan

    Monday, September 13th, 2010 13:19

    5

    Nice collection, I like #48 personally :)

    +1
  • freshness

    Monday, September 13th, 2010 17:06

    4

    Another single-page website from our works: http://alexandrajavor.com
    Built on XHTML+CSS and jQuery with query string manipulation (“pages” are linkable) and AJAX techniques.
    No self-promote, just an example :)

    0
  • freshness

    Monday, September 13th, 2010 16:56

    3

    Nice collection!
    Thank you for featuring our work (http://balazskoch.com).

    0
  • Lau Ardelean

    Monday, September 13th, 2010 16:11

    2

    Also a good example of one-page sites check out my portfolio page: http://www.iamform.com. Not trying to self-promote. but rather contribute to this post. I’ve gotten quite a bit of attention regarding my site.

    Thanks,

    .lau

    0
  • enam

    Monday, September 13th, 2010 14:01

    1

    nice article. very good collection…thanks a lot.

    0

Comments are closed.

54.87.93.1 - unknown - unknown - US