15 min. novice guide - Application of Google's Material Design in React using "Material-UI" Components

(In development)

What is Google's Material Design & Material-UI?

Google has introduced a unified system called Material Design integrating UI components that apply Material design guidelines, for web application and mobile application. Material-UI is the implementation of Material design components in React, made possible by engineers at Call-Em-All (github link: https://github.com/mui-org/material-ui).

Rationale of this guide

This guide serves as a sharing in personal experience in making practical and effective use of Google Material/Material-UI components in designing the user interface of application, particularly in web application that will be useful for novice in Goggle Material/Material-UI.

I personally find the Material Design Guidelines by Google is very comprehensive for beginners in application UI design decisions, particularly on the illustration of "do's and dont's".

To visualise how these components are utilised in application, Components Documentation by Material-UI really opens your mind to the possibilites of the components design.

Due to the variety of components, I find it diffcult to make UI design decisions, particularly which components should be used at which section of the page layout. Thus, I hope this guidelines might help you in the UI design decisions.

How do I benefit from this guide?

• Understand the typical examples of most of the Material components.

You are highly recommended to explore Material Design Guidelines by Google and Components Documentation by Material-UI as this guide offers supplementary information about Material-UI components applications.

• The components are categorised into three classes based on their applications in UI design.
• Some of the basic components are not being mentioned (eg: text field, select field) in depth in this guide.

List of Material Design Components

This created infographic displays most of the material design components for illustration: View Me

• Elemental Components

  • [Avatar]
  • [Badge]
  • [Button]
    • [Flat Button]
    • [Raised Button]
    • [Floating Action Button]
    • [Icon Button]
  • [Chip]
  • [Progress]
    • [Circular Progress]
    • [Linear Progress]
    • [Refresh Indicator]
  • [Select Field]
  • [Slider]
  • [Switches]
    • [Checkbox]
    • [Radio Button]
    • [Toggle]

• Layout Components

  • [Bottom Navigation]
  • [Card]
  • [Dialog]
  • [Drawer]
  • [Grid List]
  • [List]
  • [Menu]
  • [Icon Menu]
  • [Popover]
  • [Snackbar]
  • [Stepper]
  • [Table]
  • [Tabs]
  • [Text Field]
  • [Toolbar]

• Utility Components

  • [Auto Complete]
  • [Date Picker]
  • [Divider]
  • [SVG Icon]
  • [Paper]
  • [Subheader]
  • [Time Picker]

Copyright disclaimer

The resources are obtained from Material-UI for learning purpose. No copyright infringement intended.