Google Developers Blog: material design

Build beautiful apps and websites with modular, customizable UI components

Friday, May 12, 2017

.separator img { margin:0; } .list-wrapper { margin: 1em 0; } .list-wrapper:after { content: ""; display: table; clear: both; } Posted by Adrian Secord and Omer Ziv, Material Design Material Components lets you build easily for Android, iOS, and the web using open-source code for Material Design, a shared set of principles uniting style, brand, interaction, and motion. These components are regularly updated by a team of engineers and designers to follow the latest Material Design guidelines, ensuring well-crafted implementations that meet development standards such as internationalization and accessibility support.

Accurate

Pixel-perfect components for Android, iOS, and the web

Current

Maintained by Google engineers and designers, using the latest APIs and features.

Open-source

The code on GitHub is available for you to contribute or simply use elements as needed

Industry standards

Also used in Google's products, these components meet industry standards, such as internationalization and accessibility

Material Components are maintained by a core team of Android, iOS, and web engineers and UX designers at Google. We strive to support the best of each platform by:

Supporting older Android versions with graceful degradation

Developing iOS apps that use industry standards like Swift, Objective-C, and storyboards

Integrating seamlessly with popular web frameworks and libraries

With these components, your team can easily develop rich user experiences using Material Design. We'll be continually updating the components to match the latest Material Design guidelines, and we're looking forward to you and your team contributing to the project. To get the latest news and chat with us directly, please check out our GitHub repos, follow us on Twitter (@materialdesign), and visit us at https://material.io/components/.

Expand your color palette with new tools for Material Design

Thursday, April 6, 2017

Posted By: Rachel Been, Creative Lead, Material Design Material Design GuidelinesBeyond guidancetoday's updatecolor tool

Create color schemes

Create color schemes that include darker and lighter variations of your primary and secondary colors.












Test accessibility

Design is a Dialogue: Sharing Material Design to Japan and beyond

Thursday, October 6, 2016

Posted by Matias Duarte, ‎VP, Material Design at Google

As a child I was surrounded by the commercial design and pop-cultural art of Japan. I played with Transformer robot toys, pumped quarters into Pac-Man and Donkey Kong, watched Star Blazers (Yamato) and Robotech (Macross) cartoons after school, and listened to mix-tapes on my Sony Walkman.In art school, I became fascinated by the creative dialog of the late 1800s, where western artists drew inspiration from their peers in Asia. The flattening of perspective and embrace of the two-dimensional graphic qualities of the image were revolutionary at the time, and would lay the foundation for the great modernist movements of painting and design in the West.These influences can be found in Material Design, our comprehensive system for visual, motion, and interaction design across all platforms and all devices. Material Design continues to evolve but, at its core, it relies on the foundations of good graphic and print design – clear typography, systematic layout, thoughtful application of scale, intentional use of color and white space, and foreground imagery. Working together these elements do far more than please the eye. They create hierarchy, meaning, and focus attention on content. Yesterday, I was in Tokyo to host SPAN, our annual design event that engages the many ways design and technology shape our everyday lives. SPAN Tokyo provides us with an opportunity to honor the influence of Japanese art and culture on Material Design, as we highlight the most inspiring local designers and broader creative community. In anticipation of the event, we have translated our Material Design Guidelines into Japanese which we are please to announce are available for download starting today (material.google.com/jp). This document is a first step towards making Material Design a conversation that includes our Japanese friends. Furthermore, it is a symbol of our commitment to continuing this dialog of design throughout Asia.With that in mind, we’ve organized SPAN Tokyo to feature a broad range of practitioners contributing to the contemporary visual cultural happening in Japan today—from art generated through machine learning and neural networks, to start-up culture, ikebana, type design, and much more. We’re honored to have been joined by this esteemed group of speakers, including London Design Museum director Deyan Sudjic, illustrator Mariya Suzuki, artist Keiichi Tanaami, and many more. To recap yesterday's conference and stay up to date on future events, follow us on Twitter, Google+, Facebook, and sign up for the Google Design Newsletter.

This is Material Design Lite

Monday, July 13, 2015

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. We've 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 supportMDL 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 you'll 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?We've 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 upMDL 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.

Get ready for even more material design

Wednesday, May 27, 2015

Posted by Monica Bagagem, Developer MarketingGoogle 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.

SessionsAt 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 scheduleDesign SandboxWe’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 we'll also have Google designers on hand for more casual questions.Add Material Design Reviews to your I/O scheduleSandbox TalksGoogle 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 scheduleExplore 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!

This is material design

Wednesday, June 25, 2014

By Nicholas Jitkoff, DesignerWhen we started building for the first mobile devices, mobile meant less: less screen space, slower connection, fewer features. A mobile experience was often a lesser experience. But mobile devices have evolved—they have become more powerful, faster, and more intuitive—so must our approach to design.And as Google, including the Android platform, expands into new form factors, we’re introducing one consistent design that spans devices across mobile, desktop, and beyond. Today at Google I/O, we introduced material design, which uses tactile surfaces, bold graphic design, and fluid motion to create beautiful, intuitive experiences. In material design, surface and shadow establish a physical structure to explain what can be touched and what can move. Content is front and center, using principles of modern print design. Motion is meaningful, clarifying relationships and teaching with delightful details. We needed something that felt at home on the smallest watch, the largest TV, and every screen in between. We used it for Android Wear, our project to extend Android wearables, as well as Android TV, and Android Auto. So as you create applications and services for this expansive new range of devices, we’ve created one unified set of style guidelines that works across any platform. We’re releasing the first version of these guidelines as part of our preview today. You can find them on google.com/design.Material design, in LBringing material design to Android is a big part of the L-Release of Android, the version we previewed today. We’ve added the new Material theme, which you can apply to your apps for a new style: it lets you easily infuse your own color palette into your app, and offers new system widgets, screen transitions and animated touch feedback. We’ve also added the ability to specify a view’s elevation, allowing you to raise UI elements and cast dynamic, real-time shadows in your apps.

Bringing material design to the web, with PolymerLast year at I/O we announced Polymer, an ambitious UI toolkit for the web. As a developer, you’ll now have access to all the capabilities of material design via Polymer, bringing tangibility, bold graphics, and smooth animations to your applications on the web.If you’d like to learn more about material design, please take a look at our guidelines. Join us as we continue to design and iterate at +Google Design.

Sep	OCT	Nov
	09
2017	2018	2019

Build beautiful apps and websites with modular, customizable UI components

Expand your color palette with new tools for Material Design

Design is a Dialogue: Sharing Material Design to Japan and beyond

This is Material Design Lite

Get ready for even more material design

This is material design

Labels

Archive

Company-wide

Products

Developers