Over one billion people in the world have some form of disability.
That's why we make accessibility a core consideration when we develop new products—from concept to launch and beyond. It's good for users and good for business: Building products that don't consider a diverse range of needs could mean missing a substantial group of potential users and customers.
But impairments and disabilities are as varied as people themselves. For designers, developers, marketers or small business owners, making your products and designs more accessible might seem like a daunting task. How can you make sure you're being more inclusive? Where do you start?
Today, Global Accessibility Awareness Day, we're launching a new suite of resources to help creators, marketers, and designers answer those questions and build more inclusive products and designs.
The first step is learning about accessibility. Simply start by downloading the Google Primer app and search "accessibility." You'll find five-minute lessons that help you better understand accessibility, and learn practical tips to start making your own business, products and designs more accessible, like key design principles for building a more accessible website. You may even discover that addressing accessibility issues can improve the user experience for everyone. For instance, closed captions can make your videos accessible to more people whether they have a hearing impairment or are sitting in a crowded room.
Next, visit the Google Accessibility page and discover free tools that can help you make your site or app more accessible for more people. The Android Developers site also contains a wide range of suggestions to help you improve the accessibility of your app.
We hope these resources will help you join us in designing and building for a more inclusive future. After all, an accessible web and world is a better one—both for people and for business.
"Excited to see the new lessons on accessibility that Primer launched today. They help us learn how to start making websites and products more accessible. With over 1 billion people in the world with some form of disability, building a more inclusive web is the right thing to do both for people and for business." - Ari Balogh, VP Engineering
Posted by April Pufahl, Conversation Designer
Creating Actions for the Google Assistant requires a breadth of design expertise ranging from voice user interface design, interaction design, visual design, motion design, and UX writing that we've refined into a single discipline: conversation design.
Today, we're launching a conversation design site that shares this expertise with you, so you can design Actions using the same principles that guide our teams at Google. Our goals are to help you:
If you're new to conversation design, you'll learn the basics of the conversation design process and how to determine whether conversation is right for your Action. You'll also get practical tips on how to:
Finally, we've broken down the conversational and visual components that are used to compose your Actions' responses to the user.
By following our conversation design principles, you'll adapt to the communication system users learned first and know best, and in the process, build better Actions.
Follow us on Twitter @ActionsOnGoogle and join our G+ community https://g.co/actionsdev to keep up to date with more news from our team.
As developers, we all know that having the right assets is crucial to the success of a 3D application, especially with AR and VR apps. Since we launched Poly a few weeks ago, many developers have been downloading and using Poly models in their apps and games. To make this process easier and more powerful, today we launched the Poly API, which allows applications to dynamically search and download 3D assets at both edit and run time.
The API is REST-based, so it's inherently cross-platform. To help you make the API calls and convert the results into objects that you can display in your app, we provide several toolkits and samples for some common game engines and platforms. Even if your engine or platform isn't included in this list, remember that the API is based on HTTP, which means you can call it from virtually any device that's connected to the Internet.
Here are some of the things the API allows you to do:
If you are using Unity, we offer Poly Toolkit for Unity, a plugin that includes all the necessary functionality to automatically wrap the API calls and download and convert assets, exposing it through a simple C# API. For example, you can fetch and import an asset into your scene at runtime with a single line of code:
PolyApi.GetAsset(ASSET_ID, result => { PolyApi.Import(result.Value, PolyImportOptions.Default()); });
Poly Toolkit optionally also handles authentication for you, so that you can list the signed in user's own private assets, or the assets that the user has liked on the Poly website.
In addition, Poly Toolkit for Unity also comes with an editor window, where you can search for and import assets from Poly into your Unity scene directly from the editor.
If you are using Unreal, we also offer Poly Toolkit for Unreal, which wraps the API and performs automatic download and conversion of OBJs and Blocks models from Poly. It allows you to query for assets and filter results, download assets and import assets as ready-to-use Unreal actors that you can use in your game.
Not using a game engine? No problem! If you are developing for Android, check out our Android sample code, which includes a basic sample with no external dependencies, and also a sample that shows how to use the Poly API in conjunction with ARCore. The samples include:
If you are an iOS developer, we have two samples for you as well: one using SceneKit and one using ARKit, showing how to build an iOS app that downloads and imports models from Poly. This includes all the logic necessary to open an HTTP connection, make the API requests, parse the results, build the 3D objects from the data and place them on the scene.
For web developers, we also offer a complete WebGL sample using Three.js, showing how to get and display a particular asset, or perform searches. There is also a sample showing how to import and display Tilt Brush sketches.
No matter what engine or platform you are using, we hope that the Poly API will help bring high quality assets to your app and help you increase engagement with your users! You can find more information about the Poly API and our toolkits and samples on our developers site.
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.
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.
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.
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. :)
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.
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!
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.
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.
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.
