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.
4 months ago
That's pretty neat man!
Nice, thank you!
Beautiful, and a great cause with AFSP!
Useful! thanks man!
I am Impressed, Thank You!
Featured here: http://dajzafree.net/2013/07/touch-gestures/
I like it a lot ! :)
Gonna use the hell out of this. Thank you!
These are awesome :) Thanks.
these are phenomenal
Guys... thank you so much for all your comments. I'm blown away by all the support :)
Wow man these are awesome - much appreciated!
These are beautiful.
Just got em' Great man!
Yup, tutorial plus After Effects file would be greatly appreciated!
@Mikael Johansson Definitely drop your email in on the site. I'll be sending all the updates out through that mailing list! :)
"flick looks like fuck"
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"?
@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!
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.
3 months ago
@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 :)
Yeah that's great-- thanks for taking the time.
very nice, i love the swiping gestures and how they look like they stick.
about 1 month ago
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter