November 11
Tags: ui design interview
I was looking at the Photojojo store yesterday and was amazed at some of the UI details Amit and Co. have put in to it. I wrote Amit and asked him a few questions: I love the simplicity of the video player and how the play/pause also functions as the progress nugget. Is it custom built by you guys?Video player is custom. We didn’t need all the gobbledygook in most players and couldn’t find anything as minimal as we wanted.The pink balloon (“Learn More”) and the animation is brilliant! How did you guys come up with the details?Glad you like the balloon! We’ve been rolling out this design in pieces over the past few months, and that was one of the first. We wanted the store to be fun, and we wanted big photos. Having that big photo up top meant pushing the description down below the fold, and I didn’t want people to miss that. So originally I just had a line drawn down to it with arrows and a box up where the balloon is that said “more details”. I rounded the corners of that box, it started to look like a balloon, so I made it into a balloon, and the rest just came from that.The sickest (and slickest) element of the store is the Add to Cart animation (try it for yourself).  How did that piece go from an idea to the final piece online?The Add to Cart animation took forever to get right! We still tweak the animation curve and speed nearly every day. Susan and I worked pretty closely on the add to cart animation. Typically I hand over photoshop comps to her, we discuss them, and I revise based on that conversation (and in some cases, feedback from flickr). It’s harder with animation because you can’t mock it up as easily. I had an idea for what I wanted (it’s actually born from an effect we did for the forum a year ago but didn’t end up pushing live), Susan got it working in rough form, and then we worked together on tweaking the behavior as she finished the implementation. For all you people with a fetish for great UI designs, check out the thumbnail slider below the main photo on this product page, and note the motion and the shadowed cut off line, and how it switches sides…  Stop drooling.

I was looking at the Photojojo store yesterday and was amazed at some of the UI details Amit and Co. have put in to it. I wrote Amit and asked him a few questions:

I love the simplicity of the video player and how the play/pause also functions as the progress nugget. Is it custom built by you guys?

Video player is custom. We didn’t need all the gobbledygook in most players and couldn’t find anything as minimal as we wanted.

The pink balloon (“Learn More”) and the animation is brilliant! How did you guys come up with the details?

Glad you like the balloon! We’ve been rolling out this design in pieces over the past few months, and that was one of the first. We wanted the store to be fun, and we wanted big photos. Having that big photo up top meant pushing the description down below the fold, and I didn’t want people to miss that. So originally I just had a line drawn down to it with arrows and a box up where the balloon is that said “more details”. I rounded the corners of that box, it started to look like a balloon, so I made it into a balloon, and the rest just came from that.

The sickest (and slickest) element of the store is the Add to Cart animation (try it for yourself).  How did that piece go from an idea to the final piece online?

The Add to Cart animation took forever to get right! We still tweak the animation curve and speed nearly every day. Susan and I worked pretty closely on the add to cart animation. Typically I hand over photoshop comps to her, we discuss them, and I revise based on that conversation (and in some cases, feedback from flickr). It’s harder with animation because you can’t mock it up as easily. I had an idea for what I wanted (it’s actually born from an effect we did for the forum a year ago but didn’t end up pushing live), Susan got it working in rough form, and then we worked together on tweaking the behavior as she finished the implementation.

For all you people with a fetish for great UI designs, check out the thumbnail slider below the main photo on this product page, and note the motion and the shadowed cut off line, and how it switches sides…  Stop drooling.
blog comments powered by Disqus