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 180

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.

similarity01

                                                  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

                                                

surface2b

Second change:                 Grids           

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

      togglefab

 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_a

 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

leaf.

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

 

 

kl1

  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”

 

                                                      http://feeds.feedburner.com/blogspot/hsDu

 

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.

closure_a

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

colors

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.

 

 

anomaly01

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

 

 

Author

Related Articles

Back to Top