Navigation

A Showcase of Single Page Websites

Inspiration, Resources, Web Design | Aug 24, 2010

When designing a website with a minimal number of pages and not a ton of content, a single-page design can be an innovative way to set the site apart.

Single-page websites often utilize JavaScript and Flash, along with HTML and CSS to fit more content on a page without substantially increasing load times.

Navigation has to be given some special consideration when it comes to single-page sites, to make sure visitors can get back to the home section of the page without issues, and navigate from any one section to any other section. This is often achieved through sticky headers or repeating navigation in each section.

The sites below are all excellent examples of single-page websites. They’re both usable and aesthetically-pleasing, and take full advantage of the single-page format.

 

Roaaar

The Roaaar website includes a “return to top” link at the bottom of each section, which makes it easy for visitors to get back to the navigation in the header.

roaaar

 

Duplos by Ricardo Mestre

The Duplos site takes a different approach, putting the main content at the bottom of the page. Navigation takes you further up the page, rather than down.

duplos

 

Grzegorz Kozak

The lighthouse motif here runs the entire length of the page, going from space down to ground level. Banners hanging out of windows on the lighthouse return you to the top of the page where the navigation is.

grzegorzkozak

 

Kaleidoscope

The Kaleidoscope website uses different background images and textures behind each section of the site. This differentiates each content area from each other content area.

kaleidoscope

 

Dan Scotton

Short pages like this one with minimal content work particularly well. The navigation stays in the sidebar when you scroll down the page.

danscotton

 

Viktor Shvaiko

This site uses a horizontal slider to load new content, sliding through other content to reach the page you’ve navigated to. The navigation bar stays on top regardless of what page you’re on.

viktorshvaiko

 

Jon Rundle

Simple, personal profile sites like this one are perfectly suited to a single-page design. The icons and accent colors add a bit more visual interest to the design, which is otherwise very neutral.

jonrundle

 

Jason Reed

Using an accordion effect to display new content works well when the content isn’t too long. The illustrated header image and the gray and orange color scheme both make the site stand out.

jasonreed

 

Tweet CC

Using textures and simple illustrations makes the Tweet CC site visually appealing while it’s also kept simple with a monochromatic color scheme.

tweetcc

 

PSD Layout

Sites offering straight-forward services can work particularly well in a single-page format. There’s not too much information to offer and keeping it all on one page makes it easy for potential customers to quickly find what they need.

psdlayout

 

Feelwire

The Feelwire site keeps things simple, and offers extra information with tooltips. The white background keeps it minimalist and the bold icons add visual interest.

feelwire

 

Hot Meteor

The Hot Meteor site uses a typography-focused, gray and red design. The header is sticky, keeping the navigation at the top of the page.

hotmeteor

 

Mia Makila

The Mia Makila site is a bit different than most of the other sites included here, using a more traditional 3-column design. JavaScript is used to display artwork in each category.

miamakila

 

Costas Theoharis

This site uses an interesting slider effect, with each section (the header, main content, and footer) sliding separately from each other.

costastheoharis

 

Javan Makhmali

The grid design used here isn’t seen very often in single-page designs. But with plenty of white space, it works well to include a lot of different content in a very streamlined design.

javanmakhma

 

Team Nomad

The design here is simple and straightforward, and the 2-column design works well to fit more content on the page without making it look heavy.

teamnomad

 

Jorge Fino

Jorge Fino’s site puts the focus squarely on the designs. Navigation is nonexistent (other than scrolling) and the contact information is included in both the header and the footer.

jorgefino

 

Moly Yim

Here’s another site with no navigation. It’s kept to a reasonable length, though, so it’s not an issue.

moly

 

Justin Tsang

The navigation here is a bit different. Rather than including buttons that take you back to the top, or navigation on each screen, buttons are included next to each project and content area to go up or down one screen. There’s also a navigation bar at the top to skip to each main section.

mepholio

 

Mogulista

Temporary websites are a great time to use a single-page site. This site uses JavaScript to load new content for each “page” on the site.

mogulista

 

Chirag Solanki

Navigation on this site combines both main navigation and links at the end of each section to return visitors to the top of the page. Illustrated doodles link together each section, giving a sense of continuity to the entire page.

chiragjsolanki

 

Deluge Studios

The layout of the Deluge Studios site is one of the most unique featured here. Two columns provide five content areas, all linked from the top navigation. Including main content sections in the smaller “sidebar”-style column makes the page significantly shorter.

delugestudios

 

Stage 5 Studio

The Stage 5 Studio site is short, with no navigation. “Read more” links slide out more information about each project, while other content is kept in the “sidebar”.

stage5studio

 

SmartCube

The SmartCube site uses a sticky header to keep the navigation on the screen at all times. It also uses a combination of 1- and 2-column layouts, depending on the content.

smartcube

 

Eclectique Designs

The content sections here are differentiated by unique background textures. Typography pulls everything together throughout the page, and JavaScript is used to display additional products without taking up more space.

eclectiquedesigns

 

Inside Secrets to an iPhone App

This is one of the longer single-page websites featured here. It uses a sticky header with navigation to make it easy to get from one section to any other.

iphoneappsecrets

 

Kill The Spill

Keeping a charity site like this one short and to the point is almost sure to increase the number of donations coming in. The bold typography, graphic images, and inclusion of a donation form at the bottom all work perfectly together.

killthespill

 

Emily Whitesmith

Here’s another site that starts you out at the bottom of the page. Clicking on the “find out more” link scrolls the page up to a portfolio area. Modal windows there give close-ups of each fabric.

emilywhitesmith

 

Flyer

App websites are well-suited to single page designs, as they often have limited content and only a screenshot or two for images.

flyer

 

Hayley Smith

Here’s another very long page. The navigation repeats at the top of each section, and the logo slides down the page as it scrolls.

hayleysmith

 

Conway Anderson

The Conway Anderson site uses a mix of sliders (for the about and contact info) and modal windows (for the work) to display content. The simple, grid-based design and monochromatic color scheme keep things simple and modern looking.

conwayanderson

 

Daniel Moir

Daniel Moir’s site is simple with minimal content and no navigation. The 2-column design organizes the different types of content on the site and keeps it shorter.

danielmoir

 

Latte Per Day

Pre-launch websites are very well-suited to single page designs, as is shown here. There’s not enough content yet to justify a multi-page site.

latteperday

 

The Beehive Market

Here’s another longer single-page site. The bright yellow background and bee illustrations tie the whole site together, and navigation repeats at the top of each section.

thebeehivemarket

 

Rubidine

The Rubidine site uses a sticky header with a transparent background that blends in with each individual content section.

rubidine

 

Jakub Szymanski

This site uses JavaScript to load new content and to slide down the page. A sticky footer appears after the home “page” with a “return to top” link.

jakubszymanski

 

Tyler Termini

Tyler Termini’s website is short, with navigation only in the header. Because it’s not a very long page, it’s not really a problem to have to scroll back to the top (or just scroll through each section without using the navigation at all).

tylertermini

 

Josh Sender

The grayscale color scheme here looks great. The work displayed goes into full color when hovered over, and when clicked on a color modal window opens up with a larger version.

joshsender


Written and compiled exclusively for WDD by Cameron Chapman.

What do you like best about single page websites? Have any favorites that weren’t featured here? Please share in the comments below…

Share this post
Comments (no login required)
  • http://prodigalconcepts.com/ rod rodriguez

    Cool compilation, I love the simplicity of single page designs something about it shouts at me like “Hey! look at me I’m awesome”

  • http://www.ehhwhat.co.uk Ben

    Reall nice collection

    I always wanted to do a single page design for my portfolio, i did attempt a couple which can be seen on my blog (http://www.ehhwhat.co.uk/blog/?p=83).

    Is there a disadvantage to using a “one pager” website for SEO though? I would have thought having seperate pages for work, about, contact sections etc would give search engines more pages to index and improve search engine ranking. Just wondering really.

    Really like Conway Andersons website

    • http://www.conwayanderson.com Conway Anderson

      Thanks Ben!

      I can tell ya, doing a one page site will hurt you on the SEO value. However, for me, I simplicity was the main objective.

  • http://Twitter.com Stu robson

    I’ve just finished a simple single page design for a local removals company – http://www.artremovals.co.uk using a bit of css3 and html5 to boot

  • http://www.supershackle.com ikbenivo

    Nice collection! You might want to take a look at http://www.supershackle.com/appartement-te-koop
    A site I’ve made for my brother to sell his house. With lots of jquery :)

  • pesho

    amazing list
    awesome thanks :)

  • http://www.kryzalid.net Charles Henri

    Here is a nice simple dark design one page Website we just did for a Quebec french rhetorical school : http://ecolederhetorique.com/

  • http://mousewillplay.co.uk Mouse Will Play

    Great collection. I’d be interested in peoples’ thoughts on SEO & single page websites

  • http://www.niconlyone.com NicOnlyOne

    Nice colelction.
    check out at mine http://niconlyone.com/index_en.html

  • http://www.nichterdesign.com Ed

    Some very sweet sites. The lighthouse one is top notch!

  • http://www.itsphil.com Phil Zeelte

    Some really great examples from some great designers there. Top stuff. One of my favourites there; Feelwire, great simplicity.

  • http://www.natashastorm.co.za Storm

    I generally tend to dislike single page websites, but these are quite snazzy :)

  • http://www.graphicdesignblender.com Preston D Lee

    This is a great compilation! In fact, I was about to compile a list just like this to go along with the current “one-page portfolio” tips theme we are currently running at GDB.

    My favorites?
    Jason Reed – for the artistic simplicity
    Tweet CC – for the monochromatic color scheme
    Hot Meteor – for the minimalistic color scheme with a tinge of bright color
    Javan Makhmali – for the organization and simplicity
    Daniel Moir – for the colors and textures
    Latte Per Day – for the big icon :)
    Jakub Szymanski – for the texture.

    Thanks for sharing!

  • http://www.pscyhed.be/wordpress Darkened Soul

    now THAT’s a list of sites. Some nice ones inthere, unfortunately, not every connection or browser portrays them all as they should look like… (u want fluent instead of stuttering animations of course) nevertheless, a good place to find inspiration.

  • http://laroouse.com edurup

    very very nice list thanks for sharing

  • http://www.taekema.nl Taekema

    Nice collection! I also have a single page website right now :)

  • http://www.wezen.com.br Daniel

    Nice! Mine is also a single page web site. Actually we have a “our plans” link, but I think it does not count. LOL – Check it out: http://www.wezen.com.br.

  • http://toni.podmanicki.com Toni Podmanicki

    Very nice collection! Some of these are very inspirational.

    I make my single page small enough so I can put in my pocket :)
    I call it “Pocket site”.

    But if you open it on iPhone it looks like native app.

    Here it is:

    http://toni.podmanicki.com/pocketsite/

  • http://www.web30textures.com/ Web 3.0 Textures

    Great roundup of sites, thanks for sharing!

  • http://carloshermoso.com Carlos Hermoso

    mm.. interesting.. my comment got deleted and I’d love to know why.. you might think it’d be considered spam, but there’s more people puting links to single pages so, … anyway, here I come again:

    http://carloshermoso.com

    Single-Page portfolio sample

  • http://bretglassett.com Bret Glassett

    Another great one page site – http://legworkstudio.com/

    • http://www.conwayanderson.com Conway Anderson

      I agree. Legwork does some great work.

    • http://www.alejandroperazzo.com Punta del Este

      its great

  • http://www.oxzenmedia.com Custom Internet Marketing

    Really love this collection. Seems like we have been doing more and more single pages for individuals lately. Very nice to see so many examples in one place. Love your lists and collections. Keep them coming. Thanks!

  • http://www.glasshouse.co.za bridget

    Awesome collection. Check out http://www.glasshouse.co.za

    Thanks ^_^

  • http://krsvrs.nl/ PP

    I like this one :) – http://www.arnolubbinge.nl.

  • Mark Lenter

    Found this one page teaser portfolio of a Swiss guy: http://www.gerbers.ch. Like how he uses CSS to keep the image dynamic.

  • http://www.skix.pl SkiX

    Nice collection! What do you think about http://www.pasja-nysa.pl ?

  • http://philwebservices.i.ph/ John Paul

    Awesome Collection of websites .
    Thanks for sharing!

  • http://davestl.com/ davestl

    I’m a big fan of the single page sites. Most of these sites are very creative, but I’m not a fan of the ones that you have to scroll up and down. Add some creativity with interaction.

  • http://ibrandstudio.com Eko

    Nice collection, really helpful to get inspiration…
    Thanks…

  • http://ibrandstudio.com Eko

    Nice collection, really helpful to get inspiration…
    Thanks…

  • http://www.92pixels.com Arslan

    Awesome Collection, Really Inspirational.

  • http://evanjacobs.net/ Evan Jacobs

    My personal site is a 1-page design too… I use AJAX to pull the content for each navigation item from simple content files.

    Check it out, always love getting feedback! http://evanjacobs.net/

  • George

    Greait list ;-) Thanks for sharing. You have missed: http://www.mobily.pl

  • http://www.crearedesign.co.uk/ Web Design Jarkko

    Thanks for the collection. There’s something about one page sites. It’s somehow relaxing not having to make decisions and navigate through the links all the time. Often these are very creative design-wise as well, like the ones your have posted here. Can’t really pick a favourite in this list. Many of them are great.

  • http://www.handcanon.com Demetrice

    Howdy, I just wanted to toot my own horn a bit and point out that http://www.handcanon.com is a single-page site using some simple AJAX for navigation (no scrolling required) and is built atop WordPress. Thanks!

  • http://www.workplacediaries.com James

    Wow! each day you learn something new. I wish to say that this has been very informative and i have one or two ideas from this right away

  • http://www.aledesign.it aledesign.it

    very nice list… in special way Jakub Szymanski and Josh Sender. The site by Viktor Shvaiko is amazing..great drawings!!

  • http://freshness.hu freshness

    One-page websit from our latest works:

    http://alexandrajavor.com

    They are fully XHTML + CSS and powered by jQuery and AJAX techniques.

  • http://www.tylertermini.com Tyler Termini

    Wow! Thank you so much for featuring my website! I never thought it would get on WDD. Also, I realize the navigation may pose a bit of a problem, but I never put too much thought on it. Maybe I’ll fix it for easier navigation :P

    Thank again!

  • http://www.securityking.com Craig

    Really great collection, and great ideas and inspirational and very effective.
    I did find the ones that needed a lot of scolling could maybe have been changed to individual pages though or slides or something similar, great share.

  • http://theme.w3wall.com/ rozmik

    Nice posting, unmatched collection of one page web site thank you web designerdepot to share with us..

  • http://www.brighttomorrow.co.uk Ben Pickering

    Really nice collection of single page websites, one of favorite single page websites is:

    http://www.volll.com

    I especially like the hidden interactivity in it. (Try clicking the sheep)

  • Riki

    Can you guys do a gallery of the best pre-launch websites? I’ve seen some really nice ones out there. It’d be interesting just because all the sites usually have is a logo and a place for notification. Very simple, but some of them are really nice looking.

    Would be great if we could see a gallery of it.

    • Riki

      Oh wow, I see that you already have one, w00t. Ignore the above message :)

  • http://www.alpaproductions.com alpaproductions

    WOW! These are really really inspiring!

  • http://www.craigfordham.net Lisa Thomason

    Wow! have got some good ideas from this, Thank you. LT

  • http://www.cardsoftware.net Amanda Smit

    Excellent collection with some great navigation examples!

  • http://www.bestcardprinter.com Jeff

    Awesome collection of websites. New ideas to take away, Cheers

  • http://www.salazarpardo.com SalazarPardo

    Excellent source of inspiration.
    I’d like you to visit my one page portfolio: SalazarPardo

  • http://www.johnharfield.com/ Johnny Boy

    Gotta love the one pagers!

    Here’s my very own single page portfolio…

    http://www.johnharfield.com/

    :)