New material design patterns

Transcript

1. New material design patterns Soham Mondal
2. Soham Mondal - Founder at Triveous - Creator of Skyro - Organizer at Blrdroid soham@blrdroid.org 
 soham@triveous.com
 @s0h4m www.soham.cc
3. Agenda What is Material Design and philosophy
 Bold, graphic and intentional
 Motion 
 Elements
 Patterns
 What do you need to get started
 Practice
4. Goals of Material design - create a new visual language that takes the classic principles of good design and combines it with a) technology and b) science - create a platform that works across different devices
5. www.google.com/design - overall design guidelines, this is just a subset
 - all material design images/videos are attributed to the google material design guide (c) google
6. What is Material Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices.
7. 2004 MujiWanoSyokki-TeasetMug Masahiro-Mori cc by 3.0
8. A situation where an object’s sensory characteristics intuitively imply its functionality and use. For example, a knob affords twisting, and perhaps pushing
 A cord affords pulling. As a relation, an affordance exhibits the possibility of some action, and is not a property of either an organism or its environment alone. Affordance
9. What is Material Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Inspired by paper/ink
14. Cues Material: Paper, ink
 Movement: Physics, light, surface, movement
 Follow nature’s lead
18. Bold, graphic, intentional Use elements of print based design: typography, grid, space, scale, color, imagery to create hierarchy, meaning and focus All these elements should provide a waypoint to the user
26. Authentic motion Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system.
29. Motion - Use motion to express continuity in the environment
 - So motion is meaningful and appropriate to help the user focus
 - Give feedback so that the user knows that actions have happened
31. Elements Buttons
 Cards
 Dialogs
 Dividers
 Grids
 Lists
 Progress and Activity
 Snackbar
 Tabs
32. Elements <Code/>
33. <resources>      <!-­‐-­‐  inherit  from  the  material  theme  -­‐-­‐>      <style  name="AppTheme"  parent="android:Theme.Material">          <!-­‐-­‐  Main  theme  colors  -­‐-­‐>          <!-­‐-­‐      your  app  branding  color  for  the  app  bar  -­‐-­‐>          <item  name="android:colorPrimary">@color/primary</item>          <!-­‐-­‐      darker  variant  for  the  status  bar  and  contextual  app  bars  -­‐-­‐>          <item  name="android:colorPrimaryDark">@color/primary_dark</item>          <!-­‐-­‐      theme  UI  controls  like  checkboxes  and  text  fields  -­‐-­‐>          <item  name="android:colorAccent">@color/accent</item>      </style>   </resources> API 21+ (Also in support library)
35. Buttons
45. Flat button <Code/>
46. <Button          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="SHARE"          style="?android:attr/borderlessButtonStyle"   />   API 21+
49. Floating Action Button <Code/>
50. <com.getbase.floatingactionbutton.FloatingActionButton                  android:id="@+id/pink_icon"                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  fab:fab_icon="@drawable/ic_fab_star"                  fab:fab_colorNormal="@color/pink"                  fab:fab_colorPressed="@color/pink_pressed"                  android:layout_alignParentBottom="true"                  android:layout_centerHorizontal="true"                  android:layout_marginBottom="16dp"/>   FutureSimple: API 7+
51. <com.melnykov.fab.FloatingActionButton                  android:id="@+id/add"                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:layout_margin="16dp"                  android:src="@drawable/add"                  fab:fab_colorNormal="@color/white"                  fab:fab_colorPressed="@color/primary"                  fab:fab_colorRipple="@color/accent"                  android:layout_alignParentRight="true"                  android:layout_alignParentBottom="true"/> makovkastar: API 7+
52. Cards
58. CardView <Code/>
59. <!-­‐-­‐  A  CardView  that  contains  a  TextView  -­‐-­‐>          <android.support.v7.widget.CardView                  xmlns:card_view="http://schemas.android.com/apk/res-­‐auto"                  android:id="@+id/card_view"                  android:layout_gravity="center"                  android:layout_width="200dp"                  android:layout_height="200dp"                  card_view:cardCornerRadius="4dp">                      <TextView                          android:id="@+id/info_text"                          android:layout_width="match_parent"                          android:layout_height="match_parent"  />          </android.support.v7.widget.CardView> API 7+ (in support library)
60. dependencies { ... compile 'com.android.support:cardview-v7:21.0.+' } Dependency
62. Dialogs
64. Progress
71. Snackbar
73. Patterns Transitions
74. Navigational transitions
77. Resources - Material design icons: https://github.com/google/material-design-icons
 - Layout templates (illustrator) http://www.google.com/design/spec/ resources/layout-templates.html#layout-templates-tablet
 - Sticker sheets and icons: http://www.google.com/design/spec/ resources/sticker-sheets-icons.html# 
 - Google Design http://www.google.com/design/ 
 - Google IO 2014 Design talks
 - Roman Guy’s IO 2014 talk with code: http://goo.gl/B8kEbs
78. Q&A soham@blrdroid.org | soham@triveous.com @s0h4m www.soham.cc Source: http://www.google.com/design/