Sometimes working within certain limits can yield exceptional results. A great case for this is the one page website. It allows the designer to focus their efforts of a fixed space. Working within boundaries can lead to innovative design as techniques are adapted to solve creative problems. Let’s take a look at a few websites that maximize the potential of one page design.

“It’s a wonderful thing… to be given parameters and walls and barriers.” – Neil Gaiman

First up is Rainbow Hunt. This audio-based site generates a variety of ambient rain sounds. The user can choose or combine the sounds of light, splashing, or heavy rain. Options for ‘raindrops hitting a window’ and thunder are also included. Rain droplet animation adds to the effect, making it seem that you are looking out a window during a storm. The site features ‘day’ or ‘night’ settings as well as a minimalist version that forgoes the animation. It does a great job of serving as an in-browser nature sound generator. Moving the cursor around the site makes the view pan around slightly and the top elements collapse upon resizing. A hamburger menu allows the user to show/hide the UI, adjust the number of droplets, and set a timer. The audience in this case would be someone looking to decompress. Rainbow Hunt could be a welcomed respite during a stressful day at the office. The thunder audio can be startling though.

Next up is a site called Best Horror Scenes that collects some of the scariest moments in film history. The static section on the left features the site title and description. Watch for the blinking-eye animation. A scroll-able list on the right is home to a countdown list of creepy scenes. Each film is represented with a large thumbnail in pixelated black and white. This works well with the sparse red/white color palette. Clicking on a thumbnail plays an embedded video of each scene. The user is able to vote on the ranking below. When scaled down, the left sidebar shifts to the top and the list takes up the full width. The site is geared to fans of horror, but as the description says, not all the films fit into that genre. If you are interested in film, there is plenty take in here. An alert before the page loads lets the user know that heavy spoilers lay ahead, but it’s possible some people just want to skip to the scary stuff.

The last site one page design we’ll look at is informational site What Bars? Believe it or not, it lets the user visually compare the specifications of bicycle handlebars. A list to the left displays handlebars sorted by manufacturer. Each set has a horizontal listing of specs. Clicking ‘View’ shows a silhouette of the handlebars on the millimeter grid map to the right. Multiple clicks stack the silhouettes on top of each other in order to compare sets. Scaling down the browser window shifts the grid to the top of the page. Bicycle enthusiasts could possibly love a site like this, though I don’t think it would translate well to mobile due to the tiny increments in the grid. However, What Bars? does a nice job of presenting a lot of technically specific data in an interesting way.

Each of these designs uses the one page layout, and they each take it in their own unique direction. These are just a few examples that reinforce the point that one page designs don’t have to be boring and can in fact be used effectively for vastly different purposes.