in amaterial world

+EmanueleDiSaverio@hazam

This talkwill give an overview of the principles of the new design system called Material Design, introduced by Google last May at the Google I/O conference

it will be an overview that focuses on the bits and pieces of MD, but also in the founding principles - well provide insight

what is material designA material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

La metafora materiale e la teoria unificata dello spazio razionalizzato, e di un sistema animato.Il materiale ha le sue radici nella realta' tattile, inspirata dallo studio di carta e inchiostro, ma sempre tecnologicamente avanzata e aperta allimmaginazione e alla magia.

???

subtext

what?

The speakerEmanuele Di SaverioPrincipal Design Technologist

Mobile Dev since 2007 (J2ME)Android Dev since 2009 (1.5)(wrote a book about it - its old now)

Working in a leading design firm since 2011http://www.frogdesign.com

Engineer.

WHAT I LEARNEDdesign is way too important to be left (only) to designers

I worked in a leading design firm for the past 3 years.Im actually an engineer.design is too important to be left (only) to designers

subtext

ITS A SYSTEM

First thing to understand is: Material Design is a design system, that is, a matrix of rules and principles that enables you to articulate your design, your brand, over multiple platforms

principlespatterns

its good to structure the talk in terms of principles and patterns:principles are the foundations of, general axioms or intuition that form the basispatterns are the opposite - proven solutions to follow acritically, created to serve the principles

up to 2.2heavy use of gradientsno patterns - fragmentationandroid is for geeks

holo - 3.0 ~ 4.1digital tron feelinglots of patterns describedstill for geeks

InfluencesiOS moving from skeuomorphic to flat translucent

holo - 3.0 ~ 4.1digital tron like feelinglots of patterns describedstill for geeksLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.

kitkat 4.4path to materiala comeback towards an emotional and engaging DESIGNrooted in reality that you can touch.

principlespatterns

as said were going to split the talk in principles and patterns, color coded

It all started with a woooAH!

what if a pixel could come out of the screen?

papeR

INK

its either paper or ink

Paper its your surface, ink is your contentThey follow different rules and have different constraints

LayoutCOLORS & Typemotion

from this very principles, the other rules span out affecting layout and structure of your appthe colors and the typography you useand motion (aka animations)

LayoutCOLORS & Typemotion

DEPTH & ElEVATION

paper pieces are physically positioned in the 3D spaceand they cast a shadow on the pieces that are below them

for example, in the google I/O page visualised, there are 4 paper sheets stacked in order of importance and prominence

whos on top?

this metaphor forces us to think in terms ofwhich paper is on top of which?establishing a hierarchy of paper sheets in our design

TOOLBAR

aka R.i.P. Actionbar

used as a live and fully interactive UI widgetyou can embed and use it like a widget (no more window decor).

Less functionality, more flexibility.Its a piece of paper like everything else

navigation

drawer goes on topdropdown to navigate is deprecated

the navigation drawer also is a sheet of paper.Then a question: where does it sit?if youre using the drawer as main navigation, than it should be on top of everything

While previous patterns also allowed main navigation to be in a drop-down menu in AB, this is now deprecated: dropdown menu should be secondary navigation like filters on a list

CARDS

natural solutionscales well

appcompat-v7:CardViewMariottisCardsLib

a very simple and elegant interpretation are CARDS.These are by definition paper sheets, and cast shadows - they are also key to cluster information of different types together.

they are also extremely scalable solution - you can tile same card differently in desktop and mobile, or stretch current cards. All Google Play store apps use cards, and Google Now

baseline grids

components => N * 8dpink => N * 4dp

respecting general alignment principles like baseline grids is needed to instill INTENT in your layouts

is this at same level? yes / noyou should spot hierarchy in a layout without needing to read content

Keylines

consistent Hierarchical spacing

keylines implement these principles providing a clear guidance that users cannot get wrong - margin, cue, content.help arrange the ink printed on the various sheets of paper. These can be used across each surface to help control space and aid comprehension. They help bring order to the chaos!

LayoutCOLORS & Typemotion

this concludes the layout section. Material also distinguish itself by the use of colors and type

brand & structure

use color and type to communicate, not to decorateColor juxtaposition and type take part in laying out and guiding user action

Typography becomes a key driver to convey structure, that is, hierarchy.

Brand should be communicated in a more subtle way, using color choice and type.This means NO MORE LOGO ICONS on the top bar

Lets examine this Popup from L: buttons are just text, with color and type choice we communicate that they are actionable

primary and accent

appcompat-v7:Palette.java

[N] In material design, a common color palette for apps involves a single primary and single accent color. The primary color is generally used in larger areas like the action bar, with a darker variant coloring the system status bar. The accent color, which is normally really bright, is used in smaller areas, such as form controls, buttons, and tab indicator strips. The accent color is intentionally bold and bright to direct the users attention to key elements (such as the circular floating action button).

font styles

consistent non-linear progressionfont progression ratio can be difficultto get right - in case of doubt, useprovided styles for text

appcompat-v7:styles.xml

we wont touch the topic of how to choose a typeface to match your brand because its a wide topic and I still didnt finish studying it, but styles for the text should again be used to convey structure

Progression of font sizes should follow a non linear scale (some will mention you the golden ratio here) - also bigger fonts can be lighter, and a small font can capture attention is used all-caps.

All these principles are nicely packaged for you using styles from Android compete library

LayoutCOLORS & Typemotion

Next, and maybe more prominent section of MD is about motion, AKA animations. Thats what general crowd gets excited about!

why animations?

Animations play an important role in the UX of an app.They can concretely be used to:

provide spatial cues for navigationkeep user engaged: experience is a continuumestablish a bond with the userprovide positive reinforcement an delight

But animations need to be used wisely to avoid becoming just an ornamental thing.

rules for animations

theres no such thing as instant accelerationtheres no such thing as Linear trajectories

There are some rules in animation design, the most famous set is derived from Disney 12 Rules

rules for animations

theres no such thing as instant accelerationtheres no such thing as Linear trajectories

SlideShare:Design in Motion

PathInterpolator

There are some rules in animation design, the most famous set is derived from Disney 12 Rules

MACRO-animations

activity HERO ELEMENT

ActivityOptions.makeSceneTransitionAnimation

to provide context and cute to the user, MD suggests hero element transition - that is, showing the user that UX is a continuous flow from screen to screen.

We like to have activities as separate screens, its good architecture! But our brain does not work that way, it works in tasks

Micro-animations

path DRAwables

VectorDrawable & Animator

A funnier implementation are micro animation, AKA animations on icon and drawables.

These provide mainly delight and feedback to the user on the action just done - all under 300 ms

touch feedback

ripples & elevationpaper captures the energy of the touchand reacts to it.

you need to combine point-focused touchfeedback with a touch target-widereaction.

StateListAnimator

Another way MD uses animations is to communicate action feedback - elements change elevation when touched, telling the user Im ready and to stand out in the paper hierarchy.

A people favourite is the ripple effect.

touch feedback

RADIAL PROPAGATIONripples can extend outside Views bound if they affect other widgets, or reveal a completed new screen or portion of screen (Circular Reveal).

They honor the principles of radial propagation of energy.RippleDrawable and CircularReveal not expected on earlier versions

(can be backported)

The ripple effect can also extend radially outside the view bounds, to affect nearby views on the screen.

All this reinforces the energy principle: paper captures energy from your finger, and energy spreads radially

subtext

ITS A SYSTEM

Last point - as we said, MD is a system that scaled across touchpoint its designed to scale.

After all this talking about work to do, functionality to implement animations - lets finish on something that actually can make your life easier :)

MD has much less accent of different design for different screens - you should have a unified experience.A bigger screen should grant you a more pleasant experience, over the same content.No more cramming fragments in a screen to fit more content!

THANK YOU!

+EmanueleDiSaverio@hazamQ&Aback & uP?recyclerview?FAB?More PAPER?CIRCULAR REVEAL?