This single page site is the online home for Ketch Studio, an Italian design and development company. Single page sites are a rather popular style and the offer up some unique problems and opportunities. Fortunately, the designers of this site not only overcame the potential problems. In fact, they made a distinctly styled site that stands out, while avoiding some overly creative pitfalls. Let’s review some of the details of this design to see what makes it work so well.
Dodging bullets
The most fundamental problem the single page approaches is just that, there is only one page to work with. As such, the layout risk getting confusing and cluttered as you throw in everything that would normally be stretched across multiple pages. In this case though several key details help this single page site perform its task beautifully.
First of all, the content is trimmed down to the necessities. Foremost among the missing elements is loads of supporting copy (aka fluff). This single page lacks extra space, and has no need to make every page feel complete. This limitation turns into a benefit when you can focus and get to the key points at hand.
Another critical design element is the way various regions of this site are set apart. Each has a distinct color pallet on top of the same pattern. This makes it easy to scan the content and find the pieces you’re interested in. Clear titles at the beginning of each block also play a critical role in establishing the hierarchy of the page.
Fixed header
There have been countless approaches to the single page site (onepagelove.com), and nearly as many takes on how to navigate within the content of a single page. Personally, the approach taken on the Ketch Studio site is my favorite. As you scroll down the page the header (and footer) stays fixed in place as the content scrolls underneath it. This simple approach is extremely clean and usable.
One of the most common problems I find with a single page site is that the navigation tends to move around. With this approach, the navigation is fixed at the top and is always easy to find, it never changes, and it frames the content in a functional way. This layer of predictability ensures the atypical approach of the site requires no explanation.
The take away
The moral of this story is that taking creative approaches that stand against the accepted norms is a dangerous business. If you’re tempted to take an alternate approach that doesn’t fit into the norms of web design you need to carefully plan. In this case the designers ensured their content would be dead simple to navigate and its atypical structure is almost irrelevant. Make sure the “creative” structure of your site doesn’t become a distraction from the content it is intended to communicate.
>EXTRA: For more web design tips from Patrick McNeil, pick up his book the Web Designer’s Idea Book, which provides inspirational examples of winning layout, color, and style directions.