How we're leveraging Material Design as a design spec and web framework across a suite of new big data apps at Teradata
- created for UX Dev Summit 2016
We’ve traditionally shipped hardware Long release cycles Waterfall development Extensive testing before release Work in same location Thousands of engineers
But some problems Very few frontend devs of varying skillsets Different office locations (also remote) Information Architect
San Carlos
Product A
UI Designer
San Diego
Product B
JavaScript Engineer
San Carlos
Product C
UX Architect
Austin
Product D
Usability Engineer
San Carlos
Product A
As the centerpiece of our UX Why Material Design Design spec is married to code framework(s) Officially backed by Google (& a massive open source community) All breakpoints, form factors & most devices considered Spec & frameworks are continuously extended by core & community Mass adoption ensures familiarity w/ UI & improves public perception High importance on usability & accessibility
Official implementations from the horse’s mouth (Google) Google knows a thing or two about the web Polymer
Angular-Material
Material Design Lite
There’s also a plethora of great non-official implementations like Bootstrap Material, Material-UI (react), Ember-Paper, LumX (angular), Materialize, MUI and many more…
So many devices & breakpoints have been considered Everything from watch to phone to tablet to desktop to car to tv have been considered, and all provided for you and tested by the world
Focused on Accessibility Polymer & Angular-Material boast extremely impressive support for screen readers, keyboard interactions, reachable controls, operable controls, ARIA (roles, states & properties), text alternatives, semantics & more.
Inspiration, Community & Resources Oh My Hundreds of icons in formats any team can use Several color palette tools for designs and developers Templates for every app & language
For extending the style guide and UI repositories Follow the Open Source Model master squad squad squad squad squad Github Pull Request Fork Pull Request Fork
What about our brand? But won’t we all look like Google? Material is being adopted worldwide (immediate familiarity) Even if you look like Google, is that so bad? (associated w/ high quality) We’ve seen this fear before. (Bootstrap, Foundation, 960 Grid) Think of all your favorite apps from desktop to phone that use native UI Your brand should be about features & UX (not the color of a toolbar) Think of this as a Web SDK or HIG (just like OSX, Windows, iOS, Android)