Material Design

Segun Famisa, Software Developer at KongaPay discussed about Material Design at the second forLoop event in Lagos.

Transcript

1. Material Design Segun Famisa forLoop #2 June 18, 2016
2. Introduction Hey there, I’m Segun Famisa, but you can call me SF. Previously, Android dev at Truppr. Currently, Software Engineer at Konga, working on KongaPay. Struggling French student, and I practise Karate in my spare time. segunfamisa
3. Diving into material design
4. What exactly is Material design? “Material design is a design language that synthesizes the classic principles of good design with the innovation and possibility of technology and science.” This is material design. Material design is not a library, neither is it your fab. Introduced in Google I/O 2014, as part of Android Lollipop. Material design is platform agnostic.
5. Core principles of material design
6. Core principles of material design Tangible surfaces with tactile reality. Inspired by paper & ink. Print-based design – typography, grids, space, scale, color, and use of imagery – guide visual treatments Meaningful motion
7. Tangible surfaces The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
8. Typography Roboto is the standard typeface on Android. Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto. Text Styles for material design
9. Keylines and Margins Screen edge left and right margins: 16dp Content associated with an icon or avatar left margin: 72dp Horizontal margins on mobile: 16dp Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge
10. Meaningful motion Material elements are unified by their speed, responsiveness, and intention. What makes a good transition? • Motion is quick • Motion is clear • Motion is cohesive
11. Other Components Fab Cards Tabs Bottom Bar Bottom sheet
12. And more? Check out http://www.google.com/design/spec/components
13. State of material design
14. State of material design As at May, 2016 there are over 1,000,000 material design apps on the Google Play store.
15. State of material design Developer support Growing developer support • AppCompat library for android. • Android Design library. • 3rd party open source libraries. https://android-arsenal.com/search?q=material The more apps are updated to material design, the better experience users will have with a clean & uniform UI. And..the more out-of-place your non-material apps are
16. Showcase Material design showcase g.co/materialshowcase
17. What’s new in material design?
18. What’s new in material design? • Timely • Glanceable • Easy to tap • Time-saving Material design for Wearables!
19. What’s new in material design? Material design for Wearables Android Wear is designed around the core actions of suggest and demand. Provide the right information at the right time Keep interfaces uncluttered and easy to read. Organize information using a clear information hierarchy. Timely Glanceable Easy to tap Ensure tap targets are well-spaced and easy to tap Avoid creating complex experiences that rely on multiple steps to get a task done. Time saving
20. What’s new in material design? Growth & Communications Best practices and components to help users quickly & intuitively understand what they can do with your app. • Onboarding • Feature discovery • Gesture education
21. What’s new in material design? Onboarding
22. What’s new in material design? Onboarding Self-select Quick start Top user benefit
23. What’s new in material design? Feature discovery • Color • Tap-targets • Guided mode
24. What’s new in material design? Gesture detection Mimic the movement of the real UI. The gesture indicator should pause then disappear once a tap gesture is detected. The gesture being taught should be the only way to dismiss the sandbox UI. For example, only a left or right swipe will dismiss a card describing a swipe gesture.
25. How?
26. How? The Design Support Library • compile 'com.android.support:design:23.4.0' • Widgets: ◦ android.support.design.widget.NavigationView ◦ android.support.v4.widget.DrawerLayout ◦ android.support.design.widget.CoordinatorLayout ◦ android.support.design.widget.CollapsingToolbarLayout ◦ android.support.design.widget.Snackbar ◦ android.support.design.widget.FloatingActionButton ◦ android.support.design.widget.AppBarLayout • Other libraries: ◦ CardView ◦ RecyclerView ◦ Palette
27. How? Tangible surfaces Cards <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" <!-- card content --> </android.support.v7.widget.CardView> Elevation gives shadows <ImageView android:layout_width="match_parent" android:layout_height="@dimen/height_description_icon" android:elevation="2dp" ... />
28. How? Print-based design Typography Using support library typography text appearances: @style/TextAppearance.AppCompat.Subhead Dynamic colors: Palette.
29. How? Meaningful motion Ripples <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/ripple_light"> <item> ... </item> </ripple>
30. How? Meaningful motion StateListAnimator- Items respond to touch <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:state_pressed="true"> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="@dimen/touch_raise" android:valueType="floatType" /> </item> <item> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="0dp" android:valueType="floatType" /> </item> </selector>
31. How? Meaningful motion Activity/Fragment transitions ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, // The view which starts the transition view, //The transitionName of the view we’re transitioning to getString(R.string.transition_item_image) ); ActivityCompat.startActivity( MainActivity.this, intent, options.toBundle());
32. Tools & resources
33. Tools & resources Web Polymer https://www.polymer-project.org/1.0/ Material design lite https://getmdl.io/
34. Tools & resources Android • AppCompat library for android. • Design library. • 3rd party open source libraries. https://android-arsenal.com/search?q=material
35. Tools & resources Developer options: Show Layout Bounds App: Keyline Pushing App: Material Cue
36. Tools & resources • Plaid app (Great material design demo app from Nick Butcher) https://github.com/nickbutcher/plaid • Material Colors for Mac. https://github.com/romannurik/MaterialColorsApp • Sketch • Photoshop :) • https://materialup.com • www.materialpalette.com
37. References 1. Material design guidelines https://www.google.com/design/spec/material-design/introduction.html 2. Google Design https://design.google.com 3. Google Design on Medium https://medium.com/google-design
38. Questions?
39. Go forth and be material! @segunfamisa segunfamisa.com