6.10.2009

11 Case Studies in Single Page Website Designs

Keep It Simple, Stupid.... The right way

A new trend on the web I have noticed increasing in popularity is the single page website design. This is constituted by an all inclusive, all important Home page. The reason to use a single page design is varied, however there is one indisputable result: fewer people can get lost in a website when there is just one page. That said, there is a right way and a wrong way to handle a single page website design. Below I have listed 11 single page website case studies and examined the fundamental details of why they went right or where they went wrong.

The YES YES's

  • Gotta Get to FOWA (Future of Web Apps)
    Single Page Website Image - The Webutante Comments: Web 2.0, clean, bright
    What makes it work: Staying Power. This site is looking for sponsors. People who support their aspirations to get to FOWA. People who will join their facebook groups or read their Tweets. Everything is clearly laid out and easily accessible. You don't get lost in the page because of anchored text throughout. It's length is used as a tool.
  • RZMota
    Single Page Website Image - The Webutante Comments: Graphical interface, ease-of use, potent functionality
    What makes it work: Content. RZMota does not sacrifice information or functionality in order to fit everything in one place. Instead, RZMota utilizes a clean structure to entice the viewer to check out the portfolio, learn about the designer and contact the designer. Usability remains in tact and the functionality does not deter the viewer.
  • Sofa
    Single Page Website Image - The Webutante Comments: CSS-driven, pure, simple
    What makes it work: Accessibility. All that is needed is there in an easy format for viewing.
    Faux Pas: No contact method other than a listed email. I let it slide for Sofa because of their powerful design, hence they are on the YES YES list.
    Webutante Fix: Small contact form at the bottom for potential clients.
  • Maurivan Luiz
    Single Page Website Image - The Webutante Comments: Perfect.
    What makes it work: The page is all encompassing. There are multiple methods of contact so the call-to-action is not neglected, numerous portfolio items, and all the information you need about Maurivan - including his sense of humor (which you see with the panic button).
  • Kobe
    Single Page Website Image - The Webutante Comments: All-inclusivity, usability, functionality
    What makes it work: The site maintains its curb appeal and stature while exploring the information about Kobe. The email sign-up is constantly present in addition to a separate contact form, and it's graphical appeal is excellent.
  • MPlusZ
    Single Page Website Image - The Webutante Comments: Clean, CSS-Based, comical
    What makes it work: MPlusZ keeps your interest throughout their single page site through their entertaining design, increased functionality and user prompts. Their work is elegantly featured on a slider, a contact form and contact information is available. Content and graphics are both used effectively without overloading the viewer with either.
  • Vanity Claire
    Single Page Website Image - The Webutante Comments: Hello, beautiful.
    What makes it work: While the design really speaks for itself on this portfolio site, there is also an element of charm in Claire's usability. With lighthearted leads and clean/pure functionality, you really get sold on the website...and Claire. That, my friend, is the point of a portfolio website, which makes this single page site get five stars in my book.

The NO NO'S

  • Alessandro Cavallo
    Single Page Website Image - The Webutante Comments: Great Design, beautiful work
    Faux Pas: Contact me link is merely an email link! Anyone who uses a webmail system (Yahoo or Gmail for example) will not be able to send Alessandro a message without installing Mac Mail or Outlook. Remember: Single page websites should not be a compromise, but rather a solution. Details should not be sacrificed for lack of room. Every t should be crossed and every i should be dotted.
    Webutante Fix: A contact form in a multi-box to maintain the one page feel but increase functionality
  • Basil Gloo
    Single Page Website Image - The Webutante Comments: Clean, Wow-factor, distinctive
    Faux Pas: The website lacks both information and functionality. There is no contact form, merely an email link instead, there are no explanations or featured works. Sure, we are linked over to Everyone Knows and Webmasters International, Basil's companies, however we know little about Basil or his work by looking at this site.
    Webutante Fix: Add sectionalized features via JavaScript with brief informational resources. Add a Contact form as well as work examples. Link the latest blog post to another section of the page. Familiarize the viewers with Basil and Basil's story. A website is supposed to serve more of a purpose than merely that of a business card. It is a tool.
  • Creative People
    Single Page Website Image - The Webutante Comments: Clean, Graphical, Distinctive
    Faux Pas: It took me a few minutes before I was actually able to find the navigation for this website. It blends in with the background and almost leads you away when all of the sudden you notice it (or you hope to). That's a huge problem considering that without the nav, the site is simply an off-beat image of a dude holding a sign and a squirrel.
    Webutante Fix: Make the navigation using buttons or icons. Use a different color for the buttons other than white or gray so they stick out more. It's called usability - and it is an absolute necessity on any website, much less a single page site.
  • Daniel Stenberg
    Single Page Website Image - The Webutante Comments: usable, functional, clean
    What makes it work: Everything is right there to see. The functionality is blazingly obvious so it can not be mistaken, and as a portfolio it serves it carries out all necessary functions.
    Faux Pas: Anyone who uses a webmail system will not be able to send Alessandro a message without installing Mac Mail or Outlook.
    Webutante Fix: A contact form that follows the 'About Me' section to maintain the sites single page appeal but increase the usefulness.

Labels: , ,

Bookmark and Share
posted by thewebutante at

0 Comments:

Post a Comment

<< Home