diskusi.tech (beta) Community

loading...

Here's the thing you should know about Material Design

andhikayusup profile image andhikayusup Updated on ・3 min read

Working with people means working with many different creative process. Each person has their own preferred design style and . Therefore, there is a need to standardize a design style called Design Guideline.

One of the well-known design guideline is Material Design. This guideline created by Google to help compose an excellent UX for Android, Web, and many other.

Why Material Design

Google has curated their experience and knowledge into this guideline. Therefore, by using this guidelines we can save a lot of time because we don't have to worry about visual languages and avoid common design pitfall. This design guideline has been consistent to be used by Google product so that Google user can easily navigating in your apps.

Using this design guideline does not make your product not unique. On the contrary, using this design guideline help user reduce the cognitive load. Jacob's law stated that:

"Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know."

Basic Principle

Material is the metaphor

Material Design stated that "Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink."

Bold, graphic, intentional

Quoting from Material Design, "Material Design is guided by print design methods — typography, grids, space, scale, color, and imagery — to create hierarchy, meaning, and focus that immerse viewers in the experience."

Motion provides meaning

Material Design assert that the flow of components in the apps should be maintain focuses and continuity. This goals can be achieved by indirect feedback and coordinated transitoins

Elements

Display

Display

Card is a container to display content (both image and text) together. It should be easy to read and arrange in a way to shows hierarchy. Material design stated that cards should be identifiable as a single contained unit and standalone.

On the other hand, lists are collections of image or text continuously. Lists are common way to use to display data in a large number. Material design style should design this component as logical, easy to identify a specific item, and consistent

Navigation!

Navigation

Navigation drawers are container used to provide access to web/app functionalities and switch page without any hassle. This component should be identifiable, organized, and contextual.

Action

Action

A Floating button is a button which has the common functionalities in that page. It usually comes in the form of circle in the right end of a page/apps. Floating Action button should be a single primary button on that page that has constructive action (share, create, etc)

Input

Screenshot 2021-06-10 at 18-19-29 Figma

Text fields allow users to interact and communicate with server. They typically appear in forms or textbox. Material Design stated that text fields have to be discoverable, have a clear intention, and efficient.

Further Reading

Google has been collecting their experience and knowledge into Material Design. This guideline is free to use and you can access it here. This documentation provides further do's/don'ts and some useful tools. Thank You for reading!

Discussion

pic
Editor guide