Drupalcon 2017: Pattern Language: Pattern Libraries in the Wild

Transcript

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- element-collages/
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, language.
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.
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
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
50. Pattern Context
52. Template Combinations
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
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
76. Building a Cake (Site) in Slices
85. Give the Complexity Time to Settle In
86. Focused Practice
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
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