Category Archives: In-Class

Combining Affordances and Interface Design Principles for Mobile Screens

Google’s “Material Design” System for (Mainly) Mobile (Android) Device Screens

https://material.io/

[Wikipedia background: https://en.wikipedia.org/wiki/Material_Design]

Earlier explanation of the design principles from Google Material:

Principles

Material design is guided by print-based design elements – such as typography, grids, space, scale, color, and imagery – to create hierarchy, meaning, and focus that immerse the user in the experience. Material design adopts tools from the field of print design, like baseline grids and structural templates, encouraging consistency across environments by repeating visual elements, structural grids, and spacing across platforms and screen sizes. These layouts scale to fit any screen size, which simplifies the process of creating scalable apps.

How paper works

In material design, the physical properties of paper are translated to the screen. The background of an application resembles the flat, opaque texture of a sheet of paper, and an application’s behavior mimics paper’s ability to be re-sized, shuffled, and bound together in multiple sheets.

The surfaces that comprise applications are referred to in this spec as material, or sheets of material.

Elements outside of applications, such as system bars, are separate from the app content beneath them, and are not treated as material.

https://www.google.com/design/spec/layout/principles.html

A little deeper behind the design of Web and App Interface & Interaction Design

The Polymer Project: https://www.polymer-project.org/

[JavaScript libraries of re-useable code for creating all the user-facing presentation and access to interactive features in a platform]