One of the most common questions you will hear is "What does this prototype look like on the actual device?" In this video, get an answer to that question by adding the comp to a device template to provide the all-important context for the prototype.
- [Instructor] When it comes to prototyping interactions…and motion, context has to become a key consideration.…We can show what happens when things are touched and swiped…but it can be difficult to answer the following question.…So how does it look on an Android device or an iPhone?…Well, that's a great question.…And let's look at providing the answer.…And to get yourself started,…open the O six device file in your download.…When the file opens, you'll see there is an Android device…right here, located in the Android screen comp…and that device is sitting on a table.…
And if you double click the cards comp, which is right here,…you'll see that it's nothing more than a swipe action…that moves a bunch of cards up and down.…The plan is to put the cards comp in the Android screen…to show how this swipe would look on that device.…Now the key issue if I come back to the Android screen…is this white area right here.…It is in perspective, whereas the cards,…well, the cards are flat.…Now there are a couple ways of approaching this…
- 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.