Mar 05, 2019
- 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?
- 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
- Bottom-Navigation Bar: It makes easier to switch between the top level views app in a single tap
- Bottom-Sheets: They slide up from the bottom to reveal more content
- 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.
- Cards: It is like an entry point for more information.
- Chips: Chips contain complex things in small blocks
- Dialogs: Dialogs contains specific information about the single or multiple task to be performed. Alerts , simple Dialog , simple menus are dialog types.
- Dividers: It is vertical rule which groups the content in page-layout or list.
- Expansion Panels: It allows edit the content. It can be either standalone or can combine with card.
- 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.
- Menus: They emerge from buttons which is used to choose the action or option
- Progress and Activity: It is a visual indication when the app is loading the content
- Sliders: They allow to select the value from the range of values by moving the slider thumb.
- 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.
- Tabs: They allow to switch between different views
- 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.
- 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
- Material design provides clear guidance for developing apps android , web and ios
- If you want to have animation in your site , Material provides many in-built things to make your life easier.
- Material design provides the clear guidelines for developing the app , so necessity of guess-work is not there.