Google's Material Design Thoughts (explained)

At the last I/O event in 2014, Google returned with a new surprise. In addition to officially releasing a new Android update codenamed Lollipop, Google also introduced a new design language: Material Design . This is a new Lollipop user interface improvement as well as a design system that targets a variety of devices and environments.

Material design has some major characteristics that distinguish it from other design trends in a unique way. Like its name, it takes inspiration from real-world materials and combines them into one design system to create the most sophisticated, intuitive, beautiful, and most interactive user experience. In this post, we’ll review what Material Design is and provide a simple guide on how to implement it. I’d like to quote Google’s blog and say, “This is Material Design.”

Introduction

Material Design is a unified design system, meaning it is made to work on all devices and platforms available today. From tablets and smartphones to desktops, Android, iOS, Windows to web platforms. All designs should look and feel the same everywhere.

main principles

There are three main principles upon which Material Design is built. These are the most basic parts of what materials typically offer.

• The material is a metaphor . The development of the material was inspired by the study of paper and ink , the tactile elements we use every day. This makes objects lighter, has brighter surfaces, and allows for better movement when interacting with them.

• Bold, graphic, and intentional . The use of typography, grids, spacing, scale, color, and images used in the fundamentals of print-based design enhance the content of your materials.

• Movement gives meaning . This is one of the most notable points. Materials require meaningful and appropriate motion, subtle and clear feedback, and efficient and consistent transitions.

component

Material Design pays attention to every detail of a component so that it can be used universally. These components help you build great apps and sites. There are many components provided by materials, such as buttons, switches, cards, text inputs, FABs (floating action buttons), dialogs, toasts, submenus, and tabs. Each has its own rules and guide on how to create them, and no unimportant elements are included.

About patterns

In addition to components, materials also provide basic patterns for additional UI. These patterns improve the UI you create using Material’s components. Includes patterns such as data formats, navigation drawers, errors, gestures, scrolling techniques, search, settings, image loading, swipe updates, and more.

material design colors

The colors of “Material” are designed so that they do not feel strange, strange, or flat. Inspired by everyday environments such as road signs, modern architecture, pavement marking tape, and sports courts, material design brings unexpected and vibrant color. With so many color palettes to choose from, app and site development becomes more convenient. You can also download color swatches for local use, such as in Photoshop collections.

material icon

If you’re an Android developer, you’re probably familiar with some of the free icon packs provided by Google. These are typically used only for main elements and action bars. For different resources, you will have to manually search for other icons such as folders, files, copy and paste, etc. Material Design fixed an issue with the large number of icon packs available to Google.

Each icon has a design approach that also leverages research into tactile materials. They also maintain material principles, which are consistent. These icons are available for download on GitHub and come with options for a variety of uses, including iOS, Web, Android, and SVG. If you want a wide range of options that are easy to customize, you should probably take a look at FlatIcon ‘s Material Design Icon Pack. Inside the pack you will find icon vectors (SVG and EPS), PSD and PNG versions.

Material animation

This is the feature I like most about this material. Material animation is very realistic and intuitive. All animations have meaningful, consistent, and well-timed transitions. The GIF demo shown below is just one example of beautiful material animation. To provide engaging and responsive interactions, the Google team also created water ripple-like animations for user input effects. Mainly used for buttons and cards.

These features I have described are just a few of what Material Design has to offer. To learn more about Material World, please visit our documentation page .

implementation

By default, Material Design comes as a new UI update for Android Lollipop. All guidelines of the material are applied within it. Materials are intended for all types of environments, so it is not difficult to implement them in another system. Thanks to the community, several community-made tools make it even easier.

These are some of the ways you can achieve Material Design outside of Android (e.g. on the web).

Using CSS frameworks

This is the easiest way to implement Material Design on your web platform. With a framework, you only need to initialize it and write the necessary elements. There are many frameworks you can use, such as Materialsize , Materials UI, and Polymer , to name a few. My personal choice falls on Materialize. It’s easy to use, easy to understand, and includes great documentation with great demos.

follow guidelines

If you want to implement Material without the help of a framework and tinker with the code the most, you should follow Material’s guidelines . It contains all the “do’s” and “don’ts” to be aware of in order to achieve material principles. Get all the essential guides to creating components, layouts, animations, colors, patterns, and more. To make development easier, you may want to refer to a checklist of materials .

conclusion

Material design is a great design system and one of the most anticipated trends of the year. We may be seeing it everywhere in the coming months. This new Google design update will improve even more apps and sites.

And with Material Design, Google has proven its dominance as one of the biggest technology companies. This gives Google a lead not only in search engines and mobile operating systems, but also in design. Right now, no other company is building something this big like Google. But from experience I can tell you that it doesn’t last long. Wait for other companies to adapt to Google’s Material Design.