In this exercise, look at a method of prototyping what happens when a user inputs text into a text field. To do this, take a rather deep dive into the After Effects typewriter effect.
- [Instructor] A common micro interaction…when it comes to prototyping is showing the text input.…It's always nice to show the users…or whoever the stakeholders are…exactly how text would look as it gets input…and there are a couple of ways of doing that…in After Effects so let's get started and to get started,…open up the 09_TextInput.aep file…found in your chapter download.…Now we're going to add the guy's name right here.…This is the name field so I'm just going to get the text tool…and I'm just going to draw a text box here…and I'm going to type in the guy's name…and I'm going to use John Smitherson.…
You can use your name if you want.…And there's good old John Smitherson.…I'm just going to make it a little bit smaller…and bring the box in to fit…and pull it down to where it's supposed to be…right about there.…We'll just line it up with the center of the comp.…All right, so we've got John Smitherson's name in there.…How do we get that in?…Well, I'm just going to collapse the character panel.…I'm going to go to the effects and presets.…
- 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.