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. An Architectural Case Study


Published on

Red Hat needed a new pattern library that would be flexible enough to integrate into our current Drupal 7 site, yet powerful enough to build future D7, D8 and other Red Hat branded sites. This pattern library would create a consistent, brand approved, look across all of our web properties, and become a common UI development platform for Designers, UX, Devs and Project managers.

In this case study we’ll explain our architectural approach to deliver dozens of tightly packaged components to and other web properties through a variety of distribution methods.

Published in: Software
  • Be the first to comment An Architectural Case Study

  1. 1. An Architectural Case Study Ryan Wilson Micah Godbolt Shawn Iwinski
  2. 2. UX DEV QA BA Height of Development 4 large groups of people creating one website…
  3. 3. • Manual processes • Lack of reusability • Inconsistent designs UX • Waiting on UX for markup, css, and js DEV • Test after dev implementation • No target to test against QA • Review after implementation • Refer to outdated artifacts BA We all faced challenges
  4. 4. Front-end Styleguide Driven Development Our solution Back-end
  5. 5. • A sprint ahead • Better handoffs to our Devs • Improved maintainability UX Styleguide Driven Development Creating a relevant design system Build Process and Pattern Library
  6. 6. DEV Styleguide Driven Development Creating a relevant design system • Faster UX hand-off to a backend developer • Implementation Instructions Improved Implementation
  7. 7. QA Styleguide Driven Development Creating a relevant design system • A target to test against • Cross browser testing sooner • Earlier exposure to patterns Visual Guidelines
  8. 8. BA Styleguide Driven Development Creating a relevant design system • Able to review features before dev implements • Full page prototypes in the browser Reliable Reference
  9. 9. “[The Styleguide] helped conversations with product owner and clarified implementation approach” - Jose Maturino, Business Analyst Styleguide Driven Development Now we’re getting comments like this! “WebUX was pretty easy to develop on for a newbie” - Andrew Riley, Drupal Developer
  10. 10. Styleguide Driven Development The effect of our solution ● Always up-to-date representation of our UI ● Easily maintainable ● Improved unit testing ● Better communication between designers, developers and customers.
  11. 11. Micah Godbolt Phase2
  12. 12. BREAKING THINGS DOWN The Chemistry of a Living Design System
  13. 13. ROAD RUNNER RULES Rules to live and die by Immutable rules focused on things we always, never or only do. ● A Layout never affect components ● A Component never does the layout’s job (Background, width, gutters) ● Elements only have a single class, all styles come from that class.
  14. 14. SINGLE SELECTOR APPROACH OOCSS is an Anti-pattern?
  15. 15. SINGLE SELECTOR APPROACH Single Responsibility Principle
  16. 16. SINGLE SELECTOR APPROACH Single Responsibility Principle
  17. 17. SINGLE SELECTOR APPROACH Single Source of Truth
  18. 18. OPT-IN MODIFIERS I’m Nothing Without Class
  19. 19. OPT-IN CONTEXTS Nothing Taken Out of Context
  23. 23. FLEXBOX ENHANCED GRID A Magical Combination
  24. 24. MODULAR DESIGN Layouts and Components
  26. 26. RAPID PROTOTYPING The Old System Themeing Development Design WireframeRequirements
  27. 27. RAPID PROTOTYPING The New System DevelopmentPrototypeRequirements
  28. 28. Shawn Iwinski Red Hat
  29. 29. WebUX Drupal Integration Current implementation ● Red Hat internal “contrib” module ● Bower ● Per component theming / templates ● Drupal sharable component definitions ● Views UI integration
  30. 30. WebUX Drupal Integration Issues Current implementation ● Duplication ● WebUX changes
  31. 31. WebUX Drupal Integration TNG ● WebUX: JSON schema defined components ● WebUX: Twig templates The Next Generation
  32. 32. ● UX defined ● Drupal module ● WebUX updates WebUX Drupal Integration Benefits ● Faster feature development ● Increased code quality
  33. 33. Ryan Wilson Micah Godbolt @micahgodbolt Shawn Iwinski