Website: NoWaste - Responsive Coming Soon Website Template (PSD, HTML5, CSS3, JS)
Elements Design: Space Icons Pack (AI)

Elements Design: Touch Gesture Icons for Multi-Touch Devices (EPS, PNG, PSD)


In computing, multi-touch refers to the ability of a surface (a trackpad or touchscreen) to recognize the presence of more than one or more than two points of contact with the surface. This plural-point awareness is often used to implement advanced functionality such as pinch to zoom or to activate certain subroutines attached to predefined gestures. - Multi-touch

Simulating realistic responses digitally is by no means easy, but when done correctly it is rewarding. Rachel Hinman, Mobile UX Researcher at Intel, compiled a list of the 12 basic principles for animation, taken straight from the 1981 book The Illusion of Life: Disney Animation, but adapted to mobile design . - Gestures & Animations: The Pillars of Mobile Design

  • Squash & Stretch: Be mindful of an object’s mass and rigidity, displayed by how it “squashes” or “stretches” when moved. Will your object move as a solid block, or will it display some flexibility?
  • Anticipation: Visually anticipating the next action can help alleviate some user confusion, as well as make the UX more enjoyable.
  • Staging: Presenting your content properly will help anchor your user so that they feel more comfortable interacting with your app/site.
  • Straight-Ahead and Pose-to-Pose: Use straight-ahead animation to capture dynamic and complex movement, and pose-to-pose to cover more predictable movement.
  • Follow-Through and Overlapping Action: Most movement isn’t stagnant throughout; pay attention to the differences between different areas, for example, a man walking moves his arms differently than he does his legs.
  • Slow In and Out: Adding more frames to the beginning and end of, say, scrolling through a menu, will give the impression that the app/site follows the laws of inertia like any other real-world object.
  • Arcs: Movement along an arc feels more organic, while movement along straight lines seems mechanical.
  • Secondary Action: In the real world, actions have multiple consequences; a good example of a secondary action in a mobile app/site would be, if the user opens a new window, animate the old window closing.
  • Timing: There is no one-rule for timing, as different speeds convey different tones. Fast might work best for light, fun apps/sites, while slow might be better for more structured and complex ones.
  • Exaggeration: Don’t be afraid to take things bigger—just because you’re following reality doesn’t mean you can’t bend the rules when appropriate.
  • Solid Drawing: Make use of 3D space, weight, and volume, as a real world object does.
  • Appeal: A more theoretical principle, give your app/site some personality and charisma. A personal touch can go a long way in improving UX.

Gestures are important in app design, but never become over reliant on them. Moreover, avoid using a gesture-accessed menu or action as the only point of access.


Elements Design: Touch Gesture Icons for Multi-Touch Devices (EPS, PNG, PSD)

Created by Mobile Tuxedo.

Enjoy this freebie and want to show support? Spread the word.

Share & Like is appreciated!

We hope you enjoy this freebie and find it useful!

Tags: touch gesture icons, multi touch devices, elements design, mobile, desktop, animation

Leave a Comment

No Comment

© Creative3x Ltd.