Every now and then Inspect Element will be looking at a specific style of web design and picking out the best examples in that field and what makes them so great so you can learn from them and improve your own work.
The first one we’re looking at is one page website designs. By far the most common use of single page websites are portfolios but they can be suitable to just about any business type. However, there are a few things to take note of before going down the single page route.
Navigation
Of course navigating a single page website is going to be different than any other site as there aren’t any links to take you to different pages but navigation is still a key ingredient of a one page design, although handled differently.
Navigation as Part of the Content
Clicking on the navigation in Polar Gold reveals the content for that section directly below. As such it is a great way of keeping the site compact and easy to use.
Navigation Secondary to Content
Bullet use a strong visual indicator of a line flowing from one section to another to guide users around their site but also uses navigation fixed at the bottom of the page as a secondary way of getting around.
Horizontal Navigation
A relatively new trend is to layout a one page design horizontally rater than vertically. Creative techniques of this have been put to use as on the recap of 2009’s Front-end Design Conference while also giving you an easy way to navigate from one section to the next. This is vital as while most mice these days support vertical scrolling, relatively few can scroll horizontally. Without any form of navigation, the user of a horizontal site will have a frustrating time using the scroll bar at the bottom of their browser.
No Navigation?
Some sites do away with navigation entirely such as James Lai’s portfolio who uses thumbnails of his work that load into a single large area when clicked. Doing so places the visitor’s attention purely on the content allowing it to become the focus of the site. This approach depends on how much content the site requires as ultiple sections would require some form of navigation for usability.
Creativity
Single page sites don’t have to conform to a set template and have given designers the opportunity to be more creative with layouts such as Tomáš Pojeta’s site. Here he creates a scene consisting of one section being in the sky, another section at sea level and the final area underwater leading down towards the seabed.
Eric Johansson’s personal site sees and illustrated version of himself travelling from left to right on a scooter as you scroll along the page.
We Bleed Design gets very creative with the use of colour and transparent PNGs. As you travel down the page, a fixed image of coloured lines get hidden and revealed behind images with various transparent elements.
Content
Of course, content is a key ingredient of any site but it is slightly different for a one page design in the way it is used and displayed. It is better to keep it short and too the point, even more so than usual. After all, a one page site is a cut down version of a regular site.
Tap Tap Tap dynamically load content for each of their iPhone apps into a single, defined space on their one page site with the use of AJAX much like the example of James Lai above.
The portfolio of Fran Book also uses AJAX to load content in dynamically but with the familiar method of using tabs.
0 comments:
Post a Comment