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

Drupalcon 2017: Pattern Language: Pattern Libraries in the Wild

Drupalcon 2017: Pattern Language: Pattern Libraries in the Wild



April 26, 2017


  1. Baltimore Drupalcon 2017 Pattern Language: Pattern Libraries in the Wild

  2. Hi. Mark Llobrera Technology Director, Bluecadet Philadelphia @dirtystylus @bluecadet

  3. Descriptive, Not Prescriptive I’m not telling you how to do

    this stuff. But I hope all of this helps.
  4. BRIC bricartsmedia.org

  5. Science Friday sciencefriday.com

  6. Institute for Advanced Study ias.edu

  7. Albright-Knox Art Gallery albrightknox.org

  8. Patterns (Components) are a bit of Big Deal

  9. Why?

  10. Why? —We want to create visually interesting layouts that help

    support our content.
  11. (And) —We want to reduce complexity —We want to encourage

    consistency —We want to support flexibility
  12. We’ve got design techniques: —Style Tiles: styletil.es —Element Collages: v3.danielmall.com/articles/rif-

  13. We’ve got CMS structures to enable this: —Matrix (Expression Engine,

    Craft) —ACF FCF (WordPress) —Paragraphs (Drupal)
  14. We’ve got Pattern Library frameworks Pattern Lab: patternlab.io Fractal: fractal.build

    (See styleguides.io for more.)
  15. We’ve got an entire books on ways to do this:

    —Front-End Style Guides by Anna Debenham —Atomic Design by Brad Frost —Modular Web Design by Nathan Curtis
  16. So What’s the Problem?

  17. The Problem is Us. More specifically, humans. Even more specifically,

  18. Small Goals If you can talk about specific things using

    the same words, you’ve accomplished something.
  19. …we should start with language, not interfaces1 — Alla Kholmatova

    1 “The Language of Modular Design” by Alla Kholmatova
  20. —Establish consensus —Name modules (components) by function, not position

  21. Do this together.

  22. Multi-disciplinary teams —content person —designer —developer —(creative director)

  23. Consensus > Best Laid Plans

  24. Example: —“Billboard” vs “Promo” —“Callout” vs “House Ad” Sometimes you

    have to adopt language to move forward.
  25. Liminal Spaces (In-between)

  26. …when thinking about patterns, content strategists are primarily thinking about

    Content patterns,
  27. designers are primarily thinking about Display patterns, and

  28. front-end developers are responsible for bringing the two together.2 —

    Daniel Mall 2 “Content & Display Patterns” by Daniel Mall
  29. Content Patterns —Words —Post-Its / notecards —With lots of tape

    —Helpful question: what does this need to be successful/complete?
  30. This can get messy.

  31. This can get messy.

  32. None
  33. Display Patterns —Wires, usually —Low-res or high-res? Up to the

    designer —Combine design snippets with wires to run design/concept exploration on a parallel track
  34. Problems with Doing This in Sequence —All the cards can

    be too abstract —Wires alone hide complexity —People absorb info differently. There’s a chicken/ egg problem.
  35. Work in the middle —Mash your Content and Design Patterns

    together early
  36. Cards and Wires

  37. Cards and Wires

  38. Derive Your Patterns

  39. Derive Your Patterns

  40. Work in the middle —Mash your Content and Design Patterns

    together early —Cut up your wireframes, and start stacking similar modules/components. That allows you to start seeing redundancy
  41. Get Into the Browser Early

  42. None
  43. None
  44. Photo: Justin Grimes (https://www.flickr.com/photos/notbrucelee/5696237908/) CC BY-SA 2.0

  45. Show Patterns in Context

  46. —Have an opinion: is this visual pattern appropriate for this

    content type? —Situate your components in a scenario —If your collective team understands the small pattern, they also need to understand its interplay with other patterns —Build “Presets” for your client—can be in your documentation, can be unpublished nodes to clone in the CMS admin
  47. Example Pattern Documentation

  48. Pattern Index

  49. None
  50. Pattern Context

  51. None
  52. Template Combinations

  53. None
  54. Combinations —Cards <—> Wires —Small Pattern <—> Collection of Patterns

  55. Narrow the abstraction gap

  56. Hooking up to the CMS

  57. (Possibly) Helpful Translations —Content Pattern == Content Type or Paragraph

    Bundle —Display Pattern == template (tpl/twig) file —Collection == Page/Node/View template
  58. Shortcodes drupal.org/project/shortcode Use this for WYSIWYG stuff that doesn’t have

    a ton of structure. —Pull Quotes —Tables —Lists —Images (L/R/C, Full-bleed)
  59. WYSIWYG Style Preset

  60. Paragraphs —drupal.org/project/paragraphs —We came in sideways via Matrix (Expression Engine,

    Craft) and ACF Flexible Content Field (WordPress) —I hate the name, but they are super useful —Structured data, with flexibility
  61. Mapping to Paragraph Bundles

  62. Example: Princeton Admission Flexible Grid

  63. None
  64. —Flex Grid Row: Full —Flex Grid Row: Half plus Half

    —Flex Grid Row: Half plus Quarter —Flex Grid Row: Quarter plus Half
  65. —Flex Grid Column: Full Width Custom —Flex Grid Column: Full

    Width - Image Left —Flex Grid Column: Full Width - Image Right
  66. —Flex Grid Column: Half Width - Split Image Left —Flex

    Grid Column: Half Width - Split Image Right —Flex Grid Column: Half Width - Image —Flex Grid Column: Half Width - Text —Flex Grid Column: Half Width Video Custom —Flex Grid Column: Half Width Custom —Flex Grid Column: Half Width News and Announcements
  67. —Flex Grid Column: Quarter Width Custom —Flex Grid Column: Quarter

    - Image —Flex Grid Column: Quarter - Text
  68. 17(!!)

  69. What can you do?

  70. Building a Cake (Site) in Layers

  71. None
  72. None
  73. None
  74. None
  75. None
  76. Building a Cake (Site) in Slices

  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. Give the Complexity Time to Settle In

  86. Focused Practice

  87. None
  88. Next Steps/Hopes and Dreams —Getting context into the CMS authoring

    environment —Follow Eileen Webb’s work (@webmeadow) on Authoring Experience (AX)
  89. twitter.com/webmeadow/status/ 809074672012660736

  90. None
  91. Holy Grail —Style Guide -> CMS -> Style Guide —Visual,

    contextual cues in edit form
  92. To Recap —Start with language —Work in the middle/narrow the

    abstraction gap —Show things in context —Build in slices—get your client focused practice in their CMS
  93. Thank you.

  94. Join Us for Contribution Sprints

  95. First-Time Sprinter Workshop: 9:00am-12:00pm, Room: 307-308 Mentored Core Sprint: 9:00am-12:00pm,

    Room: 301-303 General Sprints: 9:00am-6:00pm, Room: 309-310
  96. Mark Llobrera Technology Director, Bluecadet Philadelphia @dirtystylus @bluecadet https://events.drupal.org/node/17514