O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

In a Material world

Ad

IN A 
MATERIAL 
WORLD 
+EmanueleDiSaverio 
@hazam

Ad

THIS TALK 
will give an overview of the principles of the new 
design system called Material Design, 
introduced by Google...

Ad

WHAT IS MATERIAL DESIGN 
“A material metaphor is the unifying 
theory of a rationalized space and a 
system of motion. 
Th...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Próximos SlideShares
Neomorphism
Neomorphism
Carregando em…3
×

Confira estes a seguir

1 de 38 Anúncio
1 de 38 Anúncio

In a Material world

Baixar para ler offline

Introduction to Material Design, with focus on general principles and patterns for Android and Web.
This will introduce you to principles and patterns of Material Design to elaborate your modern designs for web and mobile.

While the deck is pretty much image heavy, the speaker notes are provided to get a sense of the live speech.

Held at Google Developer Group DevFest 2014 at Politecnico di Bari.

Introduction to Material Design, with focus on general principles and patterns for Android and Web.
This will introduce you to principles and patterns of Material Design to elaborate your modern designs for web and mobile.

While the deck is pretty much image heavy, the speaker notes are provided to get a sense of the live speech.

Held at Google Developer Group DevFest 2014 at Politecnico di Bari.

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Anúncio
Anúncio

In a Material world

  1. 1. IN A MATERIAL WORLD +EmanueleDiSaverio @hazam
  2. 2. THIS TALK will 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
  3. 3. WHAT IS MATERIAL DESIGN “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. ??? 4 SUBTEXT <description>
  5. 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. 6. SUBTEXT <description> 6 IT’S A SYSTEM
  7. 7. PRINCIPLES PATTERNS 7
  8. 8. 8 UP TO 2.2 HEAVY USE OF GRADIENTS NO PATTERNS - FRAGMENTATION “ANDROID IS FOR GEEKS”
  9. 9. 9 HOLO - 3.0 ~ 4.1 DIGITAL TRON FEELING LOTS OF PATTERNS DESCRIBED STILL FOR GEEKS
  10. 10. 10 INFLUENCES IOS MOVING FROM SKEUOMORPHIC TO FLAT TRANSLUCENT
  11. 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. 12 KITKAT 4.4 PATH TO MATERIAL A COMEBACK TOWARDS AN EMOTIONAL AND ENGAGING DESIGN ROOTED IN REALITY THAT YOU CAN TOUCH.
  13. 13. PRINCIPLES PATTERNS 13
  14. 14. IT ALL STARTED WITH A WOOOAH! 14
  15. 15. PAPER 15 INK
  16. 16. LAYOUT COLORS & TYPE MOTION
  17. 17. LAYOUT COLORS & TYPE MOTION
  18. 18. DEPTH & ELEVATION 18
  19. 19. WHO’S ON TOP? 19
  20. 20. TOOLBAR 20 AKA R.I.P. ACTIONBAR
  21. 21. NAVIGATION 21 DRAWER GOES ON TOP DROPDOWN TO NAVIGATE IS DEPRECATED
  22. 22. CARDS Mariotti’s CardsLib 22 NATURAL SOLUTION SCALES WELL appcompat-v7: CardView
  23. 23. BASELINE GRIDS 23 COMPONENTS => N * 8DP INK => N * 4DP <description>
  24. 24. KEYLINES 24 CONSISTENT HIERARCHICAL SPACING
  25. 25. LAYOUT COLORS & TYPE MOTION
  26. 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. 27. PRIMARY AND ACCENT appcompat-v7: Palette.java 27
  28. 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. 29 LAYOUT COLORS & TYPE MOTION
  30. 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. 31. RULES FOR ANIMATIONS 31 THERE’S NO SUCH THING AS INSTANT ACCELERATION THERE’S NO SUCH THING AS LINEAR TRAJECTORIES
  32. 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. 33. MACRO-ANIMATIONS 33 ACTIVITY “HERO ELEMENT” ActivityOptions .makeSceneTransitionAnimation
  34. 34. MICRO-ANIMATIONS 34 PATH DRAWABLES <description> VectorDrawable & Animator
  35. 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. 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. 37. SUBTEXT <description> 37 IT’S A SYSTEM
  38. 38. 38 THANK YOU! BACK & UP? RECYCLERVIEW? FAB? MORE PAPER? CIRCULAR REVEAL?

Notas do Editor

  • it will be an overview that focuses on the bits and pieces of MD, but also in the founding principles - we’ll provide insight
  • 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.
  • what?
  • 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
  • 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
  • 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
  • as said we’re going to split the talk in principles and patterns, color coded
  • what if a pixel could come out of the screen?
  • it’s either paper or ink

    Paper it’s your surface, ink is your content
    They follow different rules and have different constraints
  • 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)
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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!
  • this concludes the layout section. Material also distinguish itself by the use of colors and type
  • 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
  • [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).
  • 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
  • Next, and maybe more prominent section of MD is about motion, AKA animations. That’s what general crowd gets excited about!
  • But animations need to be used wisely to avoid becoming just an ornamental thing.
  • There are some rules in animation design, the most famous set is derived from Disney “12 Rules”
  • There are some rules in animation design, the most famous set is derived from Disney “12 Rules”
  • 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
  • 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
  • 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.
  • 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
  • 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!

×