avimuchnick

New design pattern: Livatars

avimuchnick:

“Livatars,” a Portmanteau for “live avatars,” is a pretty simple concept: Take a traditional headshot and make it subtly animated so the person in it appears alive. It’s an homage to the living newspapers in Harry Potter and player popup profiles that appear on tv during sportscasts. We tried this on Aviary’s company page and have gotten great feedback on it from people who stumbled across it by accident. 

imageimageimage

I wouldn’t even call it a pattern yet, except I just noticed it has also popped up on wefollow’s company page as well. They did a more technically elegant implementation than us (if you don’t care about IE7-8 support): We used animated gifs and they used HTML5 background video with a CSS vector mask on top of it.

Benefits over a traditional headshot:

  • Not boring, without being too over the top or trying too hard. It will probably make the viewer smile when they notice what’s going on.
  • Makes the people in the photo that much more relatable.
  • Seeing one makes you want to see a photo yourself alive on that page as well. What better way to unconsciously recruit?
  • Simpler to implement than other about page easter eggs: Just record a few seconds of video of someone standing still and loop it back and forth.

The trick is to shoot for subtlety and have everyone try to stand completely still when you record them. You want the viewer to do a double take when they think a static snapshot blinks at them out of the corner of their eye as they quickly scan a page.

RAD

  1. dansdev reblogged this from avimuchnick and added:
    Take a traditional headshot and make it subtly animated.
  2. inkyeagle reblogged this from avimuchnick and added:
    This is so cool
  3. raregravity reblogged this from msg
  4. ftrc reblogged this from msg
  5. myworldinsideout reblogged this from msg
  6. indiana-bond reblogged this from msg
  7. pyaeronrg reblogged this from mylive
  8. galenking reblogged this from msg
  9. mylive reblogged this from ronenreblogs
  10. darkestlaura reblogged this from msg
  11. wordfox reblogged this from avimuchnick and added:
    I will definitely be pitching this at the next TEDxSFU meeting!
  12. thirstfarm reblogged this from uxrave
  13. wcyarbrough reblogged this from avimuchnick
  14. uxrave reblogged this from avimuchnick