Google’s Material Design -Material.IO -10Feed

Google launched a new suite of tools meant to make it easier for designers and app makers to collaborate. Material Design makes more easy to use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

The concept, which was developed by Google for Android devices has a neat, clean and highly usable. Web sites featuring Material Design are creeping out of the realm of Android devices and are popping up everywhere.

Material.IO

Finally, Google Placed their existing work together in one place, Material.IO

Gallery — Design collaboration, simplified

First is a gallery, it will help people to share upload and comment on the design. It also has a presentation layer, so you can give out simple web links rather than pass around PDFs or Dropbox folders or etc.

Stage — Dynamic interfaces with interactive motion

Change the way you and your team design and build interactive experiences. Go beyond a process rooted in static design, and enable a more dynamic, intentional, and systematic workflow for crafting digital experiences.

Remixer — Real-time, on-device, connected UI tweaks

Refine aspects of your interface — from color palette to animation timing — right on your device. Make on-the-fly adjustments to your iOS, Android, and web interfaces, and even change values across multiple devices.

There are various components of Material Design for integration with Android Apps including:

The material theme — This offers a new style of display for Android apps.

List and card support — There are two widgets which support list of Material Design and card formats which include all styles and animations. The list widget is RecyclerView and the card widget is CardView.

Material Design also added a change to the way shadows are displayed and they now have (in addition to the old x & y components) a z component. It shows the elevation of view and affects:

  • High z values lead to big shadows and low z values to small ones
  • High z values also determine that the component will appear in other views in the mix

Material Design supports Animations via APIs that allow the developer to build bespoke animations for touch feedback in the UI. As well as It changes in view states and activity transitions.

There is also a JavaScript implementation of Material Design.It is called as Angular Design.

THE TAKEAWAY

Material Design is a key approach to the Android Platform for both UI and UX.

In Conclusion, The design principles involved are intended to reflect the need for a high-quality touch experience and offer a “pen and paper” style feel to the UI.


Originally published at 10feed.com on May 14, 2017.