Sunday, April 29, 2012

Cool Website Design


While surfing the web, trying to find a super-cool website to write about, I stumbled upon http://2012.beercamp.com/. A yearly event held for designers and developers, you would imagine Beer Camp's website to be highly creative. It is. Designed to look like a pop-up book, the website's designers used CSS 3D to create a floating book that not only allows you to click and drag the pages open, but also allows for some shifting of the book -- enabling partial side views of the pop-up cut-outs and adding to the 3D effect. I absolutely loved pop-up books as a kid and doubt that I am alone. The choice of a pop-up design was a smart choice, not only to show off the CSS 3D, but to appeal to the kid in all of us.



Beyond the 3D pop-up aspect of the site, the illustrations are also brilliantly designed. Each of the three pop-up pages features a silly-looking monster, cool font that also pops-up, and a rectangle of text that zooms towards you when you click on it. The text, which invites the reader to attend Beer Camp, is written like a Dr. Seuss storybook with off-beat rhymes that are as kooky as the illustrations. Each page features wonderful use of bold colors that suit the pop-up storybook design.



The only criticism I have of the site is that there isn't any feature that tells you more about the event. I would have liked to seen a clickable "about" button on the back of the book that would link you to more information about the Beer Camp event, its history and its purpose. However, the event's site was probably designed for a limited audience -- a group that was most likely already familiar with the event.

Here's a link to a site that features an in-depth look at beercamp.com's design:
http://coding.smashingmagazine.com/2012/04/17/beercamp-an-experiment-with-css-3d/

Friday, April 20, 2012

A Trip to the Museum

I thoroughly enjoyed my visit to the Museum of the Moving Image, spending most of my time exploring the displays in the Behind the Screen exhibition. I loved cranking the levers and making the pages flip on the Mutoscopes to watch the old Charlie Chaplin shorts. And while I was surprised to find modern commissioned artworks displayed within the exhibition, they definitely related to the principles of filmmaking. Feral Fount, the rotating sculpture construction by Gregory Barsamian, was exhilarating. [See video clip below.] I had just been spinning the old-fashioned Zoetrope when I walked in the adjacent room and discovered Mr. Barsamian's modern stroboscopic zoetrope. Both items employ the same principle of "persistence of vision" (the brain holding an image for a fraction of a second longer than the eye records it) to create the illusion of seamless movement -- something that remains essential to film projection.

Further on in the gallery, I was lucky enough to catch a live demonstration of film editing. Using a scene from the television show White Collar, the educator showed clips of the various set-ups used to film the scene and then showed how they were cut together. She discussed the importance of certain shots in the final edit -- like how a wider shot was needed to capture the action of one character handing a paper to another character, and she showed two different edits of the same scene -- demonstrating how editing can affect the rhythm and pacing of a scene. The version with the slower pace provided tension and drama that was lost in the quick cut version.

However, my favorite part of the Behind the Screen exhibit, or where I had the most fun at least, was the station of computers that allowed you to create your own stop motion animated film. I've included my finished animated short below. (Please forgive my misspelling of renaissance in the film's credits. It wouldn't let me fix my typo.)

My stop motion short:

A video of Gregory Barsamian's Feral Fount:

feral fount by gregory barsamian from amanda kirkpatrick on Vimeo.

Wednesday, April 18, 2012