Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Enterprise Web Apps on Angular-Material

Kyle Ledbetter
February 04, 2016

Building Enterprise Web Apps on Angular-Material

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

Kyle Ledbetter

February 04, 2016

More Decks by Kyle Ledbetter

Other Decks in Design


  1. We’ve traditionally shipped hardware Long release cycles Waterfall development Extensive

    testing before release Work in same location Thousands of engineers
  2. To the cloud! Our team is the tip of the

    spear for agile, software- only products
  3. 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
  4. Chapter of Frontend Devs & Designers across product squads UX

    Cross-Org SQUAD SQUAD SQUAD SQUAD Product Owners Backend Dev Quality Engineering Product Owners Backend Dev Quality Engineering Product Owners Backend Dev Quality Engineering Product Owners CHAPTER Frontend Design & Dev Frontend Design & Dev Frontend Design & Dev Frontend Design & Dev Backend Dev Quality Engineering
  5. 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
  6. 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…
  7. The spec keeps growing & iterating for you w/o your

    time Elements are added for you, such as the data table and stepper
  8. 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
  9. 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.
  10. 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
  11. Don’t Hack the Core! The open source approach to not

    hacking the core works for design!
  12. 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
  13. YOU SERVE MOTHER MATERIAL (ego aside, it’s all about the

    spec) Usability isn’t always sexy, these aren’t Dribbble shots.
  14. 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)
  15. Spend time prototyping & developing features instead of new UI

    Functional UI in 1 Sprint Interactive Mockup PM Feedback UI Implementation SPRINT WEEK 1 SPRINT WEEK 2 SPRINT REVIEW PM Signoff UI Implementation UX Collaboration UX PM UI Revisions UI Collaboration API Development API API Questions
  16. Let’s keep the conversation going online Thanks Y’all! Kyle Ledbetter

    @kyleledbetter KyleLedbetter.com http://tinyurl.com/uxd2016