Less Is More: One Page Websites

What really matters when creating a website, is getting the message across. So while it might be fun to loose yourself  while exploring the pages, there’s no need missing the point while doing so… They say “a picture is worth a thousand words”, and it couldn’t be more true for these one-page websites.

We searched the Web for some really amazing one-page sites that could do justice to this saying.

As a first impression you might find this trend rather superficial, but don’t be too hasty to judge. When people decide to have a one-page website, it’s not because they don’t have much to express, it’s just that sometimes there’s no need to complicate simple things.

The best part is that you don’t  have to dig in for all the information, since they show you pretty much everything you need to know at a first glance. The rich graphic design makes it feel more than a website: it become a personal signature.

To make things even more interesting, by using Ajax, JavaScript or jQuery, one can create collapsible elements, navigation menus and many other “tricks” to fit as much content you need on the one-page structure, keeping a clean and simple layout… all in the same page.

And since web designers have so many ways in making simple things wonderful, let’s take a look on the most used features when creating a one-page website.

Scrolling

The most common way to display content on a single page website is using a vertical scroll. And it usually turns out to be a great solution for portfolio sites, where the design can allow you to learn about the person through a simple mouse scroll.

Navigation Menu

The vertical scrolling should be enough when you don’t have that much content to display, but in some cases you might want to consider other options, like navigation menus, making things even easier and avoiding to get bored while experiencing a journey of endless scrolling.

In these cases, the navigation menu pretty much looks like any other menu, but by clicking on it, a smooth scrolling helps you fly to some other section on the same page, skipping the parts that aren’t of interest to you. In this one-page website, the menu is only placed on the first screen, but the good news is that you can always go back to it with a simple click.

To simplify things even further, some websites use a navigation menu that always remains on a side while scrolling, so you can just pick another section and go for it anytime you want, without having to return at the beginning over and over.

Photo Galleries

And talking about portfolio sites, displaying all your work in one page might be quite challenging. There are many great free solutions for that on the Web. Using, for example, Shadowbox JavaScript, you can provide the visitors a larger version of the image they wish to take a closer look at, with one simple click, managing to keep it all in one page, as planed.

Sliders

As for websites that really want to fit a single screen, the smartest option is to use sliders. Choosing an horizontal slide show will allow you to explore different sections by choosing a button, creating a vivid sensation of dynamic, and offering of course, an escape to the main screen whenever you wish to go back.

Another wonderful idea is using sliders that go up from the bottom of the screen, displaying content on a sliding window that can be accessed by choosing a button on the navigation menu, allowing this way to lay out as much information as needed. In these cases, the main screen is mostly used as a background image.

Transitions

As we all know, mixed information tends to be confusing, so it’s important to find a way to make a transition between all the different types of information. The best way to do so is using headers, making this way a clear separation at the beginning of a new section. Or just to be sure you made it right, you could always “cut” it into sections using scissors… metaphorically speaking…

Another way to do it, is separating sections within the background by creating a case for each of them. Vertical scrolling within a section also helps make each section fit within a single screen, managing to create a simple and clean look.

Background Images

Most of the time, in one-page websites, the background is never purely decorative. It’s usually used to both separate and reunite different sections of the website. Here, the large background makes it fun to go from a section to another while scrolling, offering some intriguing images while visiting different parts of it. Each new scenario in the background is bordering a different type of information, clearly separating each part of the content from the other, even if it doesn’t have a clear header to say it so.

We are pretty sure this new trend will fire up the imagination of many web designers, becoming an attractive alternative in some cases. So why try to complicate simple things when it’s so much better to reveal the interest within? You know what they say: “less is more”.

Looking to get a one page website? Contact BrightPink Studio today and receive a free custom estimate!