Google officially unveiled Material Themes at I/O 2018 after weeks of various Android and web apps slowly revealing new aspects. During the keynotes, first-party apps, like Photos, showed off the new design and now Google is revealing “partner studies” that explore how others could adopt it.
The primary focus of these partner studies is to showcase various new elements of Google Material Theming, which aims to allow third-parties to design more distinct branding. Each included app explores a different new or refined aspect announced at I/O 2018.
Pocket Casts
Motion was the theme of the Pocket Casts concept that also swaps out the navigation drawer for a bottom bar. The app maintains the minimized player just above this new navigation system, but is more feature rich compared to the current design. There are new controls for rewinding/forwarding and on “up next” there is a counter of how many podcasts are in the queue.
As the player opens, other parts of the app — including the bottom navigation bar — cleanly transition out of sight. And player controls — play, pause, rewind, fast-forward — use choreography to appear in just the right spot.
Lyft
Right off the bat, the most notable aspect of the ride-sharing app is the Extended FAB, which we’ve seen in apps like Google Tasks. It added width and prominence that helps solidify “the primary action of the app,” which in this case is booking a ride. Depending on type of rides, the button will update its text to match.
The component serves as a great canvas for the systems that define Lyft’s vibrant identity—incorporating color, type, and shape—while providing functional benefits as well. An extended FAB can easily accommodate short or long labels that are more descriptive than an icon alone.
NPR
The public radio app makes heavy use of Cards to organize content with at least three on the case study screenshot. With the now standard white background, the top two are lists of programs, while the third takes the form of an audio player. The rounded corners also help highlight the swipe-able nature of the card to reveal the full set of controls.
The white cards on a minimal, white background create a visual structure that avoids complication, and the shadows “cast” by each card further communicate each grouping of content. The team also established a branded shape system using broad, rounded corners. The custom shapes manifest in the mini player, cover art for shows and publications, and the cards themselves.
Genius
The Genius study is the only one that shows Material Themes applied to both a phone form factor and a more traditional desktop view. This example of a Responsive layout grid results in a shared experience as “you move between devices.”
Zappos
The shopping site took advantage of Backdrop — or backgrounds — to “preserve context,” especially within its search filtering feature.
The task was to better emphasize the items users are looking for without sacrificing quick access to controls like search that users always want close at hand. The team explored the use of Material’s new backdrop, which establishes a strong mental model in the app, helping users understand that search and filtering are always just a tap away, in a dedicated and omnipresent surface in the back layer.
FTC: We use income earning auto affiliate links. More.
Comments