Back

Great GIF Examples of Material Design in Mobile Apps Development

You have heard a lot about Google’s “material design”, right? Finally, it is time to see exactly how it looks  and how it can work for your mobile app development. Here is a showcase of great gif-examples that we chose from Dribble to illustrate some important elements of material app design.

1. Material design is grounded in our experience of tactile reality. The motion should be natural, but with a little bit of magic in every move.

alarm_material_ui.gif

“Material” Animation

2. Surfaces and edges should be intuitive and natural. The use of familiar tactile attributes speaks to primal parts of our brains and helps us quickly understand affordances.

events-menu_1-1-6.gif

Side menu with some categories to choose

3. The fundamentals of light, surface, and movement are key to conveying how objects interact. Realistic lighting shows seams, divides space, and indicates moving parts.

calculatorrender.gif

“Material” Calculator

4. User is a prime mover and initiates change. Changes in the interface derive their energy from user actions. Motion cascades from touch respects.

playpause_1-2-2.gif

Play/Pause Transition

5. Animation is choreographed on a shared stage. All action should take place in a single environment. Objects should be presented to the user without breaking the continuity of experience even as they transform and reorganize.

aviasales_search_.gif

Search Screen Animation for Aviasales App

6. Bold design creates hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create immersion and clarity.

mt-music.gif

Material Design Transition

7. Natural animation and touch gestures are the focus of “material” app design. User action is the essence. The primary actions are inflection points that transform the whole design. Their emphasis makes core functionality immediately apparent and provides waypoints for the user.

choreorender.gif

Animation Choreography

8. The emphasis on motion and micro-interactions is a key of material design. Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

androidwear.gif

“Material” Motion

We really like the material design concept, because it is clean, focused and minimal. These are all trendy things that we expect today as app developers and users. Moreover, it is wonderful to see that Google is increasingly focused on design, and more importantly, provides tools that help us to bring our apps to a new level of usability, comfort and delight. Our team believes Google will continue to invest significant resources in the direction of design.

_____________________

Stanfy is a mobile app design and development company specialising in mobile UI/UX and development across mobile and wearable devices including iOS, Android, Pebble Smartwatches and Google Glasses.

September 12, 2014

Designtrends