This exercise focuses on what happens when a user clicks on an object and it zooms into focus. Explore the key techniques, such as the use of the anchor point, scaling, and giving an object focus in an interface.
- [Instructor] A common micro interaction…especially with screens composed of photos…is to have a tapped or clicked image…zoom into focus.…In this exercise we're going to do just that…and along the way discover a couple of techniques…to make this interaction a little bit more delightful.…So to get yourself started, open the 04 zoom.aep file…in your chapter download.…When it opens, you will see there is an image…that is already in its zoomed state.…The reason for this is the very nature…of digital media.…
When you scale an image up,…not only does it get physically larger,…but its pixels tend to get a little bit fuzzy…because they too are made larger.…Scaling down really has no effect on image quality…thus the use of a larger image.…The first thing we're going to do…is to select the image right here,…and we're going to change its anchor point…to the bottom left hand corner,…and you can do that by pressing the Y key,…which is right here, the pan behind tool,…and we're just going to move it…to the bottom left corner just like that.…
- 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.