Touchscreen Gesture Icons
April 21st, 2009
Recently, quite a few representation about human activity have been merging in with the wireframe. Similarly, here is a template which contains various possible gestures on a touchscreen. Elaine came up with interesting ways to represent: taps, double taps, drags, flicks and pinching. Unflattened PNG can be grabbed from here (Elaine says: “I’m okay with people using the images for wireframes, presentations and educational purposes, but no modifications please”).
On the same note, Dan also posted another gestural icon set over here.
Credits: Elaine Chen
April 21st, 2009 at 4:16 pm
What a fascinating depiction! I especially love the use of the gradients on flick and pinch, and the use of a half-tone so as not to blow out the blacks. Very very well done.
April 27th, 2009 at 1:20 am
Thanks,very useful, I linked your blog;)
October 13th, 2009 at 8:47 pm
This is a really great example of how to portray gestures on a mobile device. The link above only shows one, is there a way to see the set?
Great site! Thanks!
October 14th, 2009 at 2:26 am
Hey Shawn. I think you have to open it in Fireworks, and then look at the various "States". There you'll have all of them. Cheers. Jakub
January 26th, 2010 at 10:00 am
[...] Vincent, a friend of mine, has been tinkering with some new ways of portraying simple touch screen interactions on his Get Around application. He uses a big overlaid thumb with a set transparency to indicate the touch. For indicating a dragging action, the thumb also contains an arrow with a direction. Just thought to share this as I found it interesting. To refresh quickly, Elaine has also approached the same problem previously in a slightly different way. [...]
January 28th, 2010 at 2:49 pm
Only in Fireworks? :(
Even Photoshop can't see its various states.