Precomposed Touch Gestures

Dribbble-shot-edit

1 Attachment

30 Responses (page 1 of 2)

  1. Areus Wade Areus Wade

    Download them here!

    I often have to animate my app prototypes at work, and noticed myself digging through past projects solely for a touch gesture to illustrate what actions were being done in my concepts. I made these to save myself time, and felt that maybe it would help others as well.

    These are free for a tweet, or $2. All proceeds will be donated to AFSP.org. I will be actively keeping these updated in the event new gesture patterns are introduced, or if there are any popular feature/effect requests from others.

    If there's enough interest in these, I was thinking about including the AE file as well as whipping up a few short tutorials for anyone seeking help with how these can be used.

    Again, go download them! Happy prototyping! If you have any questions, tweet me @areus.

    likes

    9 months ago

  2. Samuel Couto Samuel Couto

    That's pretty neat man!

    9 months ago

  3. Marcel Wichmann Marcel Wichmann

    Nice, thank you!

    9 months ago

  4. Joe Turner Joe Turner

    Beautiful, and a great cause with AFSP!

    9 months ago

  5. Edu Torres Edu Torres

    Useful! thanks man!

    9 months ago

  6. Djordje Vanjek Djordje Vanjek

    I am Impressed, Thank You!
    Featured here: http://dajzafree.net/2013/07/touch-gestures/

    9 months ago

  7. Manuel SAINSILY Manuel SAINSILY

    I like it a lot ! :)

    9 months ago

  8. Joris Rigerl Joris Rigerl

    Gonna use the hell out of this. Thank you!

    likes

    9 months ago

  9. Andreas Ubbe Dall Andreas Ubbe Dall

    These are awesome :) Thanks.

    9 months ago

  10. Andrew Andrew

    Like

    9 months ago

  11. Chris Slowik Chris Slowik

    these are phenomenal

    9 months ago

  12. Areus Wade Areus Wade

    Guys... thank you so much for all your comments. I'm blown away by all the support :)

    9 months ago

  13. Nate Dicken Nate Dicken

    Wow man these are awesome - much appreciated!

    9 months ago

  14. Craig Stubblefield Craig Stubblefield

    These are beautiful.

    likes

    9 months ago

  15. Nate Sanders Nate Sanders

    Just got em' Great man!

    9 months ago

  16. Mikael Johansson Mikael Johansson

    Yup, tutorial plus After Effects file would be greatly appreciated!

    9 months ago

  17. Areus Wade Areus Wade

    @Mikael Johansson Definitely drop your email in on the site. I'll be sending all the updates out through that mailing list! :)

    9 months ago

  18. Liz Franco Liz Franco

    "flick looks like fuck"

    Dying.

    9 months ago

  19. Adriano Kono Adriano Kono

    Awesome!!!

    9 months ago

  20. Shad Romero Shad Romero

    Hey @Areus thank you for giving this away. Def subscribed to the mailing list for future updates. My only question is, how would you suggest the best method of using the .mov files in a "prototype presentation"?

    9 months ago

  21. Areus Wade Areus Wade

    @Shad Romero Thank you for downloading and subscribing!

    Short answer: You're going to have a better time with these in a video editing and/or motion design program than you will anything else.

    Long answer: I think your absolute best case scenario is to use these in After Effects so you can take advantage of velocity control. These gestures assume you've already slapped together a demo of some sort, and all that's left is to show how to interact with the app, or how certain panels/views are invoked. All you'd have to do at that point is place these in your timeline where appropriate and export.

    These gestures will definitely work in Photoshop if thats your preferred route, and will implement almost exactly like I described above for AE, only you don't have as much control over the timing & transitions.

    I do understand that not everyone is comfortable in AE, or might not know the ins and outs of the program, so I'm pivoting as fast as I can to make tutorials and resources for designers that fall in that bracket.

    I wasn't expecting this kind of response which is the only reason why the aforementioned tutorials and resources aren't already online.

    If you have any questions, suggestions, or issues, feel free to reach out!

    likes

    9 months ago

  22. Nate Sanders Nate Sanders

    There's some heated debates on the ability to do the translucency style blur that you have on this landing page-- Can you educate me on this haha. This is really great and I've been looking for a solution for that effect.

    7 months ago

  23. Areus Wade Areus Wade

    @Nate Sanders No problem! I got a lot of emails asking about the technique.

    A few things happen when you click the purple download button:

    - A "blur" class is added to the body (with js). In this CSS class, I use the CSS blur filter to achieve the blurring effect. I set a transition on the body element itself, which is what allows the blur to transition in gently instead of just blurring right away.

    - A div is overlayed on top of the entire site that has a CSS3 radial gradient as the background. It uses the same exact hue of purple that I have on the buttons, but with different levels of opaqueness.

    - The download buttons in the modal pop-up have a very transparent white set behind it. Since the overlay, and the dialogue with the download buttons are transparent, the blur shows through and 'fakes' the effect of the download modal without actually doing any kind of dynamic blurring.

    In this file: http://areuswade.com/precomposed-touch-gestures/css/screen.css -- see the classes .overlay, and body.blur.

    Hope that helps :)

    7 months ago

  24. Nate Sanders Nate Sanders

    Yeah that's great-- thanks for taking the time.

    7 months ago

  25. Devon Stern Devon Stern

    very nice, i love the swiping gestures and how they look like they stick.

    6 months ago

keyboard shortcuts: previous shot next shot L or F like