ZIM - interactive logos with ZIMjs components for JavaScript and HTML Canvas with CreateJS


Dr. Abstract explains interactive logos for the HTML Canvas with JavaScript, CreateJS and ZIMjs interactive media framework Interactive Logos are very memorable for visitors especially if the interaction relates to the product or service. Press MORE to see different types of interactive logos...

Relevance

Here is an interactive logo made by Inventor Dan Zen in 1996. Ego Interactive was the first Internet site for Southam, Canada's largest newspapers chain.
  • The EgoScope played with the concept of an inflated ego
  • The logo inflates but then starts leaking
  • The visitor drags and drops bandages to patch the leaks
  • If the logo inflates to the pin at top - it's a good day!
  • If the logo deflates then its a spill-coffee day ;-(
  • The game related to the logo and repeat play was likely
  • This was often the first time people had dragged online

Types

There are all sorts of ways that visitors can engage with logos which can lead to brand loyalty. This may not be for every company and for every logo (so user test to gage the effects) but it has been successful for Google! Here are some ideas:
  • Make a game that involves the logo
  • Turn the logo into a puzzle
  • Create art with the logo
  • Animate the logo with user actions
  • Involve the logo in a simulation
An interactive story can make a logo more memorable. Please visit the 1995 INTRO to the Dan Zen site featuring the height of technology, the animated gif!

Considerations

Here are some technical aspects using the several interactive ZIM Logo experiences as examples.
  • ZIM can easily be placed in an HTML tag such as a div
  • Once in a tag, the tag can be styled like an image
  • ZIM can also be used as an overlay or underlay
  • The logo can be animated in and receive events
  • An optional play button can be provided to begin interaction
  • The ZIM Button can toggle to lead back to the logo
  • The logo and the interaction can be created together
  • For the ZIM TRI logo, the interaction led to the logo
  • The interface for the ZIM 4TH logo is part of the design
  • The ZIM NIO dots could be made draggable along the path
  • The ZIM TEN logo is overlayed to use the whole page
  • Use ZIM Distill to reduce the size of the logo code
Use the tag mode to place logos

MORE
Presenting... the ZIM interactive logos!
open links in new tab

Shades of Tangram with the Interactive Logo for TRI ZIM


Shades of Tangram with the Interactive Logo for TRI ZIM


Shades of Tangram with the Interactive Logo for TRI ZIM
Shades of Tangram with the Interactive Logo for TRI ZIM

ZIM 4TH abstract art Interactive Logo with bubble handles



ZIM 4TH abstract art Interactive Logo with bubble handles

Path play with the Animated Logo for ZIM NIO (9)
Path play with the Animated Logo for ZIM NIO (9)

ZIM TEN particle emitter Rollover Logo interactivity!


ZIM TEN particle emitter Rollover Logo interactivity!
ZIM TEN particle emitter Rollover Logo interactivity!