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 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 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 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.

By Nadya Direkova, Staff Designer and Design Evangelist at Google[x]

At Google and throughout the industry, we all agree that two things matter: design and speed. But how can we do great design quickly? For our teams, one of our most important tools is the design sprint.

While a typical product design process takes months or years, a design sprint compresses this into a week or less. The design sprint combines key design and research methods and focuses on a single challenge or multiple challenges in parallel. It brings all the stakeholders—designers, developers, product managers, and other decision makers—into one place to work together on a short deadline. It often leads to insights and solutions more quickly than anyone thought possible. At Google, we've been using design sprints for over four years, from external projects like Ads, Glass and Project Loon to our internal tools.

One team has even run a huge sprint with 175 participants in 23 teams. How did that feel? As Cordell Ratzlaff, User Experience Director for Ads & Commerce, says: “When you participate in a sprint, you either win or you learn.” Our latest Google Design Minutes short tells this story:

We’re really excited about sharing our design sprint methods more broadly. Design sprints were an important theme in the “Design, Develop, Distribute” message at Google I/O 2014, where developers got a chance to learn about and experience short sprints in person.

However, this was just a first glimpse; over the summer, we’ll be hosting design sprints for select developers in the Bay Area, helping developers design for platforms like Glass and Android Wear or build with the material design approach. To get updates when these limited-seating events become available, sign up here.

No matter what your challenge and design process, design sprints can help you reduce the time it takes to create great ideas. So make great things, and make them quickly!

By Nicholas Jitkoff, Designer

When 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 L

Bringing 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 Polymer

Last 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.

By Roman Nurik, Design Advocate

Google I/O 2014 is less than a week away, and we could not be more excited to show you what we have planned to help you create great experiences for your users.

Over the next few days, we’ll be sharing things to look out for both in-person and virtually that highlight design principles and techniques, the latest tools and implementations with which to develop, and developer-minded products and strategies to help distribute your app. First up, design!

As we shared in April, this year’s event will include content geared to designers and developers who are interested in design. These include:

SESSIONS: Designing for wearables || Wednesday, 4-5PM (Room 8): In this session, lead Google designers will discuss the process for Android Wear and Glass, and give tips for developers and designers working in this emerging space. By attending you’ll hear our take on new design approaches to wearable technology. This is just one of a number of sessions from Google user experience researchers and designers discussing our approach to cross-platform design, as well as opportunities to learn about testing and rapid prototyping. Filter by “Design, Sessions, Live Streaming” to find the design sessions we’ll be playing over the live stream.

WORKSHOPS: Design sprints with Google Ventures || Thursday, 11AM -1PM (Workshop 1): We’ll offer a full slate of interactive workshops ranging from designing for Glass to effectively using data in your design processes, including this workshop on design techniques that you can use to gather data about customers, get your team focused on the same challenges, quickly sketch new ideas, and turn those sketches into prototypes.

PANELS: Cross-platform design panel || Thursday, 1:15-2PM (Design Sandbox, Floor 2): This year, the sandbox will be alive with talks, panels and opportunities to meet directly with Googlers. During this panel, Google designers will share their thoughts on designing for multiple platforms, providing background information on how the design team creates consistent, intuitive and delightful experiences in a multi-platform world. There are many opportunities like this as well as for UX reviews and informal ‘Box talks in the Design Sandbox, offering you opportunities to connect with Googlers who share your passion for designing simple and engaging applications.

To see the full Google I/O schedule, visit google.com/io.

See you at I/O!

Roman Nurik is a Design Advocate at Google, helping designers and developers build amazing products on platforms like Android and the web.

Posted by Louis Gray, Googler

By Nadya Direkova, Staff Designer and Design Evangelist

When Google launched, it was a crisp white page with a simple search box. You might not have thought there was much in the way of design, but its appearance underscored two of our most important principles: simplicity and usefulness. Those principles haven't changed much in fifteen years, but our understanding of what makes great design has—throughout the industry. Today, there’s design in everything we touch. And as a developer, even if you don't happen to be a formal designer, you've undoubtedly faced design challenges as you've built your own products. Design has always been a rich conversation, and it's one that we’d like to have with you as you work on your projects and as we work on ours.

At Google I/O this year, we will have sessions and workshops focused on design, geared for designers and developers who are interested in design. We're looking forward to exchanging ideas with you both at the conference and online afterwards. Remember, registration is open until Friday and details on Google I/O Extended events are coming soon.

To start off the conversation, today we're kicking off a series called "Google Design Minutes" with three videos where we share some key learnings with you-from Glass, Maps and Search. We hope they'll help you navigate some of your own design challenges.


Search — The beauty of speed: Jon Wiley discusses the importance of designing for simplicity and speed.


Maps - Putting the user front and center: Sian Townsend looks at the importance of understanding how a user approaches your product, while Jonah Jones talks about adapting the approach to make the map the user interface.


Glass - Make it simple: Isabelle Olsson talks about the focus her team put into making Glass simple, and how this choice guided all the decisions they made.

We'll be continuing this conversation around design over the coming months—including more of these videos, as well as design-focused content on our developer site. And we'd love to hear from you! We've set up a Google Moderator page to hear your questions for our designers and researchers; in the coming weeks, we'll share our thoughts on the top questions. We look forward to seeing you at Google I/O, and hearing your own thoughts on what makes great design today!

Nadya Direkova is a Staff Designer at Google [X]. She runs design sprints across Google allowing interdisciplinary teams to design with skill and speed.

Posted by Louis Gray, Googler