You're about to create your best presentation ever

Material Design Presentation Background

Create your presentation by reusing one of our great community templates.

Material Design

Transcript: Material Design ABOUT MATERIAL DESIGN ABOUT MATERIAL DESIGN COLOR STYLE COLOR STYLE Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. This color scheme contains a primary color, plus darker and lighter versions of that color. Do Don't ICONS ICONS • Icon Product • Icon System Material icons use geometric shapes to visually represent core ideas, capabilities, or topics. System icons Do Don't Don't Do LAYOUT LAYOUT Structure Avoid slicing up the interface into too many regions which can cause L shapes. Instead, use whitespace to delineate secondary areas. Do Don't RESPONSIVE RESPONSIVE Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens. Breakpoints Breakpoints For optimal user experience, material design user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp. Example Example Transform Transform A UI element may transform from one format to another. A UI may reflow into available space. Reflow Do/Don't Do/Don't Font Font Do Don't UI GOOD DESIGN GOOD DESIGN BAD DESIGN Good Design Good Design Bad Design Bad Design


Transcript: Bottom sheets are especially suitable when three or more actions are displayed to the user and when the actions do not require descriptive explanation. If there are two or fewer actions or detailed description is required, consider using a menu or dialog instead. Perceiving an object's tangible form helps us understand how to manipulate it. Observing an object's motion tells us whether it is light or heavy, flexible or rigid, small or large. Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system. THANK YOU ! Material is the metaphor The new CardView widget lets you display important pieces of information inside cards that have a consistent look and feel. Animation RecyclerView is a more advanced and flexible version of ListView. Bottom Sheets CardView extends the FrameLayout class and lets you show information inside cards that have a consistent look on any app. CardView widgets can have shadows and rounded corners. Responsive interaction builds trust with the user and engages them. When a user interacts with an app and beautiful yet perfectly logical things happen, the user feels satisfied—even delighted. It is thoughtful and purposeful, not random, and can be gently whimsical but never distracting. RecyclerView CardView Principles Typography Motion provides meaning Material Theme Structure New Widgets Material Design Imagery A system icon, or UI icon, symbolizes a command, file, device, or directory. System icons are also used to represent common actions like trash, print, and save. The design of system icons is simple, modern, friendly, and sometimes quirky. Buttons Color Metrics and Keylines To create apps with material design: Take a look at the material design specification. Apply the material theme to your app. Define additional styles to customize the material theme. Create your layouts following material design guidelines. Specify the elevation of your views to cast appropriate shadows. Use the new widgets for complex views, such as lists and cards. Use the new APIs to customize the animations in your app. A button consists of text and/or an image that clearly communicates what action will occur when the user touches it. Here's how to specify properties of CardView: To set the corner radius in your layouts, use the card_view:cardCornerRadius attribute. To set the corner radius in your code, use the CardView.setRadius method. To set the background color of a card, use the card_view:cardBackgroundColor attribute. Icons The new RecyclerView widget is a more advanced version of ListView that provides performance improvements for dynamic views and is easier to use. The material theme is defined as: @android:style/Theme.Material (dark version) @android:style/Theme.Material.Light (light version) @android:style/Theme.Material.Light.DarkActionBar Layout Mass and Weight MATERIAL DESIGN Responsive Interaction Meaningful Transitions The layout is designed to scale across different screen sizes and will help facilitate UI development and ultimately help you make scalable apps. The layout guidelines also encourage apps to have a consistent look and feel by using the same visual elements, structural grids, and general spacing rules across platforms and screen sizes. Structural and visual consistency creates an environment for the user that is recognizable across products, which facilitates usage by providing users with a high level of familiarity and comfort. In material design, imagery—whether illustration or photography—is constructed but never contrived, magical but never overproduced. The style is optimistic, delightful and honest. Materiality, texture, depth, unexpected use of color, and appreciation of context are emphasized. The principles of imagery support the goal of purposeful, thoughtful, beautiful UIs. Delightful Details Color is inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts. Emphasize bold shadows and highlights. The Android L Developer Preview includes support for material design apps. Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. The Android L Developer Preview provides the following elements for you to build material design apps: A new theme New widgets for complex views New APIs for custom shadows and animations Bold, Graphic, Intentional

Material Design

Transcript: @android:style/Theme.Material @android:style/Theme.Material.Light @android:style/Theme.Material.Light.DarkActionBar ActionBar Navigation Modes have been Deprecated Material Design Jason Donmoyer @jasondonmoyer +JasonDonmoyer Specify with android:elevation Determines size of the shadow Determines drawing order “So is this the first warning that Android is abandoning java and moving to using Web technologies for development?" "For just a few hours' work, I think the result is a really delightful hallmark interaction" - Roman Nurik Drawable tinting Now support specifying most XML properties as theme attributes Color extraction library (Palette) Material Design for Android Developers Touch feedback RippleDrawable Reveal effect ViewAnimationUtils.createCircularReveal() Activity transition enter/exit transitions shared elements transition Animations Continued Android L "until now as a hobby dev I felt able to do pretty satisfying apps from design point of view” RecyclerView CardView Animations Material Theme "Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices.” Jumping In! You Can Build 'Material Design' apps targeting older versions of Android © Google Curved motion PathInterpolator State changes in views StateListAnimator AnimatedStateListDrawable Drawables Material is the metaphor Bold, graphic, intentional Motion is meaningful View Shadows (Z Property) Principles New Widgets Only Available in Android L! Backlash Start to Think about your Layouts in Terms of Material Design “…there is no real support for accomplishing it in a consistent way in the available SDKs. If everyone has to "roll their own", you're going to end up with hundreds of very subtly different versions of animations and transitions, and the consistency will not be there for the end user." “ It is way, way too much. A developer is not gonna take the time to animate a button... The guidelines are way too complex...” "Just a few hours' work" for the design of a button... why not ?” “'re crazy if you think every developer with no design and animation experience is going to go to that level of detail on every UI element”

Now you can make any subject more engaging and memorable