We’ve got Pattern Library frameworks
Pattern Lab: patternlab.io
Fractal: fractal.build
(See styleguides.io for more.)
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
So What’s
the Problem?
Slide 17
Slide 17 text
The Problem is Us.
More specifically, humans.
Even more specifically, language.
Slide 18
Slide 18 text
Small Goals
If you can talk about specific things
using the same words,
you’ve accomplished something.
Slide 19
Slide 19 text
…we should start with
language, not interfaces1
— Alla Kholmatova
1 “The Language of Modular Design” by Alla Kholmatova
Slide 20
Slide 20 text
—Establish consensus
—Name modules (components) by function, not
position
Slide 21
Slide 21 text
Do this together.
Slide 22
Slide 22 text
Multi-disciplinary teams
—content person
—designer
—developer
—(creative director)
Slide 23
Slide 23 text
Consensus > Best Laid
Plans
Slide 24
Slide 24 text
Example:
—“Billboard” vs “Promo”
—“Callout” vs “House Ad”
Sometimes you have to adopt
language
to move forward.
Slide 25
Slide 25 text
Liminal Spaces
(In-between)
Slide 26
Slide 26 text
…when thinking about
patterns, content
strategists are primarily
thinking about Content
patterns,
Slide 27
Slide 27 text
designers are primarily
thinking about Display
patterns, and
Slide 28
Slide 28 text
front-end developers are
responsible for bringing
the two together.2
— Daniel Mall
2 “Content & Display Patterns” by Daniel Mall
Slide 29
Slide 29 text
Content Patterns
—Words
—Post-Its / notecards
—With lots of tape
—Helpful question: what does this need to be
successful/complete?
Slide 30
Slide 30 text
This can get messy.
Slide 31
Slide 31 text
This can get messy.
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
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.
Slide 35
Slide 35 text
Work in the middle
—Mash your Content and Design Patterns together
early
Slide 36
Slide 36 text
Cards and Wires
Slide 37
Slide 37 text
Cards and Wires
Slide 38
Slide 38 text
Derive Your Patterns
Slide 39
Slide 39 text
Derive Your Patterns
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
Get Into the
Browser Early
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Photo: Justin Grimes (https://www.flickr.com/photos/notbrucelee/5696237908/) CC BY-SA 2.0
Slide 45
Slide 45 text
Show Patterns
in Context
Slide 46
Slide 46 text
—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
Slide 47
Slide 47 text
Example Pattern
Documentation
Slide 48
Slide 48 text
Pattern Index
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Pattern Context
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
Template Combinations
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Combinations
—Cards <—> Wires
—Small Pattern <—> Collection of Patterns
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)
Slide 59
Slide 59 text
WYSIWYG Style
Preset
Slide 60
Slide 60 text
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
Slide 61
Slide 61 text
Mapping to
Paragraph
Bundles
Slide 62
Slide 62 text
Example: Princeton
Admission
Flexible Grid
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
—Flex Grid Row: Full
—Flex Grid Row: Half plus Half
—Flex Grid Row: Half plus
Quarter
—Flex Grid Row: Quarter plus
Half
Slide 65
Slide 65 text
—Flex Grid Column: Full Width Custom
—Flex Grid Column: Full Width - Image Left
—Flex Grid Column: Full Width - Image Right
Next Steps/Hopes and Dreams
—Getting context into the CMS authoring
environment
—Follow Eileen Webb’s work (@webmeadow) on
Authoring Experience (AX)
Slide 89
Slide 89 text
twitter.com/webmeadow/status/
809074672012660736
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
Holy Grail
—Style Guide -> CMS -> Style Guide
—Visual, contextual cues in edit form
Slide 92
Slide 92 text
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