Showing interactions in 2D formats such as the majority of our wireframes or visual designs can be really challenging. Renata shows you how to utilize gesture ui kits in your flows and designs to express how a user will interact with your app.
- [Instructor] Before we dig into how do gestures in Sketch, there's a couple things that you might want to explore in advance. The first is an article on A List A Part by Josh Clark called How We Hold Our Gadgets. And you'll note here that what he has found is that about 49% of people will use their phone with one hand whether it's their left or their right depending on whichever is dominant. Or there's the twohanded version, either tapping with their thumbs, or holding it with one hand, and tapping or swiping with their finger from the other hand.
The other thing you want to explore is Luke W's Touch Gesture Reference Guide. Here it's a downloadable PDF that you can go ahead and look through and it'll tell you the different types of gestures. As well as if you scroll further down you'll see that there's different ways that different platforms will use the variety of gestures. From the iPhone to Windows to Android and Palm to Wacom Tablet to GestureWorks.
There's a whole bunch of content here that you can drill down into, and while most of you will probably be in either the iPhone or the Android, it's still good to know that it's here in case you need it for any of the other platforms. Another resource that you're gonna want to download and utilize are these two different versions of gestures symbols that you can use in your Sketch application. In this video we're mainly gonna focus on this first one called the Gesture and Transition icons, but essentially if you need to show how the phone is going to be held for a client or you know, your internal client if you are just working internally with a team.
So you can use either one of these or both depending on what suits your needs. I've already gone ahead and installed the resource we're gonna use for our version here. What I want to do is just utilize the flows from earlier in order to show how to add gestures to our documentation. So let's first grab this tap gesture, and we'll just do command c to copy and go over to our flows.
And here we can go ahead and paste it in. It's super tiny so let's go ahead and make it a bit bigger by zooming in. And then we'll go ahead and put it here. Now it's a little bit hard to see on our design so what we can do is go ahead and click into it. And we'll change the color of the fill to white. Now it's a lot easier to see. The other thing we're probably gonna want to do here is what happens say, if someone swipes to the right or to the left on this application.
Let's go ahead and go back to our gestures page. And let's say for this instance because they're looking at the mobile navigation that we want them to swipe towards the side of our hamburger button. So that it disappears off to the right. So let's select that and copy, go back to flows, and paste. And again it's super tiny so let's make it a little bigger. And then we'll say we'll just put it right there on the side.
Double click inside of it, and then we'll select the two paths. And go ahead and make it white. Now it's a little hard to see so let's go ahead and select the item and move it over further. And now with these gestures it'll give us an indication of how a user can interact with our mobile app. Another option is to illustrate gestures by utilizing various prototype applications or after effects, and we'll get into this later in the course.
That's a little bit about how to design with gestures.
- Getting organized in Sketch
- Managing symbols in Sketch
- Drawing shapes in Sketch
- Boolean operations
- Building and sharing your own library
- Designing gestures and interactions
- Building game assets
- Advanced tips for workflow management
- Building prototypes
- Creating and sharing libraries
Skill Level Advanced
Q: This course was updated on 05/22/2018. What changed?
A: We added new videos on prototyping and building and sharing libraries in Sketch.