Updated Material Design Guidelines and Resources

When we first published the Material Design guidelines back in June, we set out to create a living document that would grow with feedback from the community. In that time, we’ve seen some great work from the community in augmenting the guidelines with things like Sketch templates, icon downloads and screens upon screens of inspiring visual and motion design ideas. We’ve also received a lot of feedback around what resources we can provide to make using Material Design in your projects easier.

So today, in addition to publishing the final Android 5.0 SDK for developers, we’re publishing our first significant update to the Material Design guidelines, with additional resources including:

• Updated sticker sheets in PSD, AI and Sketch formats
• A new icon library ZIP download
• Updated color swatch downloads
• Updated whiteframe downloads, including better baseline grid text alignment and other miscellaneous fixes

The sticker sheets have been updated to reflect the latest refinements to the components and integrated into a single, comprehensive sticker sheet that should be easier to use. An aggregated sticker sheet is also newly available for Adobe Photoshop and Sketch—two hugely popular requests. In the sticker sheet, you can find various elements that make up layouts, including light and dark symbols for the status bar, app bar, bottom toolbar, cards, dropdowns, search fields, dividers, navigation drawers, dialogs, the floating action button, and other components. The sticker sheets now also include explanatory text for elements.

Note that the images in the Components section of the guidelines havent yet been updated (that’s coming soon!), so you can consider the sticker sheets to be the most up-to-date version of the components.

Also, the new system icons sticker sheet contains icons commonly used in Android across different apps, such as icons used for media playback, communication, content editing, connectivity, and so on.

Stay tuned for more enhancements as we incorporate more of your feedback—remember to share your suggestions on Google+! We’re excited to continue evolving this living document with you!

For more on Material Design, check out these videos and the new getting started guide for Android developers.

Posted by Roman Nurik, Design Advocate

Read More..

This is Material Design Lite

Posted by Addy Osmani, Staff Developer Platform Engineer

Back in 2014, Google published the material design specification with a goal to provide guidelines for good design and beautiful UI across all device form factors. Today we are releasing our first effort to bring this to websites using vanilla CSS, HTML and JavaScript. We’re calling it Material Design Lite (MDL).

MDL makes it easy to add a material design look and feel to your websites. The “Lite” part of MDL comes from several key design goals: MDL has few dependencies, making it easy to install and use. It is framework-agnostic, meaning MDL can be used with any of the rapidly changing landscape of front-end tool chains. MDL has a low overhead in terms of code size (~27KB gzipped), and a narrow focus—enabling material design styling for websites.

Get started now and give it a spin or try one of our examples on CodePen.

MDL is a complimentary implementation to the Paper elements built with Polymer. The Paper elements are fully encapsulated components that can be used individually or composed together to create a material design-style site, and support more advanced user interaction. That said, MDL can be used alongside the Polymer element counterparts.

Out-of-the-box Templates

MDL optimises for websites heavy on content such as marketing pages, text articles and blogs. Weve built responsive templates to show the broadness of sites that can be created using MDL that can be downloaded from our Templates page. We hope these inspire you to build great looking sites.

Blogs:

Text-heavy content sites:

Dashboards:

Standalone articles:

and more.

Technical details and browser support

MDL includes a rich set of components, including material design buttons, text-fields, tooltips, spinners and many more. It also include a responsive grid and breakpoints that adhere to the new material design adaptive UI guidelines.

The MDL sources are written in Sass using BEM. While we hope youll use our theme customizer or pre-built CSS, you can also download the MDL sources from GitHub and build your own version. The easiest way to use MDL is by referencing our CDN, but you can also download the CSS or import MDL via npm or Bower.

The complete MDL experience works in all modern evergreen browsers (Chrome, Firefox, Opera, Edge) and Safari, but gracefully degrades to CSS-only in browsers like IE9 that don’t pass our Cutting-the-mustard test. Our browser compatibility matrix has the most up to date information on the browsers MDL officially supports.

More questions?

Weve been working with the designers evolving material design to build in additional thinking for the web. This includes working on solutions for responsive templates, high-performance typography and missing components like badges. MDL is spec compliant for today and provides guidance on aspects of the spec that are still being evolved. As with the material design spec itself, your feedback and questions will help us evolve MDL, and in turn, how material design works on the web.

We’re sure you have plenty of questions and we have tried to cover some of them in our FAQ. Feel free to hit us up on GitHub or Stack Overflow if you have more. :)

Wrapping up

MDL is built on the core technologies of the web you already know and use every day—CSS, HTML and JS. By adopting MDL into your projects, you gain access to an authoritative and highly curated implementation of material design for the web. We can’t wait to see the beautiful, modern, responsive websites you’re going to build with Material Design Lite.

Read More..

Material Design Gets More Material

A few weeks ago, we published our first significant update to the material design guidelines. Today, we’re addressing even more of the comments and suggestions you’ve provided with another major update to the spec. Check out some of the highlights below.

• Links to Android developer docs. One of the biggest requests we’ve heard from developers and designers is that the guidelines should offer quicker access to related developer documentation. We’ve started to add key links for Android developers, and we’re committed to more tightly integrating the spec with both the Polymer and Android docs.
• A new What is Material? section. While the introduction offers a succinct bird’s-eye-view of material design, it left open some questions that were previously only answered in video content (the Google I/O videos and DesignBytes). This new sections dives deeper into the environment established by material design, including material properties and how we work with objects in 3D space.
• A What’s New section. We view the material design spec as a living document, meaning we’ll be continually adding and refining content. The What’s New section, which was a highly requested feature, should help designers track the spec’s evolution.

In addition to these major new features and sections, there’s even more in today’s update, including:

• A new section on product icons (launcher icons for Android apps).
• New patterns like the navigation drawer, navigational transitions, scrolling techniques, swipe to refresh, date/time formats, and errors.
• New and updated components including pickers, dialogs, and menus.
• A new usability section on bidirectionality.

Stay tuned for even more updates as we continue to integrate the relevant developer docs, refine existing spec sections, and expand the spec to cover more ground. And as always, remember to leave your suggestions on Google+!

Posted by Roman Nurik, Design Advocate

Read More..

Learning Material Design

Learning Material Design

Key Features

• Master the highly acclaimed Material Design paradigm and give your apps and pages the look that everyone is talking about
• Get a mix of key theoretical concepts combined with enough practical examples to put each theory into practice so you can create elegant material interfaces with Android Studio and Polymer
• Written by Kyle Mew, successful author with over a decade of mobile and web development experience, this book has both the touch of a developer as well as an experienced writer

Book Description
Googles Material Design language has taken the web development and design worlds by storm. Now available on many more platforms than Android, Material Design uses color, light, and movements to not only generate beautiful interfaces, but to provide intuitive navigation for the user.

Learning Material Design will teach you the fundamental theories of Material Design using code samples to put these theories into practice.

Focusing primarily on Android Studio, youll create mobile interfaces using the most widely used and powerful material components, such as sliding drawers and floating action buttons. Each section will introduce the relevant Java classes and APIs required to implement these components. With the rules regarding structure, layout, iconography, and typography covered, we then move into animation and transition, possibly Material Designs most powerful concept, allowing complex hierarchies to be displayed simply and stylishly.

With all the basic technologies and concepts mastered, the book concludes by showing you how these skills can be applied to other platforms, in particular web apps, using the powerful Polymer library.

What you will learn

• Implement Material Design on both mobile and web platforms that work on older handsets and browsers
• Design stylish layouts with the Material Theme
• Create and manage cards, lists, and grids
• Design and implement sliding drawers for seamless navigation
• Coordinate components to work together
• Animate widgets and create transitions and animation program flow
• Use Polymer to bring Material Design to your web pages

About the Author
Kyle Mew has been programming since the early eighties and has written for several technology websites. He has also written three radio plays and two other books on Android development.

Table of Contents

• Getting Started with Material Design
• Building a Mobile Layout
• Common Components
• Sliding Drawers and Navigation
• Lists, Cards, and Data
• Animations and Transitions
• Material on Other Devices
• Material Web Frameworks
• The Materialize Framework
• Material Design Lite

Read More..

Get ready for even more material design

Posted by Monica Bagagem, Developer Marketing

Google I/O 2015 starts tomorrow, and, like last year, we’ve got an exciting lineup of design-focused content for both developers and designers to experience in-person and online. Just a year ago, we announced material design - a system for cross-platform visual, motion, and interaction design. This year at I/O, we’ll see how material has been adopted and implemented by the community, and our approach on design across our platforms.

Sessions

At 4PM PDT on Thursday, May 28, join Matias Duarte’s “Material Now” session to recap where we’ve been and get a sneak peek of where we’re going with design at Google. We’ll be recognizing some of the phenomenal material design work from across the community, so definitely tune in if you’re an Android developer or designer. For more details, check Matias’ post on Google+.

The session will be live streamed so you can follow along in real-time even if you’re not at Moscone. Recordings will also be available shortly after on the I/O website.

Add Design Sessions to your I/O schedule

Design Sandbox

We’ve dedicated an entire section of Moscone West to design-related programming, including one-on-one and group UX reviews with members of the material design team. Appointments will be on a first-come, first-serve basis, but well also have Google designers on hand for more casual questions.

Add Material Design Reviews to your I/O schedule

Sandbox Talks

Google designers and engineers will host several deep-dive, 20 minute tech talks in a breakout area within the Design Sandbox on Level 2. The space has been designed to facilitate conversation and discussion with small audiences, so come prepared with questions! We’ll be covering a range of topics such as cross-platform and responsive design, designing for platforms like Google Cast and Android Auto, and how to adapt material design to your brand. As an added bonus, most Sandbox Talks will take place twice throughout the conference giving you more flexibility to adjust your schedule.

Add Design Sandbox Talks to your I/O schedule

Explore the full Google I/O schedule here.

Be sure to follow +GoogleDesign and @GoogleDesign, where we’ll be posting design-related announcements throughout the conference. You can also follow and join the general conversation about I/O at #io15. See you tomorrow!

Read More..