hit tracker

Material Design in AngularJS

Home » Blog » UI » AngularJS » Material Design in AngularJS

What is Material Design?

Material Design is Google’s new vision for how software looks. Material Design is the brainchild of Matias Duarte, vice president of design at Google. Matias Duarte says the unifying metaphor behind Google’s new design direction, is to provide a unified set of physics and rules for how software should look and act.

Google states that their new design language is based on paper and ink. Material design create a visual language for users that synthesizes the classic principles of good design with the innovation and possibilty of technology and science.Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices and different screen sizes.It provides a new style for our app, system widgets that let us set their color palette, and default animations for touch feedback and activity transitions.

Material Design focuses on creating a logic for the virtual interface, while not exactly replicating the rules of physics in the real world.

Material Design combines two great philosophies which made out Windows Phone and iOS, to come up with a final original product. Just look at it, you can neither call it minimalistic, nor complex.
It is a design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.Seams and shadows provide meaning about what you can touch.”

Principles of Material Design

  1. Material is the metaphor : A material metaphor is the unifying theory of a rationalized space and a system of motion. Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic.
  2. Surfaces are intuitive and natural : Surfaces and edges provide visual cues that are grounded in our experience of reality. The use of familiar tactile attributes speaks to primal parts of our brains and helps us quickly understand affordances.
  3. Dimensionality affords interaction :  The fundamentals of light, surface, and movement are key to conveying how objects interact. Realistic lighting shows seams, divides space, and indicates moving parts.
  4. One adaptive design : A single underlying design system organizes interactions and space. Each device reflects a different view of the same underlying system. Each view is tailored to the size and interaction appropriate for that device. Colors, iconography, hierarchy, and spatial relationships remain constant.
  5. Content is bold, graphic, and intentional : Bold design creates hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create immersion and clarity.
  6. Color, surface, and iconography emphasize actions : User action is the essence of experience design. The primary actions are inflection points that transform the whole design. Their emphasis makes core functionality immediately apparent and provides waypoints for the user.
  7. Users initiate change : Changes in the interface derive their energy from user actions. Motion that cascades from touch respects and reinforces the user as the prime mover.
  8. Animation is choreographed on a shared stage : All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.
  9. Motion provides meaning : Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

What is Angular Material?Angular Material

The Angular Material project is an implementation of Material Design in system created by Google. It provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.

Angular Material depends on Angular and two angular modules: angular-animate (ngAnimate) and angular-aria (ngAria). ngAria provides accessibility support for assistive technologies, such as screen readers. It automatically sets aria attributes using the corresponding angular directives. For example, it sets the aria-hidden attribute according to the value of the ngShow attribute. Whereas ngAnimate module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via callback hooks.

Angular Material is more suitable for bigger projects with complex User Interfaces, as it supports more than 30 useful components such as AutoComplete, Button, CheckBox, Chips, List, Menu, Switch and so on.

Angular Material also offers a wide range of features when it comes to layouts. You can specify if a layout is horizontal (default) or vertical. This is done using flexbox. You can also specify child layout alignment, for example center center or space-between center. These are extremely helpful when building complex dashboards and advanced page layouts.

Theming Approach

Themes let usapply a consistent tone to an app. The theme specifies the darkness of the surfaces, level of shadow, and appropriate opacity of ink elements. To promote greater consistency between apps, light and dark themes are available to choose from.

Limit your selection of colors by choosing three color hues from the primary palette and one accent color from the secondary palette. The accent color may or may not need fallback options.

Angular Material exposes $mdThemingProvider in the config part of the bootstrapping process, which allows us to set 3 main color palettes: Primary, Accent and Warn. Primary and accent colors can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other. Warn defines default highlight colors/themes for warning, error or success.

Different Material Design Approaches


Material design is a constantly evolving designing system that is up-to-date with latest functionality and features. It is compatible with a broad range of design philosophies and practices. Classical methods of virtual designing along with the invention and excellence of modern science and technology blend harmoniously in this designing scheme made and released by Google to bring to your desk some of the wildest possibilities of virtual designing!
in AngularJS, UI by Selva Kumar Comments are off
About the author: Selva Kumar

Selva has over 7 years of experience in UI designing and development. He specializes in Web designing, UI Mock-ups & Interaction Design with the help of Adobe tools Photoshop, Illustrator & InDesign. He delivers front end-design assets including graphics, XAML, HTML, CSS, and JavaScript. Selva has completed his Bachelor’s in Computer Science and completed Google AdWords certification .