Material Design

Don’t get worried by reading the subject. This is not about any civil topic or interior design work. Material Design is a design concept introduced by Google which is prompting designers to rethink the web and mobile app UI. Here material is a metaphor. It is used to help you visualize web or mobile app as a physical object which has it’s own properties and responds to touch, zoom, pinch etc. Applications following material design present uniform behavior across various applications as well as various sizes of devices, thus giving uniform experience to the user.

Where can I see Material Design in action?

If you are on the android phone, it is everywhere in native apps (Android 5 onwards). When you use Chrome browser, check out settings and you will see it there.  If you click on a text field, the placeholder quickly moves to top left. If you click on a tab, the bottom border of the tab is highlighted. The buttons have a shadow effect giving a feeling of depth. All such things are based on Material Design principles.

Material Design

So what are the principles, this is based upon?

  • Each component occupies its own layer as if two physical objects are kept one on top of the other. They will not merge with each other, nor will the pass through each other. In simple terms – they appear as 3D objects.
  • Visual effect on one component will not follow through on other objects.
  • Some components would react to action (like touch, swipe, zoom etc) faster than others.
  • Every user interaction with the screen gives instant feedback to the user in terms action happened.
  • Components are aware of their surroundings. E.g. Upon touching a button, it pushes out certain components to make the place for the input field.
Material Design
Material Design – Example screen – Source: https://material.io

Similar to Bootstrap, there are several components pre-built and available for use to the developers. Refer to this article which has excellent comparison between Bootstrap and Material Design

In addition to Google’s own documentation, there are some very comprehensive articles about this design, check reference section below.

Related Links

Related Words

Bootstrap, Mobile App, Web App, Design, CSS

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.