Home > Client Technologies, Tutorials > Gesturecons – icons for prototyping Multi-touch applications

Gesturecons – icons for prototyping Multi-touch applications

February 22, 2010

Gesturecons mapped to Windows Touch API

Gesturecons is a set of wire-framing gestural icons created by Ryan Lee, a designer for Cynergy. The icons are available for download made available via a Creative Commons License.

These icons will be very useful when creating wireframes or tutorials covering touch gestures. As a Silverlight and Windows developer, I wanted to see how well these fit with the Windows Touch API.  In the image to the right, I’ve mapped the icons to the Windows Touch Gestures. (Click the image to see it larger)

Importing the Gesturecons into Expression Blend to use in an application or a SketchFlow prototype is simple since Ryan has provided the icons in an Illustrator format.

To import the icons into Blend, follow these steps:

  1. Create a new or open an existing project
  2. Select File > Import Adobe Illustrator File…
  3. In the dialog select the “cs.ai” file from the “Gesturecons.zip” file
  4. The artwork will appear in your UserControl in a Canvas named cs
  5. Zoom out the artboard to see all of the icons by: typing Ctrl+-, using the mouse wheel over the artboard or using the Zoom dropdown in the bottom left corner
  6. In the Objects Panel, Delete the borders Canvas
  7. Right-click the icons Canvas and select Ungroup
  8. Select the first Path, scroll down to the last Path and holding Shift select the last Path
  9. With all of the Paths selected now, scale down the group of icons by dragging one of the corners of the outermost bounding box, hold Shift to lock to a relative scale.
  10. Reposition the group to fit on your UserControl and zoom back out to 100%
  11. To reset the cs Canvas, in the Properties Panel, set Width and Height to Auto

The Gesturecons are now available in XAML as reusable vector paths. The next steps you might take to make these easier to reuse include, grouping Paths that make up an individual icon and making them available as Resources.

Thanks again to Ryan Lee for creating and sharing the Gesturecons!

  1. February 22, 2010 at 10:43 am

    Thanks for sharing this, Adam.

  2. February 22, 2010 at 11:19 am

    woot, so want to see these get included into blend or a control library you can include

  3. February 22, 2010 at 2:25 pm

    Would love to see an example of the gestures in action in a real wireframe.

  4. February 23, 2010 at 4:24 pm

    Thanks for the call out Adam.

    I have received a lot of great feedback and plan on making some example wire-frames using these (as suggested by Mark.) There will be more Gesturecons forthcoming as well, the next batch will include mobile gestures and some other additional user patterns.

    I would love for these to be incorporated into Blend as well.

    • February 23, 2010 at 8:31 pm

      Great to hear Ryan! I look forward to seeing the wireframes and the additional mobile gestures. I’ll make sure the Blend team sees them as well 🙂

  1. February 23, 2010 at 5:44 am
  2. March 1, 2010 at 9:45 pm
  3. March 1, 2010 at 10:01 pm
  4. April 13, 2010 at 11:23 am
Comments are closed.
%d bloggers like this: