Opening and dismissing slide-out or pop-down menus is the subject of this video. Review some of the best practices and learn how those best practices are brought into play.
- [Instructor] Slide out menus, side bars and drawers,…when it comes to prototyping microinteractions…have become somewhat regarded as a necessary evil.…The purpose of these elements is to provide…more options to the user regarding the app…or the webpage.…Though it may not seem like it,…but the screen space for an app or webpage…is actually quite limited, and one really doesn't want…to junk up the interface with menus, buttons,…or other elements.…In many respects, these menus can be regarded…as on demand elements that are available…if the user needs them.…
So let's get going, and to get yourself started,…open the 08menu.aap file in your download.…What you are looking at is the UI after…the menu layer slides out from the left.…Here's where we're going to have the menu layer,…this one right here, it's going to move from here to here.…It is a common best practice to give the menu focus,…which is why it's so bright, and this is accomplished…by darkening the UI below it.…So the UI as you notice, is really quite dark here.…
- 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.