Download to read offline
Uploaded byEmanuele Di Saverio
In a Material world
The document presents an overview of Google's Material Design system, which emphasizes a tactile and imaginative approach to design through principles of motion, layout, and color. Emanuele Di Saverio, the speaker, underscores the importance of design in technology and the evolution of Android's interface from geek-centric to more universally appealing. Key elements discussed include animations, typography, and user interaction, all aimed at creating an engaging and cohesive user experience.
More Related Content
Similar to In a Material world
![Whymca Dive into Android [ITA]](https://cdn.slidesharecdn.com/ss_thumbnails/diveintoandroidwhymca10-100522043859-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Dive Into Android [ITA] - Long](https://cdn.slidesharecdn.com/ss_thumbnails/diveintoandroid2-101101035219-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
In a Material world
- 1. IN A MATERIAL WORLD +EmanueleDiSaverio @hazam
- 2. THIS TALK willgive an overview of the principles of the new design system called Material Design, introduced by Google last May at the Google I/O conference
- 3. WHAT IS MATERIALDESIGN “A 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.”
- 4. ??? 4 SUBTEXT <description>
- 5. 5 THE SPEAKER Emanuele Di Saverio Principal Design Technologist Mobile Dev since 2007 (J2ME) Android Dev since 2009 (1.5) (wrote a book about it - it’s old now) Working in a leading design firm since 2011 http://www.frogdesign.com Engineer. WHAT I LEARNED design is way too important to be left (only) to designers
- 6. SUBTEXT <description> 6 IT’S A SYSTEM
- 7.
- 8. 8 UP TO2.2 HEAVY USE OF GRADIENTS NO PATTERNS - FRAGMENTATION “ANDROID IS FOR GEEKS”
- 9. 9 HOLO -3.0 ~ 4.1 DIGITAL TRON FEELING LOTS OF PATTERNS DESCRIBED STILL FOR GEEKS
- 10. 10 INFLUENCES IOSMOVING FROM SKEUOMORPHIC TO FLAT TRANSLUCENT
- 11. 11 HOLO -3.0 ~ 4.1 <DIGITAL SUBTEXT> TRON LIKE FEELING LOTS OF PATTERNS DESCRIBED STILL FOR GEEKS 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. 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
- 12. 12 KITKAT 4.4 PATH TO MATERIAL A COMEBACK TOWARDS AN EMOTIONAL AND ENGAGING DESIGN ROOTED IN REALITY THAT YOU CAN TOUCH.
- 13.
- 14. IT ALL STARTEDWITH A WOOOAH! 14
- 15.
- 16. LAYOUT COLORS &TYPE MOTION
- 17. LAYOUT COLORS &TYPE MOTION
- 18.
- 19.
- 20. TOOLBAR 20 AKAR.I.P. ACTIONBAR
- 21. NAVIGATION 21 DRAWERGOES ON TOP DROPDOWN TO NAVIGATE IS DEPRECATED
- 22. CARDS Mariotti’s CardsLib 22 NATURAL SOLUTION SCALES WELL appcompat-v7: CardView
- 23. BASELINE GRIDS 23 COMPONENTS => N * 8DP INK => N * 4DP <description>
- 24. KEYLINES 24 CONSISTENTHIERARCHICAL SPACING
- 25. LAYOUT COLORS &TYPE MOTION
- 26. BRAND & STRUCTURE 26 USE COLOR AND TYPE TO COMMUNICATE, NOT TO DECORATE Color juxtaposition and type take part in laying out and guiding user action Typography becomes a key driver to convey structure, that is, hierarchy.
- 27. PRIMARY AND ACCENT appcompat-v7: Palette.java 27
- 28. FONT STYLES 28 CONSISTENT NON-LINEAR PROGRESSION font progression ratio can be difficult to get right - in case of doubt, use provided styles for text appcompat-v7: styles.xml
- 29. 29 LAYOUT COLORS& TYPE MOTION
- 30. WHY ANIMATIONS? 30 Animations play an important role in the UX of an app. They can concretely be used to: ➡provide spatial cues for navigation ➡keep user engaged: experience is a continuum ➡establish a bond with the user ➡provide positive reinforcement an delight
- 31. RULES FOR ANIMATIONS 31 THERE’S NO SUCH THING AS INSTANT ACCELERATION THERE’S NO SUCH THING AS LINEAR TRAJECTORIES
- 32. RULES FOR ANIMATIONS 32 THERE’S NO SUCH THING AS INSTANT ACCELERATION THERE’S NO SUCH THING AS LINEAR TRAJECTORIES SlideShare: Design in Motion PathInterpolator
- 33. MACRO-ANIMATIONS 33 ACTIVITY“HERO ELEMENT” ActivityOptions .makeSceneTransitionAnimation
- 34. MICRO-ANIMATIONS 34 PATHDRAWABLES <description> VectorDrawable & Animator
- 35. TOUCH FEEDBACK 35 RIPPLES & ELEVATION paper captures the energy of the touch and reacts to it. you need to combine point-focused touch feedback with a touch target-wide reaction. StateListAnimator
- 36. TOUCH FEEDBACK 36 RADIAL PROPAGATION ripples can extend outside View’s 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)
- 37. SUBTEXT <description> 37 IT’S A SYSTEM
- 38. 38 THANK YOU! BACK & UP? RECYCLERVIEW? FAB? MORE PAPER? CIRCULAR REVEAL?
Editor's Notes
- #3 it will be an overview that focuses on the bits and pieces of MD, but also in the founding principles - we’ll provide insight
- #4 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 all’immaginazione e alla magia.
- #5 what?
- #6 I worked in a leading design firm for the past 3 years. I’m actually an engineer. design is too important to be left (only) to designers
- #7 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
- #8 it’s good to structure the talk in terms of principles and patterns: principles are the foundations of, general axioms or intuition that form the basis patterns are the opposite - proven solutions to follow acritically, created to serve the principles
- #14 as said we’re going to split the talk in principles and patterns, color coded
- #15 what if a pixel could come out of the screen?
- #16 it’s either paper or ink Paper it’s your surface, ink is your content They follow different rules and have different constraints
- #17 from this very principles, the other rules span out affecting layout and structure of your app the colors and the typography you use and motion (aka animations)
- #19 paper pieces are physically positioned in the 3D space and 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
- #20 this metaphor forces us to think in terms of “which paper is on top of which?” establishing a hierarchy of paper sheets in our design
- #21 used as a live and fully interactive UI widget you can embed and use it like a widget (no more window decor). Less functionality, more flexibility. It’s a piece of paper like everything else
- #22 the navigation drawer also is a sheet of paper. Then a question: “where does it sit?” if you’re 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
- #23 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
- #24 respecting general alignment principles like baseline grids is needed to instill INTENT in your layouts is this at same level? yes / no you should spot hierarchy in a layout without needing to read content
- #25 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!
- #26 this concludes the layout section. Material also distinguish itself by the use of colors and type
- #27 Brand should be communicated in a more subtle way, using color choice and type. This means NO MORE LOGO ICONS on the top bar Let’s examine this Popup from L: buttons are just text, with color and type choice we communicate that they are actionable
- #28 [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 user’s attention to key elements (such as the circular floating action button).
- #29 we won’t touch the topic of how to choose a typeface to match your brand because it’s a wide topic and I still didn’t 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
- #30 Next, and maybe more prominent section of MD is about motion, AKA animations. That’s what general crowd gets excited about!
- #31 But animations need to be used wisely to avoid becoming just an ornamental thing.
- #32 There are some rules in animation design, the most famous set is derived from Disney “12 Rules”
- #33 There are some rules in animation design, the most famous set is derived from Disney “12 Rules”
- #34 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, it’s good architecture! But our brain does not work that way, it works in tasks
- #35 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
- #36 Another way MD uses animations is to communicate action feedback - elements change elevation when touched, telling the user “I’m ready” and to stand out in the paper hierarchy. A people favourite is the ripple effect.
- #37 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
- #38 Last point - as we said, MD is a system that scaled across touchpoint it’s designed to scale. After all this talking about work to do, functionality to implement animations - let’s 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!