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)
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.
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.
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.
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).
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.
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.
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
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
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.
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.
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.