Slide 1

Slide 1 text

Material Design Segun Famisa forLoop #2 June 18, 2016

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Diving into material design

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

Core principles of material design

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Other Components Fab Cards Tabs Bottom Bar Bottom sheet

Slide 12

Slide 12 text

And more? Check out http://www.google.com/design/spec/components

Slide 13

Slide 13 text

State of material design

Slide 14

Slide 14 text

State of material design As at May, 2016 there are over 1,000,000 material design apps on the Google Play store.

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Showcase Material design showcase g.co/materialshowcase

Slide 17

Slide 17 text

What’s new in material design?

Slide 18

Slide 18 text

What’s new in material design? ● Timely ● Glanceable ● Easy to tap ● Time-saving Material design for Wearables!

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

What’s new in material design? Onboarding

Slide 22

Slide 22 text

What’s new in material design? Onboarding Self-select Quick start Top user benefit

Slide 23

Slide 23 text

What’s new in material design? Feature discovery ● Color ● Tap-targets ● Guided mode

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

How?

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

How? Tangible surfaces Cards Elevation gives shadows

Slide 28

Slide 28 text

How? Print-based design Typography Using support library typography text appearances: @style/TextAppearance.AppCompat.Subhead Dynamic colors: Palette.

Slide 29

Slide 29 text

How? Meaningful motion Ripples ...

Slide 30

Slide 30 text

How? Meaningful motion StateListAnimator- Items respond to touch

Slide 31

Slide 31 text

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());

Slide 32

Slide 32 text

Tools & resources

Slide 33

Slide 33 text

Tools & resources Web Polymer https://www.polymer-project.org/1.0/ Material design lite https://getmdl.io/

Slide 34

Slide 34 text

Tools & resources Android ● AppCompat library for android. ● Design library. ● 3rd party open source libraries. https://android-arsenal.com/search?q=material

Slide 35

Slide 35 text

Tools & resources Developer options: Show Layout Bounds App: Keyline Pushing App: Material Cue

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Questions?

Slide 39

Slide 39 text

Go forth and be material! @segunfamisa segunfamisa.com