Design for Screen: Google Design

To gain a greater understanding of design for screen I've looked at the principles followed by google when designing elements to work across multiple platforms on screen.

Material Design:

•  Principles:
• Material design takes print-based components such as grid systems, typography, colour, scale etc to create a immersive user experience, creating consistency across platforms.

• Typography: 
• Roboto is the standardised font used by google for Android. 
• Roboto has be refined to work across a wider range of platforms, its slightly wider and rounder giving it greater clarity.  
• Noto is used for all languages on Chrome and those no covered by Roboto on Android. 
• The use of a single consistant font across all aspect of a platform allows for consistency for the user aiding user experience.
• Layout:
• Mobile structure, Figure 1:
• permanent app bar and floating action button allows the user to easily navigate the sight and the two constants provide a prompt as to where to access different parts of the site.
• an additional bottom bar can be added to aid functionality
• side navigational menus overly other structural elements 
• Tablet structure, Figure 2:
• similar structure to the mobile structure with the permanent app bar and action button however there is an additional right navigation menu that can be temporarily accessed or pinned for permanent use 
• Desktop Structure, Figure 3:
• Similarly to the mobile and tablet structure, theres a permanent app bar and action button which absorbs aspects from the mobile and tablet bottom bar in order to aid functionality.
• Side navigational bars fill the length of the screen size and be accessed permanently or temporarily 
• both side bars and content canvas can have secondary tool bars for tabs, palettes and secondary actions 
• UI Regions, define a primary horizontal or vertical dividers:
• avoid using too many regions, use white space to define secondary areas
• Accessibility:
• Clear:
• visual element  
• sufficient contrast and size 
• clear hierarchy
• make key information recognisable at a glance 
• Robust 
• navigate, give users confidence when using app or website
• understand the importance tasks, reinforce important information trough visual cues
• Specific 
• assistive technology, make sure app is visible across multiple platforms e.g; on both chrome and android 

Figure 1

Figure 2

Figure 3