17
Mar

As promised, here is a more detailed breakdown of the "oooh That's Clever" panel. This panel was presented by Paul Annett the creator of a very popular site that shows some cool CSS called  Silverback App. In this panel Mr. Annett explored a wide range of company trickery that gave customers a joyful surprise when discovered. The examples ranged from company logos, to secret message on the bottom of juice bottles ("stop looking at my bottom"), to website easter eggs. The idea behind the session was two folds. First to show designers (and developers, that's me!) some creative "easter eggs" that inspire creativity. Second was to show how these little gems could help channel potential customers to your product or service through a viral "did you see this" pattern. Here is a list of as many examples as I could write down and/or research.

Logos 
Fedex logo
- Illustrating an creative approach for designing with negative space. Look for the arrow between the E and X. I had never seen this before. Call me blind.
Toblerone
Candy - Do you see the hidden bear? A unique way to get hype about a produce in a very subtle way that most will never see until it is pointed out.

Website Gems
Firefox
- If you type about:mozilla in the url bar in any Firefox browser (or if you have Netscape 1.1) you will be shown a excerpt from the The Book of Mozilla, about an on-going battle with the fictional character Mammon.. a.k.a Microsoft (Internet Explorer).

Apple Mighty Mouse - Take your mighty mouse and lift it from the ground. What appears? A mouse!

Google Moon - Google launched Google Moon with pictures from the Apollo moon missions. From launch and until a few years ago, one could zoom in and when they zoomed all the way in, they were surprised to find the moon was made of cheese. Another case where shock value can quickly turn into a massive viral stream of communication to drive traffic to the a site. This easter egg no longer exists, but I did find a video that shows the experience. (http://www.youtube.com/watch?v=r_EAXfJySXQ)

Silverback - Homepage for a usability testing software created by Paul Annett's company. Site illustrates a unique design CSS technique that provides a 3d background full of vines. Try stretching your browsers size and see what happens. This is all done through layering background images which are positioned negatively on the page.

Tweet1 - A social tweeter site to look up a Twitter's user's first tweet. This site borrows from the Silverback technique with background clouds.

Twequency - Is another app by the same company that created Tweet1 (littledeer) that allows shows the same CSS technique.

The Horse in Motion - Is an experimental site demonstrating a parallax optical illusion created in CSS. As Paul Annett states, "not sure the practical use", but it shows an interesting technique to inspire.

dconstruct 2007 - The 2007 version of the site (created by Paul Annett) gave users access to various CSS stylesheet as Easter eggs that showed the evolution of the site as it was constructed. At the top you can click on the timeline and see the site is various stages. Notice how the hand cursor does not appear, this was an intentional behavior meant to semi-hide the feature from users. However, it was found and spread within hours of the site launch.

Kayan Media - Another easter egg.  Click on the worm at the bottom of the page and see what happens

Modernista - Provides a navigation that will look at website inside of their website. They were nominated fora People Choice Award at SxSW (they didn't win).

Skittles - Skittles bored Modernista's idea with a similar concept to Skittle-fy other sites like youtube.

MyBloody Valentine - A flash site that took the trailer video for the movie and expanded from there. This effect took me watching multiple time to figure out how they pulled off the effect. The movie is fullscreen that emulates a browser chrome based on your user agent. This allows the video to act like it's "breaking out" out of the video area of the screen. Perfect for a 3D movie. "Watch out for the ax".

Able Design - An online example of logo creativity. The site's logo provides transparency that allows content to scroll behind it.

CSS Zen Garden - Going old school to show a transparent technique that allows the diver's flashlight to becomes brighter as you scroll to the depths of the ocean.

WeBleedDesign - Another site that takes advantage of the long scrolling transparency css technique that shows paint dripping down the page in various cool ways as you scroll down the page.

Experience Wii Channel (Wario Land) - Breaking conventional web elements. The site around it crashes!

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.