People love to unwrap things, it just a matter of fact, whether you’re a kid at Christmas or an adult with a new gadget. There’s something mysterious about a new box placed in your hands that makes you incredibly excited to just tear into it. There are a million sites that simply feature people opening up new products, little children shrieking, and adults drooling. Packaging designers know this and take advantage of it, like people at Apple. They know that making a great product is one thing, but a great product with great packaging just improves the overall experience that much more, and that in turn leads to more sales. So as web designers, is there a way we’re able to create this same experience with our websites? At SXSW this year I was inspired to bridge that gap.

Just in case you aren’t one of those people who sees the value in great packaging, here is an example of a fun product I just discovered, SNIF Tag. A SNIF Tag is a transceiver that is clipped onto your dog’s collar so you can monitor your pet when you’re away from home. Basically, it’s a toy for people who treat their dogs like children, and like gadgets.

Don’t worry there’s more text past the images. ;)

Photo of initial box Photo of box with first flaps open Photo of snif tag Photo of internal box and instructional booklet Photo of customizable pieces for the snif tag

Hopefully you can see from the photos that the people at SNIF Tag seemed to think about every bit of surface area their product was housed in. Each time I found out another box or pulled open another flap there was something new and fun to discover, whether it was cute graphics or fun spot varnish paws placed on the box, that were only noticed when the light hit it just right. This whole unwrapping process created anticipation and excitement at each step, leading to me a good first impression of the final product.

So how do we create this feeling on the web? I feel like I found part of this answer during a talk at SXSW this year given by Paul Annett. During the talk, Paul quoted Don Norman, who is best know for his great book, The Design of Everyday Things: “It is not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and, yes, beauty to people’s lives.” Here are some of Paul Annett’s examples from his talk:

Silverback

Photo of Silverback website

Silverback is a usability product that is made by the people at Clearleft. The fun thing about this website that you can’t really see in the image, is that as you resize the browser window the different layers of vines move separately from each other.

Twequency

Photo of Twequency website at normal width Photo of Twequency website at shortened width

Twequency is a tool where, you might of guessed it, it measures your tweeter frequency. Again, like Silverback, the magic appears when you resize the browser window. The clouds start moving back and forth and when you minimize it enough it reveals a cute pink bird in the clouds.

Both of these examples happen when you resize your browser and cater to the web-savvy audience, but I’m sure there are a million other things we can implement on our own sites to give our users that same feeling of joy. There could be hidden links that reveal something special, having something different appear when you hover over an object, or an interesting error message, but then again I’m still experimenting myself. Just because we work on the web doesn’t mean that we can’t have fun with it; let your imagination run wild.

75 Comments

  1. Robin Cannon 03/25 10:25am

    Nice focus. Those little touches can add a huge amount of character to, and interest in, a website. Great to see as well that some web designers are increasingly taking inspiration from other mediums than virtual, and well worth highlighting the advantages of doing so.

  2. Sandy 03/29 1:08am

    Awww I somehow came across your lovely site, and oooohed and awwwwed at the little birdie on the header moving his wing slightly and showing the weather, that is just awesome ;)
    You have a very lovely site, and I loved reading your ‘About Me’ page and smiled when you mentioned the mitten and the trolls for Michigan.
    I can only dream about having a site like this :lol:
    You are very talented!
    :)

  3. Nikki 03/29 5:06pm

    The Sniftag seems like just a social networking tool for humans via the use of their dogs.  But I have to admit, that packaging does look really nice.  It’s got some great colors.

    Those website examples are great!  I love the little surprises you find in great designs.  It’s the same with footers - I love happily designed footers because there’s a certain surprise element to them (I love the whale in yours).  Thanks for sharing these!

  4. Greg 03/30 12:08am

    Neat product and (to your point) packaging for that Sniftag product!  It’s more gadgety than anything but that’s part of your point!

    Cool beans with the sites you showed, too!  My personal/family site is just in its beginning stages (haven’t even settled on a theme yet; it’s a WP site), but I’m handy enough with code that I want to try to include some of the “easter eggs” you’re talking about.  Even though my audience will be only about 12 people.  ;-)

    Might as well take this opportunity to mention that I absolutely love your site design.  It’s a step beyond.

    Greg

  5. Beau 04/01 3:49pm

    Snif-tag might be a nice addition for fans of Tyson. :)
    http://skateboardingbulldog.com/

    Love your design (go typography!)

  6. Wenting lin 04/23 12:00am

    我很喜欢小狗,但是我却养不起它们。

  7. Robin 04/26 12:53pm

    我不会英语,看啦哈,这个博客不错,我喜欢的风格,我网站现在还没有开通,有时间来我网站做做

  8. Rak Design 07/02 8:25am

    Excellent blog, very interesting. It definately seems that all too often the overall experience is just as, if not more important than the actual product, and this is specially the case when it comes to web design.

  9. SJL Web Design 07/09 6:04am

    Really enjoyed this post, I have never thought about the comparisons between web design and carefully and well planned packaging, but I totally see your point. On another point, going back to when you mentioned apple’s packaging. I recently purchased a macbook air and the box was one of the most extraordinary things I’ve ever ripped open!

  10. Firebubble Design 07/18 8:26am

    I love well planned packaging, when it makes you want to explore deeper into the box/wrapping and find new things. I love you comparison between this and web design and design in general! You should always try and catch your users imagination and want them to explore and get excited.

  11. Jonllen Peng 07/26 10:29pm

    I like this blog style very much!I want to used it in my website when I’m feel.
    haha~`

  12. Ryan 08/19 9:00am

    YES! I agree with you! For me personally - I LOVE packaging. :D Sometimes, if I love it enough - I keep the bag. Or the box.

    Also, I love your site design! Its so well done!

  13. jc 08/29 11:24am

    哪都能看到中文.......

  14. うんこ 09/06 9:34pm

    うんこですね。

  15. Shminow 09/07 8:54am

    The blog is very nice!I like it,and felt a warmed.I love the blog style,and I hope myself make a same it.

    err…

  16. mario 09/28 11:36pm

    this is very nice..

  17. Website design service 10/09 7:23am

    It’s so cool. Thanks.

  18. Carl Franke 10/20 7:42pm

    First off, your site is gorgeous.  Really nice job!

    Yeah, I remember when I saw that Silverback site for the first time I honed in on the vines instantly and was mesmerized and just kept thinking “how the hell did they DO that?!”

  19. Retro 10/28 6:09am

    Great article, I brought a new kodak printer yesterday and I swear they make it smell a certain way when you first open it. Although I love great packaging, I’m not so keen on unnecessary packaging. If a company can get the right balance, then I’m happy.

  20. Christchurch Motels 11/08 6:33am

    Sniftag is mind blowing. I am wonderstruck with the way technology has catching up with humans. I am sure dog lovers will be on cloud nine on hearing about sniftag. Thanks for sharing this with us.

  21. شات 11/21 9:46am

    that phone is so great i will bay one soon >> thanx

  22. Magnetic Signs 12/03 12:20pm

    Interesting post, never would of thought about the comparisons between packaging and web design. Also I really like the sniftag packaging, very well thought out.

    Thanks for sharing.

  23. ring 12/16 12:57am

    Thanks for sharing this great article! That is very interesting Smile I love reading and
    I am always searching for informative information like this.

  24. Daniel 12/16 5:17pm

    Lovley site :) Enjoyable reading.. I like the idea, that, there could be “secrets” .. normally on a logo, you have to click, and it takes you to the frontpage of the site, on my logo, when you hover, a mootools effect, makes it a little nicer, and a link appears.. thats kinda the same thing :)..

  25. jewelry 12/17 12:54am

    It’s so cool. Thanks.

  26. ClubPenguinCheats 12/22 3:43am

    You have a very lovely site, and I loved reading your ‘About Me’ page and smiled when you mentioned the mitten and the trolls for Michigan.
    I can only dream about having a site like this :lol:

  27. Paloma 01/05 10:11pm

    I just stumbled upon your website and enjoy exploring it. It is the whole style of this blog which I do like very much.

  28. nice web portfolio 01/06 8:59am

    nice article and informative and your portfolio is also very good i want friendship with you i am also designer

  29. Martin 01/09 4:39pm

    Today I felt like having a Christmas package because I bought the Logitech G9x. The package is really high-quality.

  30. nicolas 01/24 4:23pm

    I think christmas websites are really seldom.

  31. mod converter 01/30 6:26am

    seldoms are invaluable.

  32. Campervan Hire Australia 02/03 1:52am

    Inspiring design work has me thinking about Christmas 2010.

  33. Ash Value 02/03 5:59am

    I love packing as anyone else, but it is a stick with 2 ends to it. As packing plays important role in presentation it can dramatically increase sales to certain type of goods, and sometimes can be the only major factor in marketing certain goods but the end of stick is environmental issues as amount of people who against unnecessary extra packing is increasing every day.  So to create attractive packing and not to cross line of “unnecessary” waste is becoming harder and harder and take hat down to those who have such skill

  34. Ash Value 02/03 6:12am

    Regarding creating such feeling on web for me new, but its so makes sense. Question is where is the line of its usability. It should work (at least worth experimenting here) with on-line gadgets, games, music, gifts, certain unique experiences - example personal horoscopes and so on, basically entertainment related. But is there anyway of interpreting this feeling to other sites: e-commerce, informational and educational sites, blogs?

  35. Patrick Schwarz 02/11 10:00am

    Very interesting article. Thank you for the information.

  36. Grafica 02/15 4:33pm

    Thanks for sharing this great article! That is very interesting Smile I love reading and
    I am always searching for informative information like this.
    And I´ll try it in my next projects.
    Thanks a lot!!

  37. Spanish homes 02/19 8:50am

    Really pretty designs

  38. Pinky 02/22 5:41am

    I love you comparison between this and web design and design in general!

  39. insanity 02/24 10:17pm

    it’s always nice to open up nice packages, great article and love the pics

  40. m65 03/01 9:11pm

    very nice website i really found the information helpful and thanks a lot for this great article

  41. fabian 03/05 7:00am

    Yes nice artikel thanks for share…

    and kompliment for this site.

  42. Einfamilienhaus 03/12 8:56am

    Interesting. Thanks for info.

  43. yussef112 03/12 9:34am

    very nice website i really found the

  44. sabrina 03/18 7:58pm

    Wonderful site you got here

  45. brian 03/19 8:23am

    i love your header

  46. carsten 03/22 10:08am

    great designer ;)

  47. josh 03/23 10:15am

    nice blog
    Wonderful design

  48. Garde enfants 04/05 6:11am

    Wow, this is great

  49. Plastic Fabrication Pro 04/07 8:04am

    I wonder what the snif tag does??

  50. Jump Higher 04/10 8:09am

    It should work (at least worth experimenting here) with on-line gadgets, games, music, gifts, certain unique experiences - example personal horoscopes and so on, basically entertainment related. But is there anyway of interpreting this feeling to other sites: e-commerce, informational and educational sites, blogs?

  51. Buttons 04/11 6:59am

    Those website examples are great!  I love the little surprises you find in great designs.  It’s the same with footers - I love happily designed footers.

  52. Enrico 04/13 6:39am

    Great examples! Love it!

  53. Buttons Herstellen 04/15 11:05am

    Very nice examples!

  54. Criação de Sites BH 04/18 10:02pm

    Today I felt like having a Christmas package because I bought the Logitech G9x.

  55. Piscina 04/18 10:03pm

    Thanks for post. Congratulation.

  56. Aluguel de computadores 04/18 10:06pm

    I wonder what the snif tag.

  57. Panfletos 04/26 12:51am

    Viva a sociedade alternativa, entao viva a vida!

  58. ed hardy 04/26 9:20am

    Vielen Dank für die Post, und ich wirklich likt Ihr Blog und dank Ihrer Sharing, und halten die Augen auf sie.

  59. angular cheilitis home treatment 05/03 3:45am

    very interesting.  and no sadly m website isnt like christmas at all. lol

  60. crazy taxi 05/12 8:30am

    I love to read such things. A lot of creativity and imagination. Thanks for the photos.

  61. HID lights 05/23 7:36am

    Its a great features for my all aspects.

  62. mahjong 06/02 5:00pm

    good photo. Excellent looks. One could add more pictures.

  63. travel vacation tips 06/06 12:12pm

    I very much impressive to read this article

  64. Waterproof Jacket 06/16 11:41am

    Great minimalist designs. I’m a firm believer in the k.i.s.s. design method. After all, most of the biggest sites on the web use minimalistic designs, like Google, eBay, Amazon, etc. As long as it’s a good user interface, minimalist design is a great choice.

  65. Cartão de Visita 06/22 10:07am

    I am very impressive with this blog. Congrats.

  66. Clinica de Estetica 06/22 10:07am

    Congratulations for this amazing blog.

  67. Cold Mix Asphalt Patch Repair 06/23 4:47am

    That is lovely design

  68. Web 2.0 Design 06/23 8:54am

    That’s really cool. I liked “Twequency” very much. Many thanks for sharing.

  69. Web 2.0 Design 06/23 8:56am

    Excellent Designs. I really liked “Twequency”.

  70. Web Redesign 06/24 2:22am

    Awesome designs. Thanks for uploading them.

  71. Harga Komputer 07/03 1:02pm

    Great Design, I hope you upload more

  72. Toko Komputer 07/03 1:51pm

    I found your website perfect for my needs. It contains wonderful and helpful posts.

  73. career surveys 07/04 7:11am

    That’s really cool. I liked

  74. mahjong 07/10 10:46am

    Very good design. I’m impressed.

  75. antiviurs 07/23 12:56am

    Your Design is really great, I love especially the content area. Do you know anybody that does individual wordpress themes?

Hello

I am a graphic designer who lives in Washington, DC.

I am also a neat freak, a mother of 2 (dogs), cog in the government machine, Michigander (troll), a bicycle pilot, and an aspiring pie entrepreneur.

Recent Work

  • Sunlight Foundation Holiday
  • Capitol Words
  • Apps for America
  • Sunlight Labs
  • Transparency Camp