“I didn’t have time to write a short letter, so I wrote a long one instead.” Mark Twain
It’s always a challenge to create something small yet beautiful. And this is an ordeal that a web designer often faces when he/she tries to come up with a one-page website design that needs to fulfill its purpose and look and feel attractive.
But it’s not impossible. With ample attention to the two major components of design Content and Navigation a web designer can create a one-page website that does its duty and lives up to the aesthetic expectations.
Let’s take a look at the traits you need to focus on to make a one-page site work.
The Three Cs of Content Creation
Clarity
A one-page website is essentially a condensed variation of a regular site with various pages. To fit in with the design scheme, the content needs to be absolutely to the point. Otherwise, it won’t suit the idea.
Take for example James Lai‘s or Luke Stevenson‘s portfolio. Every element of content is relevant to their field of work. And you cannot fail to admire the way they have used simple language to do it.
Crispness
Making things simple doesn’t imply making them boring. Instead, the content on a one-page site needs to be even more interesting when you have so less space to make an impression on the visitors.
Look at the Intuio site for example. The crisp content just intrigues the viewer to learn more about their services and solutions. And the simple color scheme and no-nonsense layout adds to the freshness of the design.
Conciseness
Nowadays web content is more about what you convey in a few sentences or a group of images. This is especially important for one-page websites that don’t offer enough space for you to write epics.
Aaron Relph illustrates the way to be concise on his portfolio. Just a glance at the site will tell you his profession, location and design philosophy. He conveys a lot in a few words. He needn’t write an epic to do it.
The Navigation Choices Available
Creative Navigation
The best advantage of a single page web design is that you need not conform to a set template. You can use any layout you want. And it is this freedom that has led to some brilliant results.
Be it the animation like elements on Every Last Drop, the cool outline of Sage Media or the sectional graphics on Tomas Pojeta, the ways in which designers have used their creativity and ingenuity are diverse, and impressive too.
Built-in Navigation
One of the simplest methods to ease navigation is to make the text appear beneath a headline on a click. Another way to do it is to create a flowing indicator to move forward from one section to the next.
The first navigational way is exemplified by the Polar Gold site. The section reveals itself with a click on the title. And the second idea is used by Bullet. With a simple, but strong, line, the visitors are guided to the different sections of the content.
Two-way Navigation
Another great choice is to use vertical and horizontal navigation to get all the necessary elements of the design at one page. The only drawback to this option is that it can be a little overwhelming at times.
My Pizza Oven website is a good example of the way it works. You can scroll vertically and horizontally to get to the different sections. Movable icons on the top left corner also provide another way to navigate the site.
No Navigation
It’s easier to do away with navigation if your site doesn’t need it. Instead, you can use AJAX to load a section of the content into focus when the correspondent thumbnail is clicked. Familiar tabs can also be used for the purpose.
A suitable use of this can be seen on Tap Tap Tap. As you click on each of the iPhone apps available from the site, it loads onto a single, defined space. This makes it easy to read and comprehend without any necessity of navigation.
Now that you have an idea about what you need to do, it is time to begin the design.
Where do you begin? The best thing to do is to get a good look at the numerous examples of beautiful and practical one-page website designs. It is the easiest way to get inspired. And it can supply ample ideas for your project too.
Just make sure you understand the image the site needs to portray. Single page sites usually come in handy for portfolio designs. But this isn’t necessarily a constraint. The idea can work for regulars too, as is evident from the site of The Nomad Hotel.
A small idea needn’t be worthless; with creativity, it can develop into a big thing.
This article is contributed by Evans who is associated with a leading UK based start-up CableProtector.
