Creative Techniques for Single-Page Websites

By / Jan 24, 2013 / Tips
shares

Over the past few years there has been an emergence of new custom trends in website design. A very popular idea is placing all your major content onto a single page and using dynamic scrolling animations to locate bits of content. These single-page layouts are popular among landing pages and mobile apps which only need to display a small section of related information.

In this article I would like to go over some interesting techniques you’ll find in single page websites. Hopefully these ideas may provide inspiration for younger designers who are looking to move into this area. Generally the frontend will require some type of scripting effects through a library such as jQuery. Overall the techniques can be practiced and learned very quickly, and it’s a wonderful style for basic webpages.

Parallax Sliding Effects

The concept of parallax scrolling is still fairly new to designers, possibly because of the complexity to get this working. I have seen a dozen great examples but Pixel Stadium really stands out from the crowd. Their website is easy to navigate and the textures are simply mindblowing.

Pixel Stadium website layout design interface

I could not commend their designers enough for building such a scalable webpage. As you scroll down the page a top navigation bar will appear locked onto the window. This allows users to quickly skip up or down the page into various sections. Also the layout is completely mobile responsive and will adjust based on the width of your browser window! It goes to show that single-page layouts can be pretty-looking and also flexible.

Mobile App Landing Pages

Mobile smartphones have created a niche in web design for advertising their applications. Android and iOS app developers know that launching a brand is crucial to their marketing effort. This is why smaller mobile app websites often contain information located on a single page. It takes less effort and also looks a whole lot better.

Infomatic app iphone website layout singlepage

Infomatic App uses a fairly minimalist website without a whole lot of details. But you can tell this website was not created solely for data presentation. Much of the design is centered around screenshots of the application, along with the App Store badge button. You want to promote sales with your website and single-page layouts are the best style for getting this accomplished.

Hidden Navigation Bars

In order to save space on the screen you will find layouts which attach scrolling bars onto your window only after panning down a distance. You may think of these extra navbars as hidden from the rest of the content, as they only appear when the top navigation isn’t visible anymore. The website for Radiologie provides an excellent demonstration of this technique.

Radiologie website single page scrolling toolbar nav

It is always nice to match your current navigation bar into the theme of your website. But since it will stay fixed on the page, you could theoretically use any number of design styles. Make sure your navigation is catchy but not annoying or impossible to use. I think a better example of design blending can be found on Rule of Three.

rule of three website united kingdom singlepage layout

Their website is focused on a copywriters guild of professionals which uses dark textures for professional tones. The color scheme also matches the page design, and you can see it all along the top navigation links. As you scroll down the page you’ll notice their fixed top bar appends the colored texture into the background. This can be an excellent solution to get your navigation jumping off the page.

Dynamic Transitions

The process for creating your own dynamic page animations can be rigorous. I do not recommend this path for new developers who are just getting started with JavaScript, but it can be a great learning experience. To see an example check out the FK-Agency website.

FK Agency website single page layout styles animations

Their website is designed to scale both vertically and horizontally. Notice that you cannot page up/down in the layout and must slide using the navigation links. Also true in some pages like the services and portfolio listing where you must scroll horizontally across the screen. For some visitors this technique can be very confusing, so be cautious and use common sense when building your own UX transitions.

Horizontal Sliding Panels

This technique is very similar to the dynamic transitions style, but horizontal panels have been covered by dozens of open source plugins. Just searching through Google should yield very positive results. However the execution isn’t always the problem, as much as the design aesthetics and user interface.

Numidia homepage single responsive webpage layout

Numidia is one example I really enjoy which doesn’t look exactly how you would expect. The top right navigation buttons actually behave as horizontal page sliders. jQuery has allowed even legacy browsers to adapt and support these codes. So it is not difficult at all to run your website layout using horizontal panes in a single-page style design.

 

Inspiration Gallery

Along with my points above I want to present more helpful resources for designers. This showcase gallery is a collection of some other brilliant single page websites worthy of attention. Check out these different layouts and you will notice an assortment of different user interface techniques. Also be sure to let us know your thoughts in the post discussion area.

 

Teamgeek

team geek website interface webdesign single pages

Funny Faces Camera

iphone app website funny faces design

Dash Creative

creative designs gallery icons dash agency portfolio

Code to Live By

coding website single page scrolling layout

 

Kinderfotografie

german photography website single page layout

 

Lost Phone Experiment

parallax website sliding scrolling content webdesign

 

Marketing Facts

html5 info webpage single layout design

State of the Economy

state survey united states economy facts

Touch Gesture Icons

mobile touch icons website scrolling

Pipeline

pipeline website single page static top toolbar

 

 

Laymon

laymon cooking website parallax scrolling design interface

AxiaCore

django development projects freelance business axiacore

Ideakites

iphone android ios app development studio website agency

Jmore Design

jmore design website layout interface inspiration single-page

ngage

fixed ngage scrolling website layout design

M.dot App

mdot studio website design single page website

Creative9

space design website infinite scrolling singlepage

Mirrool Creek Lamb

mirrool creek website design interface layout

Startup Giraffe

vectors circles website design singlepage studio startups

Rate Us

rateus website layout scrolling inspiration single-page

Mitchell ME

mitchell portfolio mechanical electrical contractors website

Accueil

basic website layout beige tan traveling

About the Author

Jake Rocheleau is a creative writer and UI designer. You can follow him on twitter @jakerocheleau or visit his personal website at JakeRocheleau.com.

5 Comments

  1. Michael
    January 25, 2013

    I really like the hidden nav-bar idea. It makes designs cleaner and it shows up when you need it. Brilliant examples. It’s amazing how far the web has come in just the past few years.

    Reply
  2. Taimur Rehman
    January 28, 2013

    Single page web designs are all the rage these days as professionals especially, look for web solutions such as these. It not only brings uniformity but also makes navigation as easy as feature for the visitors. Anyways, a nice effort there Jake, keep doing the good work :)

    Reply
  3. Hasitha
    April 30, 2013

    Nice collection.. now I know how to start. many thanks!

    Reply
  4. Howard Steele
    July 30, 2013

    I also like the hidden bar concept. But sometimes it makes your visitors scratch their heads :)

    Reply
  5. CodedDesign
    November 17, 2013

    Take a look at this one-page site: http://codeddesign.org

    How about adding it to the list?

    Reply

Leave a Reply