Android L (5.0) is the first time since the original release where Google have shared lots of info and tools before launching into the commercial market. This is an ideal opportunity for products, developers and designers to prepare transitioning to the latest updates.
Material design is an evolution. It sees Android’s design patterns extending outside of 2D static rules and into designs which consider animations and feedback within their interactions. HOLO design brought us a long way, but what now? How do we transition? How soon? On August 26 at Skillsmatter, we invited Visual Designers to re-imagine some well-known applications. A big Thank You goes out to clients Songkick, CCleaner, and The Sun who allowed us an opportunity to preview some concepts of Material design at the meetup. Here is what we presented.
Material Design is largely based on the study of paper and ink, so redesigning a newspaper felt natural. Use of bold imagery, colour, cards, iconography and the new typography standards really encourage the content to stand out. Using colour to indicate categories without labelling each article helps clean up the layouts and the use of a transparent App bar allows the user to take in the beautiful, large edge to edge images.
Dave Clements, @DigitalPencils
Songkick really benefits from Material Design. Its strong emphasis on photography works beautifully within photo grids, showing bold hero imagery within a consistent layout. This new design also take’s advantage of cards to group specific areas of information across the gig listing and detail screens. I’d love to see all this really moving, the material transitions would be a delightful addition! I think smooth transitions and animations across states would add a fluidity and enhance the user experience.
Leonie Brewin, @leoniebrewin
CCleaner for Android is the most efficient way to keep your device clean. This design pushes the branding by taking two of the colours from CCleaner’s logo as primary and accent colours. We use cards as an entry point to ever more complex and detailed screens. Putting the ‘Clean’ action into the floating action button makes sense here, as it’s the primary action. Also we’ve made the bar charts take up the whole header space to create a bold and graphic interface that immerses the user.
Qi Qu, @cooky77
Discussions from the meetup
After discussing the designs, as a group, @Cennydd posed a few key questions to the crowd and we discussed. Here is a summary:
How exactly can we convey “Material” in our designs?
Material Design is about layering information and presenting and interacting with that information in a predictable way. Android now ships with in-built support for touch feedback, transitions, and viewstate changes. You can also customise the colour palette by simply changing to the new Material theme.
- Animations: https://developer.android.com/preview/material/animations.html
- Color Palette: https://developer.android.com/preview/material/theme.html#colorpalette
- Shadows: https://developer.android.com/preview/material/views-shadows.html
Branding: How can we retain a unique identity?
Every medium poses its own unique challenges for a designer conveying a brand’s values. Holo was initially criticised as being too minimal and not allowing enough room for interpretation and individuality. As designers innovated around their constraints, more importance was poured upon the prevalent icons in the action bar and drawer. Material will pose the same challenges, but also new opportunities for expression. Many anticipated a trend in following Google’s initial lead but later an emphasis on unique animations, transitions and general interaction patterns. Experimentation will take part soon after apps have built upon the initial rules.
Form Factors: How can we stay “responsive”?
Material is an evolution within all our previous design learnings still apply. Clumping together information to contextualise it, keeping actions together and close to the content upon which they affect. Creating interfaces within which the bound content can scale up and down across screens gracefully is now more important than ever.
What are “Quick Wins” for a Material Design App?
- Decide on the primary and accent colours of a brand.
- Data should not just disappear, instead take the chance to communicate the results of a user’s interactions by animating data emerging from interactions.
- If in doubt remember some of the wins from Holo, they needn’t necessarily conflict with Material instead we can build upon them as safe foundations.
Generally it was agreed that if we anticipate the adoption of patterns to be similar to previous releases, we should start considering updates as early as possible. Considering changes early will give Apps a chance to out perform competitors and benefit from the good will earned by happy customers who expect their software to perform to the best available utility.
Further info on Material Design:
Join future discussions, held monthly in London at www.meetup.com/android.