Inspiration behind Material design in the 2014 Google I/O app

Old Comments Off on Inspiration behind Material design in the 2014 Google I/O app 268

I saw a video on Material Design made my Google  developers, it was pretty interesting how they made a big transformation of from Kitkat version to

exciting new look on look android L   he as usual was talking about the the shadow configuration foe View objects ,how they made efficient changes

regarding it ;the layout as Grid  type for easy optimization  for all screen sizes.


Going into detail of it the blog/video  peaked my interest when he mention Gestalt principle . Me I  have never heard about Gestalt principles ,

everything started to make sense what he was talking about,I mean why the changes or iterations were so important and they made world of

difference in viewer comfort and efficiency


Here the explanation for changes using Gestalt principles:


                                                 First change:                          Surfaces and Shadows

1.before                                                                                  2.after

tabs0        tabs2

The problem these guys were facing is differentiating between chrome and content ,and visual distortion ,followed by 1 more change you get

the  second picture ,

The first problem was solved   by differentiating the chrome and content using

Gestalt  Similarity principle :

Similarity occurs when objects look similar to one another. People often perceive them as a group or pattern.


                                                  As you would have noticed in the second pic  the content panel is differentiated much more from its tool bar and less differentiated from itself

this verifying the change and removing visual distortion 

                                                      change_1 (2)    

Here again we see due  rule of Similarity  in the first release , due sudden change occurs which stresses the mind due to lack of differentiation

between the content and the tool bar and title bar.


The idea here to we see is the need for separation between the content and other objects,

Thus the concept of Similarity used wisely needs to be used wisely , and more discretely as have our Google developers  where these elements define themselves  discretely



Second change:                 Grids           


Instead of cards in lists , they have gone by grids to avoid clutter

According to Gestalt principle it is defined as:

                                                Proximity occurs when elements are placed close together. They tend to be perceived as a group. 


 The question is why grids not cards is because to avoid clutter , means cards are  bigger thus less gap can be accommodated with smaller  screen size  ;

thus it would less cluttered

   Third change:                Delightful details


 Yup the animation of view objects , this gif does not show it clearly , the tiny details as explained by the Google developer is the button seem to spins and

transforms into the check mark, other than the fact to show off

its based on Gestalt Principle named:


Continuation occurs when the eye is compelled to move through one object and continue to another object.



 Continuation occurs in the example above, because the viewer’s eye will naturally follow a line or curve. The smooth flowing crossbar of the “H” leads the eye directly to the maple


The reason behind the detailed animation is to guide the user to the function of view object ,the feel of actual change.  

Fourth   change:         Margins




  I quote :”While we’d already been accustomed to using a 4dp grid for vertical sizing (buttons and simple list items were 48dp, the standard action bar was56dp, etc.), guidance on


keylines was new in material design. Particularly, aligning titles and other textual items to keyline 2 (72dp on phones and 80dp on tablets) immediately instilled a clean, print-like


rhythm to our screens, and allowed for very fast scanning of information on a screen”




The Idea behind this is also to remove clutter .


According to Gestalt principle:        Closure occurs when an object is incomplete or a space is not completely enclosed. If enough of the shape is



indicated, people perceive the whole by filling in the missing information.


Although  above panda remains incomplete ,it is still seen as a complete panda ;So the excessive space  allotted by margins or key lines wont seem odd but looks more grand


Fifth change :Color


As you can see the contrast of pink from other colors as shown in the pic ,is used to call attention to key elements

based on Gestalt Principle:


When similarity occurs, an object can be emphasized if it is dissimilar to the others. This is called anomaly.




The figure on the far right becomes a focal point because it is dissimilar to the other shapes.Similar idea is used to show the contrast in color for important or key elements




Related Articles

Back to Top