Living and Breathing Pictures

Rocha3400

I am absolutely in love with the relatively new technique of storytelling through what is being called "cinemagraphs." The technique isolates key points of interest in a still photograph and brings them to life through very subtle and elegant animation. The result is truly beautiful story-telling.

Dogfish-1-600
Dogfish-4-600
Dogfish-9-600

I was first turned onto the technique through Jamie Beck and Kevin Burg's work with Dogfish Head to document the process of brewing the company's strawberry-and-honey-flavored Tweason ale. The images are created by shooting video, picking a key frame and then selecting subtle details within that frame to animate. The result is simply stunning.

Cars

It is certainly a time-consuming process, but one that is not very complicated. In fact, it is essentially an animated GIF that requires just a little more attention to details frame by frame. For all you graphic designers out there, here's a nice step-by-step that takes you through the process.

Barberpole

Wonderful Sites Featuring Scroll-Controlled Storytelling

Screen_shot_2011-03-23_at_10

The advent of HTML5 has created stunning new ways to create exciting user experiences online. My favorite sites as of late are the unique ones that tell their stories primarily through vertical parallax and the scroll function. Perhaps the most-discussed example is the Nike Better World microsite launched earlier this year by w+k. Here is a collection of wonderful sites featuring scroll-controlled storytelling, starting with the aforementioned Nike Better World.

Screen_shot_2011-03-24_at_12

Nike Better World – w+k's beautiful site encourages you to scroll 14,246 pixels toward a better world. Experience a stunning parallax effect along the way.

Screen_shot_2011-03-23_at_10

Atlantis World's Fair – Portland designer Frank Chimero's site takes us on an illustrated journey under the sea. I absolutely love the concept behind employing a scrolled experience here.

Screen_shot_2011-03-23_at_10

Ben the Bodyguard – Another great concept. Meet Ben as you navigate the mean streets of a seedy fantasy world.

Screen_shot_2011-03-23_at_10

Beer Camp – This site will have you thinking you've had one too many beers. As you scroll down, you actually zoom into the site. The reference to the film Inception is quite appropriate as its design is equally as mind-blowing.

Screen_shot_2011-03-23_at_10

My Starbucks Signature – With 87,000 expresso drink combinations available, Starbucks makes finding your signature drink easy through this scroll-controlled "how to" site. 

Screen_shot_2011-03-24_at_12
Apo – A London web designer/developer's vertical parallax portfolio.

Screen_shot_2011-03-24_at_12

Resolution IM – All engines scroll! We have liftoff!

Screen_shot_2011-03-24_at_12
TEDxPortland – Yet another slick vertical parallax site from the Pacific Northwest. 

5 Great Instagram Web Apps

Sxswkhoaleinstagram

SXSW, shot & shared on Instagr.am: Foursquare founder Dennis Crowley, Doc's (S. Congress), Big Boi private show

Another SXSW has passed and one thing we learned is that the number of exciting ways to interact with the event's most popular iPhone appInstagram, is going to continue to grow exponentially. Having debuted only less than a year ago, Instagram has only been available to its 2 million+ users on the iPhone. However, with the release of their API, we're beginning to see a wonderful onslaught of innovations fueled by Instagram not only in the digital realm, but in the physical world as well. Perhaps the most visible example at SXSW was Breakfast NY's Instaprint, a location-based photo booth powered by Instagram hashtags. The company's rapid growth reminds me of the early days of Twitter where we saw a number of third-party Web apps developed to improve the user experience. This propelled the growth of the micro-blogging service and I believe that the new online innovations being introduced around Instagram will have the same effect on social photography.

Here are my favorite Web clients for Instagram:

Screen_shot_2011-03-23_at_2

Inkstagram – All of the social functionality of Instagram in a beautifully designed interface on the Web. Add comments, "like" photos and follow friends, all in your browser. 

Screen_shot_2011-03-23_at_3

Instagre.at – Beautiful scrolling interface allows you to peruse photos and "like" your favorites. Great if you have a touch-sensitive mouse/trackpad. 

Screen_shot_2011-03-23_at_3

Webstagram – The most basic, cleanest and easiest Instagram Web app with all of the social functionality included. 

Snapfinch – Another basic Web app that closely resembles Webstagram's interface.

Screen_shot_2011-03-23_at_4

Gramfeed – Another simple interface with all of the social functionality built-in plus location.

Screen_shot_2011-03-23_at_4

demo.instagram.com/ – While it's not a Web client, this is the official real-time demo of the Instagram API. Very cool. 

 

Find me on Instagram at KhoaLe

McDonald's Embraces Facebook Places and Donates Per Check-In

In what is arguably the first major adoption of Facebook's location-based feature, Facebook Places, the world's largest hamburger chain has partnered with the world's largest social network service to benefit the Ronald McDonald House charities. Starting this week, every McDonald's check-in on Facebook Places will automatically donate $1 to caring for children.

Mcd500p

Facebook Places launched in August 2010 on the heels of location-based trailblazers Foursquare and Austin's own Gowalla. This marks the first large corporate partner to embrace the service. And with this week's introduction of Facebook Deals, it will be interesting to see if the service will reach the same level of success that Foursquare and Gowalla have enjoyed. It will also be intriguing to see how other future partners employ Facebook Places into their marketing efforts down the road.