The common swipe gesture on a smartphone has become commonplace. In this video, explore how to prepare a swipe microinteraction and, along the way, we add a couple of delightful details to the cursor.
- [Instructor] Next to tapping, I would have to say swiping…is one of the most common gestures we use…with screen based media.…For example, see a hero image on a web page.…Swipe to get to the next image or next screen.…Tinder has turned the term swipe left…and swipe right into verbs.…Want to get to a screen transition?…Let the user swipe to kick it off.…So how does one create a swipe microinteraction?…Well let's find out.…Open the O four swipe file in your download…and let's get started.…
And when the file opens, you'll see we have…a couple of cheese images that would be swiped…as well as the cursor that will do the swiping.…And if I scrub across you can see…that the images do tend to move.…So we're going to have to get the cursor…to move these images and do a swipe.…So if I come across to about frame 30…this is where the motion starts.…So we're going to have to move the cursor…into its start position.…So we'll just grab the cursor and we'll just move it there.…And once the cursor is in place,…we're going to add a position keyframe.…
- Prototyping motion
- Using the Graph Editor
- Working with shapes and masks
- Supporting tap, press, and swipe gestures
- Handling pinch and spread gestures
- Designing patterns
- Making navigation, buttons, and breadcrumbs
- Creating progress bars
- Working with modals, menus, and cards
- Zooming content
- Making a floating action button
- Handling text input and cursors
Skill Level Beginner
Modular UX Design with Photoshopwith Jesse Freeman48m 8s Advanced
1. Microinteraction Fundamentals
2. The Common Gestures
3. Design Patterns
Next steps1m 21s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.