The Ripple effect is a color filling an area when a floating action button is clicked or tapped. In this video, approach the effect from two perspectives: filling a screen and filling a defined space.
- [Narrator] In this exercise we will be looking…at one method of creating a material designed Ripple effect.…And you've seen this effect on practically…every device and screen out there.…A ripple is essentially a shape expanding…to fill an area on a screen.…In chapter two, we did just that,…by scaling a circle to fill the screen.…In this exercise were going to go a little bit deeper.…So, the whole purpose of the ripple effect is…to have the screen react with touch or click to…indicate where the screen was, well, touched or clicked.…
It is also there to provide the user with visual…feedback that something was touched or clicked as well.…And that feedback is commonly an area on the screen…filling with a color.…In this exercise, we're going to do just that, but…we're going to add what Material Design calls "a…delightful detail".…The button will zip down to the area effected…and then ripple out.…So, let's get started.…And to get yourself started, open the 08 Ripple file…in your chapter download.…Now the plan is very simple,…
- 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.