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
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
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.
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
—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
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)
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
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
mllobrera
junjikoide
daikimori
takatsunobuhiro
mitsuakitohei
takuyay0ne
yellowshippo
n1ru4l
ama_ch
masakamayama
yosuke_furukawa
sadonosake
wernerkrauss
phodgson
shlominoach
holman
geeforr
zakiyama
sachag
eileencodes
jacobian
aleyda
jcasabona
3n
marktimemedia