Updated Roll-out of Expressive Redesigns in Google Material 3
Google has unveiled its latest design language, Material 3 Expressive, a refreshing update that brings bolder, more dynamic, and fluid UI elements to several Android apps. The key updates emphasize enhanced animations, morphing shapes, increased use of color and depth, and refreshed typography, aimed at making interfaces more engaging and tactile.
Google Wallet
The Google Wallet app has undergone significant changes. The "Wallet" text has been replaced with the app logo in the top-left corner, and passes are now displayed in thicker, more prominent cards. The Recent Activity page features new container-based layouts, and the NFC tap-to-pay animation gains a translucent background with the card "jumping" in a more animated success effect. Pixel users can look forward to a new overlay for double-tap power gesture payments.
Google Drive and Gmail
While direct Material 3 Expressive changes weren't fully itemized, these apps are part of Google’s broader ecosystem rollout. They feature rounded containers for lists and message threads, pill-shaped buttons, and more interactive elements. These design changes can be seen in apps like Google Messages, which shares similarities with Gmail.
Google Keep and Calculator
In the realm of productivity apps, Google Keep and Calculator showcase specific updates. Floating action buttons expand into menus, taller buttons with rounded corners appear, and cleaner layouts with subtle elevation for depth are introduced. Calculator updates include new button styles, thinner fonts for numerals, and hidden scientific functions accessible via expandable buttons, signifying a move towards a cleaner and more minimalistic interface with Material 3 Expressive.
Additional Updates
Material 3 Expressive introduces variable fonts, allowing dynamic typography with adjustable weight and width. A wider color palette, including tertiary colors for more distinct branding, and fluid motion through shape morphing are also part of the update. This approach lets UI components dynamically change shape and size in response to user input for richer, springy animations and enhanced visual feedback.
Google Contacts' redesign places everything in containers and features a shorter bottom bar with color tweaks to the app’s background. Google One, on the other hand, has removed its infographics for a denser app in its redesign.
Google's new Google Contacts app and Google Calendar app have been launched. The redesign for Google Drive includes a search app bar and a large container for the list/grid content view. Gmail's redesign places the list of emails and the message in a container, and adopts a search app bar.
Google Meet's homepage places each call in a large/tall card, and the pre-call screen features very large voice and video call buttons, a pill for the name, picture, and email address of who you’re calling, and various buttons that have been rounded. Google Calendar's various views now place time slots in rounded containers, and there’s a solid background layer in the primary Dynamic Color.
Google Docs, Sheets, and Slides have updated their editor interfaces with a new Material 3 Expressive progress indicator and pill-shaped buttons. The Format sheet has also been modernized. Google Messages places the list of conversations and message thread in rounded containers, and the 'plus' menu has been redesigned with all options in pills. Google Keep's notes page now has buttons in containers, and the search app bar has been updated with the M3 Expressive component.
Google Photos' redesign includes a new backup indicator at the top of the app. The NFC tap-to-pay animation in Google Wallet is getting a M3 Expressive redesign. Google has announced that these updates aim to deliver a more immersive, visually appealing, and user-friendly experience by combining modern visual aesthetics with smooth, context-sensitive animations and more tactile, accessible UI components. Many of the changes are rolling out progressively, using server-side updates to allow refinement based on user feedback.
- In the Google Wallet app, the NFC tap-to-pay animation will be receiving a Material 3 Expressive redesign, featuring a translucent background and a more animated success effect.
- Google Messages, similar to Gmail, is incorporating rounded containers for list and message threads, as part of the broader ecosystem rollout of Material 3 Expressive.
