UXify Animating Name Badges

Jason Caws / Tuesday, May 12, 2015

In case you missed out on UXify 2015 last month, check out the recent Infragistics blog UXify North America – Conference Videos for all 8 presentations covering “The Future of UX Design”.


In addition to an afternoon of free lectures, conference goers also received interactive animating name badges. At first glance, the name badge appears to be the attendee’s name printed on a card along with an abstract design. But with the addition of a second transparent card overlaying the image, the design comes to life.

The name badge uses a method of animation known as “scanimation”. A six frame animation is combined into a single abstract image. By moving a striped acetate overlay across the image, the viewer is only able to see one frame at a time. As the frames are quickly strung together, the once static image creates the illusion of movement.

Try the animation for yourself using this interactive prototype: http://indigodesigned.com/share/7qn4datqwwqu

Interested in sharing your own prototypes? Check out the all new platform for sharing Indigo Studio prototypes: IndigoDesigned.com