Gesturecons – icons for prototyping Multi-touch applications

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!

This entry was posted in Client Technologies, Tutorials and tagged , , , , , . Bookmark the permalink.

9 Responses to Gesturecons – icons for prototyping Multi-touch applications

  1. Discorax says:

    Thanks for sharing this, Adam.

  2. Mike Wolf says:

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

  3. Mark Tucker says:

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

  4. Pingback: Dew Drop – February 23, 2010 | Alvin Ashcraft's Morning Dew

  5. Ryan Lee says:

    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.

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

  6. Adam Kinney says:

    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 :)

  7. Pingback: TWC9: MIX10, Tweets from Your TiVO, Touch UI Gesture Icons and More — Global Nerdy

  8. Pingback: Tune Up Your PC » Post Topic » TWC9: MIX10, Tweets from Your TiVO, Touch UI Gesture Icons and More

  9. Pingback: Gesturecons – FREE icons for prototyping Multi-touch applications » okayjames

Leave a Reply