Smart Car Makes Clever Website

I was oddly propelled to click on an ad today, brought to me by the makers of the Smart Car. It was a pretty, clean, well made site. I scrolled up and down to see if anything would catch my eye, and strangely enough something did.

Some time ago I made a post about the coolness of sites I see that take advantage of telling their story, not through pages navigated to by the standard point-and-click, but by animating the home page based on the amount of scroll a user applys to the site. (You can find the post on cool scrolling animated sites here )

Some people have done a poor job of creating well balanced sitethat not only tells a good story, but does in a animated way that tells the story better than it otherwise could be told. And done smooth enough that the coolness, or story, isn’t hindered by the latency and choppyness of the meium.

Well This smart car ad page did just that. And without futher adu, here are some screeen shots and the link to the smart car ad site (2011-12-4).

It begins with a simple page, that focuses all the users attention to the car, and its size.

As you begin scrolling the colors of the sites changes and the a different smart car is presented.

Notice the menu on the right site, letting you know where you are in the story. The white cricle tells you what part of the story you are currently in, and what is coming up next. Notice the blending from one “page” to the next as you scroll. Notice how you find you self scrolling more and more, and digest a few tid bits of knowladge thatyou would ohter wise not have gained behidn a barier of clicks. Well done. 🙂

 

 


Creative ways to tell your story through scrolling.

I read somewhere many years ago that the experience of allowing the user to ready just enough content until the fold, but giving them just enough info that there is more uner the fold was a better tactic then framing your site above the fold with links to actions. For sites that want to say allot, and take users on a journy the scroll is smoother and quicker. It is like a timeline of content from top to bottom, as apposed to a choose yoru own adventure. Since then, I have seen some pretty cool examples of implementations like this. The lastst one I came across was from mozilla (https://webfwd.org/en-US/) Which would make sence since they are the advocates of the web.

Here are some slides (in case they change the site by the time you read this.)

The main home screen looks pretty standard. But notice the color and the footer….

As you scroll up he page the footer rises from the bottom, revealing a whole other expereince….

As the you scroll up, the color of the back ground fades into white, and the old footer is now the new header. I thought it was a beautiful experience…

I have seen many variations of the concept of scrolling while browsing the internet. Here are some others:

This one is called “Ben the body guard” and it was a website for a game. (http://goo.gl/HG9PQ) In this creative experience, the body guard tells you his story as you scroll down the page. The animation of his walking and the street passing by are all based on your scrolling down the page. After the story and his walk is over, the links are neon signs on the buildings rooftops, and the bottom of the page gives you a link to the appstore and a close up of ben peerig down the edge of the top of a high rise. Well done!