Material Design

Material Design

• What is Material Design?
• Why Material Design?
• Material Design principles
• Material Design Animation
• Material design components
• Material theme editor

What is Material?

Material is an adaptable design system - backend by open source code - that helps teams easily build high quality digital experiences

Why Material Design?

1. Material is for designers and developers

            Material Theming provides the consistency and best practices of the Material Design system, expanded for systematic brand expression-from design code

      2.   Material is cross platform framework

             Customizable open-source Material Components help you build across Android, iOS, Web, and Flutter with precision and ease

      3.  Material saves you time

            Material  Theming will be integrated into every facet of Material’s ever-expanding system, making it even easier for you to build beautiful product faster

           

Material Design Animation

    Animation is the one of the best-part of the material design. The animation makes the material more real and intuitive. Every animation has a meaningful, consistent and right timing transitions.

Material Design Components

  All the elements in Material Design are detailed definition. Definitely, it is hard to imagine something that is not there.

Here are some of the components that are present in the material design

1. Bottom-Navigation Bar: It makes easier to switch between the top level views app in a single tap
2. Bottom-Sheets: They slide up from the bottom to reveal more content
3. Buttons: Buttons communicate the action that will occur after the user touches it. There are two sets of buttons in material Design, one is flat and other is raised buttons.
4. Cards: It is like an entry point for more information.
5. Chips: Chips contain complex things in small blocks
6. Dialogs: Dialogs contains specific information about the single or multiple task to be performed. Alerts , simple Dialog , simple menus are dialog types.
7. Dividers: It is vertical rule which groups the content in page-layout or list.
8. Expansion Panels: It allows edit the content. It can be either standalone or can combine with card.
9. List: List are made of the continuous columns of each rows. Each row contain the tile and primary action are filled in the tile and supplemental actions are represented with image or text.
10. Menus: They emerge from buttons which is used to choose the action or option
11. Progress and Activity: It is a visual indication when the app is loading the content
12. Sliders: They allow to select the value from the range of values by moving the slider thumb.
13. Snack bars and Toast: They provide the feedback in the form of the message after the execution of operation. It can be either success or failure feedback.
14. Tabs: They allow to switch between different views
15. Tooltips: Tooltips are text-labels that appear when the user hovers over the particular elements.

Material Design Principles

  Material as a metaphor

•  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.

   Meaningful motion

• Motion focuses attention and maintains continuity, through subtle feedback and coherent transitions. As elements appear on screen, they transform and reorganize the environment, with interactions generating new transformations.

   Bold, graphic & intentional

•  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.

Material Theme Editor

     Create and customize your Material theme - the Material Theme Editor helps you make your own branded symbol library and apply global style changes to color, shape, and typography.

Pros of Material Design

1. Material design provides clear guidance for developing apps android , web and ios
2. If you want to have animation in your site , Material provides many in-built things to make your life easier.
3. Material design provides the clear guidelines for developing the app , so necessity of guess-work is not there.

---