Material Design 1.0 vs 2.0 What’s The Difference: Design Principles to Remember
Material Design is Google’s way of presenting beautiful User Interface in their apps and sites. And it’s Version 2 has been out. We discuss all changes and design principles to remember when one designs a website or app. It is a metaphor for the physical world around us. Basically what Material Design suggests is to make everything as if it exists and works in real life. For eg. Google gives shadows to all objects in manner that it seems that objects exist in real life, and there is some light coming from the top left of screen. #MaterialDesign makes beautiful animations in manners as if they happen in real, if you click a toggle, it moves as if it would move in reality. Material Design is Google’s way of presenting beautiful User Interface in their apps and sites. It is a metaphor for the physical world around us. Basically what Material Design suggests is to make everything as if it exists and works in real life. For eg. Google gives shadows to all objects in manner that it seems that objects exist in real life, and there is some light coming from the top left of screen. #MaterialDesign makes beautiful animations in manners as if they happen in real, if you click a toggle, it moves as if it would move in reality. Google does it in all it’s all formats. On #websites and on #apps Google follows it pretty amazingly. Though the Material Design does not necessarily mean all internet based services. You can use it even on thumbnails of videos, or may be power point presentations, they just looks great.
Material Design 2.0
Material Design has now a newer version, known as Version 2.0 The version is not much different in terms of aesthetics and styles, but the design basically focuses on the fact that background is lighter than the foreground. Google recently release Chrome 69 with the new Material Design and it is visible their. These improvements make it look much more interesting and appealing. Now the newer version has some changes, the edges are rounded, every button and every container that you would see would have rounder edges. The box shadows have been reduced. Rather than box shadows, which are used to distinguish between boxes they use borders only, this is probably done to give feeling of harsher studio lighting. Material design also brings with itself newer color full icons, and a radical shift in color scheme, earlier material design had a darker background and a lighter foreground container, The background color is white which is #ffffff, any boxes or cards existing in foreground are now having more rounded edges and have a comparatively darker shade in them. Google uses slightly blue shade with the hexadecimal for the color being #f1f3f4 The following screenshot from settings of Pixel 3, running Android Pie, gives a glimpse of the all the features is a single image Now to better make you understand the Material Design and tell the differences between a good design and bad deign we would be showing you many examples. Good Design and Bad Design. We would be comparing some sites based over there bad design, with ours. The idea is not to ridicule it. We know that it is a really good site that we would be comparing, in terms of there content, but we want to help all those who have great content and bad design is bringing them down. First example is:
In the above screenshot there is zero things wrong, the content is on point the font size is also just about right, but the problem is that it is not visually appealing, the design is too simple and just straight forward. As stated in the White Space Design By Themeisle, we need to understand how to utilize empty space with graphics and other “extra stuff” to make it look visually appealing. Material Design should always be boxed in containers. Now have a look at the below screenshot. Ya this from the homepage of this very site that is Milyin. The text in both the screenshots is roughly the same in word count. but still the lower one looks more appealing, it is surrounded by a container, background is lighter than foreground. It has some shape divider at bottom, and in order to insure that it doesn’t feel like too much there is a breathing space at the top. Which is some empty white space, to ensure that the page does not look crowded
When you have to present a section, it should feel like section, each and every section should be distinct, and in each section elements should try to utilize full space. The below screenshot is from a blog page of a TaskDream. This has a list of few blog posts. Here each post should be a distinct section. But as the image width is lesser than width of title, it takes a second to understand that they are a single section. It won’t seem big, and most of the people would understand, but it is 2019, people are moving onto Material Design 2.0 but most of the sites still don’t remember basic concepts. It is a metaphor for the physical world around us. Basically what Material Design suggests is to make everything as if it exists and works in real life. Consider a book shelf, each book has to be distinct, no to covers blend into each other, or are indistinguishable. In same way each post is a book and the cover of no 2 books should blend in. While this is true, the books should be similar also. Each book should have some basic similarities, like a title in front, about the author and summary in back. See the below screenshot, with the help of color difference in background and container’s color a visual maker is created, further the second post has image aligned to the right while first has it to the left, creating more distinction, but they are similar also, the images are of same width, the container has the same color, and the headings are of same size, the images have rounded borders, coinciding with containers, thus making one feel that the image belongs to the container itself. That’s it we have given you the basic idea, to make everything as it would look in real world, infact better than real world, because human’s make errors but machines don’t. Make everything is it shall look in real world.