The UI of Material Design/Importance of UI in Material design
A big part of making material design is the Physical world live. Google design lead of search Jon Wiley mentioned as “When you make things, you inherit thousands of years of experience. But, software design is just getting started”. This statement alone means that in making UI for material design they wanted to create something creative, amazing and astonishing.
Google team has introduced various features in material designs like, Animations, Layout, Typography, Color, Components, and Resources. Let’s get into details of each:
Animations – Different type of new animations are introduced in Lollipop like, Ripple effect, Reveal effect, etc.
Animations should contain,
Authentication: Object’s motion shows us whether it’s light or heavy, flexible or rigid, small or big, it is not only showing how the design can be beautiful but it also showing the meaning of relations, functionalities and intension of the system.
Meaningful Animation: Transition of the object from the state A to state B should have some meaningful guideline to move. It gives the effective and meaning full guideline to users for theirs attentions and focuses through multiple steps of process, avoid confusions and improve the beauty of the transition.
Interactive Animation: When interactive and logical transition happens it will get the attention of the user and give them satisfaction too. Transition should be meaningful, with purpose and not a random one.
Delightful Details: App should truly delight to the user when animation is used beyond the obvious. Like, a menu icon smoothly becomes a back arrow, when plus sign smoothly becomes cross icon.
Style – Different styles are provided by using,
Colors: Material design is using Primary color, Primary Dark color and Accent color as a tint color in the app for the other widgets with the background white color.
Icons: Icons are the visual representation of the product. Icons of the app are the vehicle for communicating your product. Shapes, grids, colors and shadows of the images represent the functionality of the app.
Images: Imagery is the way to represent your app other than decorating the app with the different objects. It’s the way to communicate and differentiate your app.
Fonts: Material has provided two types of font formats. One is Roboto and Noto, to support all the languages worldwide and second one is our regular style, i.e. Standard Styles, which we are using till date.
Layout – Layout shows the look and feel of the views.
The exact ways are defined to show the layouts to your applications by providing the exact pixels of margin, padding, spaces, where to put the components, etc.
Defined the relation of the widgets with each other having exact place on the screen and exact gaps among widgets.
Components – To give perfect UI android has introduced different components.
Designs and attributes are provided to the different components like, Button, Text Field, Card View, grid, List View etc. to gives the variant presentations for the material designing.
Represents Recycler View, Card View, Floating Action Button, Icons, Surface changes, Animations on different components and relation of components with each other.
Patterns – Different patterns are defined for material designs. Patterns applied for,
– Date format: Material design has provided a way to display dates and times in a consistent and user friendly way.
– Errors: With the material design now we can show the errors in a different ways based on the category of errors. User Input errors can be shown at the same field with the red marked sign. App errors are shown in a dialog box (With the theme of lollipop) and other Incompatible state errors can be shown over the toolbar or bottom bar using the help of animations.
– Gestures: Two types of gestures are classified here, one is Touch Mechanism, What your fingers do on screen and the second is, Touch Activity, specific result of the specific gesture in activity.
– Loading Images: By dividing the state of Opacity, Exposure and Saturation levels into 3 phases, you can load your images to the app, so the end user gets the effect like animation and loading of image doesn’t become a tedious task but makes user engaged to watch on it.
– Swipe to refresh: Data can be refreshed by two ways, Synced automatically and periodically and second way is manually by the end user. Swipe to refresh functionality used for Manual Syncing.
Usability – It shows the way of the usability of the product.
You need to think for the multiple criteria,
- Accessibility: Your product is accessible to wide variety of the users.
- Bidirectionality : Your product should be language free in the sense of UI.
The example showing some functionality of Material Design like, Card View, Recycler View, Floating Action Button, Shadow effect, Ripple Effect and Reveal Effect too.