Modal dialog boxes are those little windows that pop up on a screen and ask the user to make a decision. In this video, review the dos and don'ts of using modals and how to prototype their arrival and dismissal.
- [Instructor] We have all encountered…sites in mobile apps that make use of modal dialog boxes.…Modal dialog boxes are those small dialog boxes…that pop up and force you to interact with it…before going back to the main screen.…And we have one right here.…There it is.…And there are a couple of other aspects of modals…that are important,…and you got to keep in the back of your mind.…The first is to gray out or fade the background…to give the modal focus.…So this will be remain in focus,…but this background image here…will either be grayed out or faded out some other way.…
The second is to always give the user…the option to cancel the request and close the modal.…That's why there's this little x close up here.…So how does this all work?…Well, let's find out.…And to get started, open the modal.aep file…in your chapter download.…When it opens,…you'll see that the project consists of these two layers,…which contain the comps from Photoshop.…That file, by the way,…can be found in this chapter's content folder.…It is the ModalDialog.psd file.…
- 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.