To recap, Google Polymer is an open source JavaScript library composed of web components that is used for building web applications seamlessly. This Polymer library is available on GitHub. The Polymer user interface framework supports custom elements, shadow DOM, HTML imports and templates and modern design principles. In this short post, I would like to write a bit about material design.
Material Design is a design language by Google released on 25 June, 2014 at the Google I/O conference. "Expanding upon the "card" motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows." Sourced from Wikipedia. This design language was used to build Gmail, YouTube, Google Drive, Google Docs, Google Maps etc.
From the Google's Material Design website;
"Material design is guided by print-based design elements – such as typography, grids, space, scale, color, and imagery – to create hierarchy, meaning, and focus that immerse the user in the experience."
Material Design has four design principles:
In a nutshell, Material Design unifies visual, motion, and interaction design across different types of devices. It's modeled after tactile materials like paper and ink with fluid animation and lighting. Polymer brings these paper elements to life on the web. So the Google Design team came up with an unified approach to building consistent user interface across different web based devices.
Over and out
Material Design has four design principles:
- Tactile Surface
- Publishing Design
- Meaningful Animations
- Adaptive Design
- Tactile surface represents the layers of "digital paper". These layers are arranged at varying heights to simulate depth and cast shadows on each other. This is analogous to stacked papers.
- Publishing Design represents "digital ink" that is the use of fonts and typography, colours and photos for example.
- Meaningful animation represents how controls on a web page interact with the user for example.
- Adaptive design is a method that allows designs to represent consistently across different web based devices with different resolution and screen sizes.
Wireframes are useful to help organise space and padding for different screens of devices. More information can be found at https://material.google.com/resources/layout-templates.html#layout-templates-whiteframes
In a nutshell, Material Design unifies visual, motion, and interaction design across different types of devices. It's modeled after tactile materials like paper and ink with fluid animation and lighting. Polymer brings these paper elements to life on the web. So the Google Design team came up with an unified approach to building consistent user interface across different web based devices.
Over and out
Deaf Dave.
References
References
- https://elements.polymer-project.org/guides/responsive-material-design-layouts
- https://material.google.com/
- https://en.wikipedia.org/wiki/Material_Design
- https://www.smashingmagazine.com/2015/10/responsive-material-design-app-with-polymer-starter-kit/
- https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/
No comments:
Post a Comment