Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Implementing an Enterprise Design System the Red Hat Way

92 views

Published on

Design systems are a powerful tool in any company’s arsenal. They provide consistency, support brand recognition, and streamline the design process itself. There are many benefits, but implementing a system across a large product portfolio can be cumbersome for the most nimble of teams. Come and learn how one of Red Hat’s Front End teams has built a multi-use toolkit for implementing design systems within Drupal, including PatternFly, Red Hat’s open-source design system based on Bootstrap. See how products from OpenShift, to interactive Drupal partner toolkits, and even RedHat.com’s Drupal marketing site all utilize parts of the same-style implementations - ensuring each adheres to Red Hat’s corporate branding and design standard. You will leave the room with a clear understanding of massive-scale design systems implementation and a Drupal-compatible toolkit to take your design systems to the next level. Topics covered: Design Systems, Philosophy, and Frameworks Atomic Design PatternFly KSS-Node SASS + Twig / Nunjucks + JSON Schema Pattern stack PatternLab UI Patterns Drupal Module PatternKit Drupal Module

Published in: Technology
  • Be the first to comment

Implementing an Enterprise Design System the Red Hat Way

  1. 1. IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT WAY
  2. 2. Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced with enterprise software and pipeline development and has been working with Drupal since Drupal 5. Derek has experience speaking at both Drupal Camps and to private audiences. He’s helped present everything from new technology pipelines to film pitches.
  3. 3. PREREQUISITES BUILDING DRUPAL SITES WITH COMPONENTS or WEBPACK, ES6, PATTERN LAB, AND DRUPAL 8... Christopher Bloom Saturday 10:15AM WILLAMETTE FALLS BALLROOM THEMING DRUPAL 8 WITH TWIG... Clint Robinson Saturday 4:15PM WILLAMETTE FALLS BALLROOM https://www.slideshare.net/DerekReese1/building-drupal-sites-with-components https://www.youtube.com/watch?v=SJVGNpOovJw
  4. 4. IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT WAY A DRUPAL STORY
  5. 5. DESIGN SYSTEMS The Red Hat Way Digital Design Philosophy Design Systems Implementation Drupal Integration
  6. 6. DIGITAL DESIGN PHILOSOPHY
  7. 7. DIGITAL DESIGN PHILOSOPHY
  8. 8. BRANDING MARKETING UX
  9. 9. BRANDING
  10. 10. IN ORDER TO TALK ABOUT DESIGN SYSTEMS, WE NEED TO TALK ABOUT...
  11. 11. DESIGN LANGUAGES vs DESIGN SYSTEMS
  12. 12. DESIGN (VISUAL) LANGUAGES Communication Graphical
  13. 13. EXAMPLES (past, present, & future)
  14. 14. DESIGN (VISUAL) LANGUAGES Skeuomorphic Design Infographic by Edward Korcheq, via http://glasscanopy.com/flat-design-vs-skeuomorphism-pros-cons/
  15. 15. DESIGN (VISUAL) LANGUAGES Skeuomorphic Design Flat Design via and drupal.com https://www.tillamook.com/our-story/our-story.html
  16. 16. DESIGN (VISUAL) LANGUAGES Skeuomorphic Design Flat Design Material Design
  17. 17. DESIGN (VISUAL) LANGUAGES Skeuomorphic Design Flat Design Material Design Vertical Design via http://highline.huffingtonpost.com/articles/en/poor-millennials/
  18. 18. DESIGN (VISUAL) LANGUAGES Skeuomorphic Design Flat Design Material Design Vertical Design ...and more! (US Web, AirBnB, Microsoft, etc.) (you can google any of these for tons of examples)
  19. 19. DESIGN (ORGANIZATIONAL) SYSTEMS Work with other developers Structural
  20. 20. EXAMPLES (past, present, & future)
  21. 21. DESIGN (ORGANIZATIONAL) SYSTEMS Monolithic Design Modular Design Atomic Design / Style Tiles via http://atomicdesign.bradfrost.com/chapter-2/
  22. 22. DIGITAL DESIGN PHILOSOPHY all together now Branding, Marketing, & UX Design Languages Design Systems
  23. 23. DESIGN DELIVERABLES Mood Boards Design Specification PDF Initial CSS / HTML Mockups
  24. 24. ...BUT HOW DO WE GET FROM OUR DESIGN DELIVERABLES TO A WORKING IMPLEMENTATION ACROSS MULTIPLE ENTERPRISE-SCALE WEB PROPERTIES?
  25. 25. DESIGN SYSTEMS IMPLEMENTATION
  26. 26. THE IMPLEMENTATION LIST Rulesets Design Spec Docs Style Guides Design Guides / Full Implementations Pattern Libraries Frameworks
  27. 27. RED HAT'S DESIGN SYSTEM FRAMEWORKS
  28. 28. WEBRH Style Ruleset & Implementation ​SASS / CSS Twig Patterns, JSON Schema, YAML Docs Complicated Editors & builders Tightly coupled Multiple properties @ Red Hat
  29. 29. WEBRH
  30. 30. WEBRH
  31. 31. PATTERNFLY Style Ruleset & Guide SASS / CSS Documentation Bootstrap Scalable Skinnable: RCUE Openshift
  32. 32. PATTERNFLY
  33. 33. MY TEAM (CONNECT)'S FRAMEWORK Style Ruleset, Implementation SASS / CSS Twig Patterns, JSON Schema, YAML Docs WebRH & PatternFly Dev-centric
  34. 34. MY TEAM (CONNECT)'S FRAMEWORK
  35. 35. IMPLEMENTATION PT. 2 Adoption, Education, Tooling
  36. 36. ADOPTION Selling it to the business ​Cost Studies & Comparisons Selling it to developers ​Scrum of Scrums Learn from other teams
  37. 37. DOCUMENTATION Include w/ Style Guides Not just local: Hosted Knowledge Shares
  38. 38. TOOLING Current Status: PatternKit REST Server + Composer + Grunt + Bower / Pattern Builder Importer module or PatternKit modules KSS + Composer + Gulp / Custom Twig Presenters PatternFly Custom App + Custom Implementation Testing out WebComponents Lib WIP: ​PatternLab + Composer + Gulp & PatternKit Twig Patterns w/ Web Component Compatibility Unify Dev Tools, Train & Maintain
  39. 39. DRUPAL INTEGRATIONS
  40. 40. {% include '@mypatternlibrary/atoms/image/image.twig' with { 'src': item.image.src, 'alt': item.image.alt, 'attributes': item.image['#attributes'], 'sources': item.image['#sources'], } only %} TWIG PRESENTERS (MVP-STYLE)
  41. 41. UI PATTERNS (DRUPAL 8) Multiple Integrations Views 1:1 Mapping Works with PatternLab https://www.drupal.org/project/ui_patterns
  42. 42. UI PATTERNS (DRUPAL 8)
  43. 43. PATTERNKIT (DRUPAL 7) Panels Data Mapping TFD7-beta3 + namespaces patch
  44. 44. DEMO
  45. 45. CAVEATS TFD7 issues - patches needed beta3, Zurb Foundation node-sass issues Base theme is outdated, needs updating Drupal theme builds are still complicated not everything is "npm run build" ... or "./configure; make"
  46. 46. THE FUTURE
  47. 47. TWIG / NUNJUCKS COMPONENTS PHPTEMPLATE PATTERNLAB WEB COMPONENTS PATTERNKIT Server-side rendering Client & Server-side rendering
  48. 48. IMPLEMENTING A DESIGN SYSTEM YOUR ACTION CHECKLIST BRANDING/MARKETING/UX + DESIGN LANGUAGE + DESIGN SYSTEM Start with the Visual Language of your Design STYLEGUIDE + LIBRARY + FRAMEWORKS Choose the option that best fits your timeline, system, and deliverables DRUPAL INTEGRATION Invest in a pattern-based system & the Twig/Nunjucks + JSON Schema + YAML Stack
  49. 49. GET INVOLVED START HERE PatternLab https://github.com/drupal-pattern-lab/roadmap/issues/8 https://github.com/pattern-lab/patternlab-php-core/issues/116
  50. 50. RESOURCES PatternFly PatternKit UI Patterns PatternLab https://patternfly.org https://www.drupal.org/project/patternkit https://www.drupal.org/project/ui_patterns https://patternlab.io/ Twig for Drupal (7) TFD7 Namespace Patch ThemeKey Nunjucks https://www.drupal.org/project/tfd7 https://www.drupal.org/project/tfd7/issues/ 2904991 https://www.drupal.org/project/themekey https://mozilla.github.io/nunjucks/
  51. 51. COMMAND REFERENCE Start a local docker Create a new Drupal install Install UI Patterns Drupal Module Install PatternKit Drupal Module npm install -g generator-docker4drupal yo docker4drupal composer create-project drupal-composer/drupal-project:8.x-dev some-dir --stability dev --no-interaction composer require drupal/ui_patterns rush en -y patternkitd
  52. 52. SPECIAL THANKS JOHN ALBIN ERIK BALDWIN ROB COFFMAN BRENT DUNN MICAH GODBOLT ZACK HAWKINS MIKE NIELSON CASS ROBERTS JASON SMITH KENDALL TOTTEN and everyone else who has contributed from Red Hat.com, Connect, Customer Portal and other teams as well as the Drupal community
  53. 53. Q&A THANKS!

×