Google Maps UI Design Teardown THE BEST UX DESIGN FOR MANAGEMENT MODALS #uidesign #designtutorial

Google Maps UI Design Teardown THE BEST UX DESIGN FOR MANAGEMENT MODALS #uidesign #designtutorial

Nolan Perkins 37.4K subscribers
3.5K views · 2024-07-26 Interaction & UXUI Design
It’s going to happen. If you’re designing a product, you will have to create a management popup. Make the right choice and skip the popup—use sheets instead!

Sheets are so nice to use because users control the user experience. They can swipe down to close, reference the content behind to remember where they are in the flow, pull up to get more details. All while still having lots of room to add management buttons and additional content.

In this video I break down how Google Maps uses sheets and how it fits into material design system. Then we’ll go rebuild Google Maps together in Figma through a follow along Variables, Components, and Prototyping tutorial.

Find me on socials:
https://instagram.com/_radnolan/reels
https://tiktok.com/@radnolan
https://linkedin.com/in/nolanperk

Join the community: https://bit.ly/rad-makers

------

Chapters:
0:00 Why Sheets are so good
1:07 Google Maps sheets teardown
6:36 How I use sheets
8:25 Recreating Google Maps
17:15 Prototyping, Variables, and Components

You're Rad ❤️