Animated UI Prototypes - UI Design using Adobe Photoshop / Imageready
Animated User Interfaces using Adobe Photoshop / Imageready
I had to spend some additional time explaining my idea about a drop down menu UI to a developer. I tried to explain the concept in a paper.. and sketchboard. But still I felt, the developer didn’t understand what I meant. The meeting was over .. and we decided to meet after an hour. Sitting in my table.. suddenly I got the idea of using Adobe ImageReady to create a animated prototype. Launched Adobe Photoshop and created the elements such as Tabs, colors, text etc..and placed the elements that appear/disappear on seperate layers. Then launched ImageReady, created few frames and carefully selected which layers (elements) should appear/disappear for each frame. Then set the timing for each frame. After animating the image was over, I exported the image in GIF format and sent it to the developer via email.
He came to my seat within 5 minutes with a big grin.. “Rajesh.. That’s excellent. It is very clear now. No confusions”. And then, I started loving ImageReady. A long ago, some wise man said :”A Picture is worth 1000 words” 
Here is the animated image I shown to my developer.
