Recoupling
•
1 j'aime•1,250 vues
Bridging structured content with future-friendly design. Presented at Confab Intensive 2016!
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à Recoupling
Similaire à Recoupling (20)
Plus de Jeff Eaton
Plus de Jeff Eaton (15)
Dernier
Dernier (20)
Recoupling
- 1. recoupling jeff eaton confab intensive 2016 twitter.com/eaton
- 3. hi! i’m @eaton. i work for lullabot.
- 4. hi! i’m @eaton. i work for lullabot. strategy, design, development
- 7. those messages belong in your content model.
- 8. those messages belong in your content model. visualdesign communicates important messages.
- 9. those messages belong in your content model. visualdesign communicates important messages. those messages belong in your content model.
- 10. ye olde schedule ‣ “decoupling” and structured content ‣ the language ofdesign break ‣ capturing design messages ‣ a field guide to design structures
- 12. structured content and its discontents
- 13. Page
- 25. NPR C.O.P.E.
- 35. ‣ title ‣ subtitle ‣ shortTitle ‣ teaser ‣ miniTeaser ‣ slug ‣ text ‣ textWithHtml ‣ thumbnail ‣ storyDate ‣ pubDate ‣ audio ‣ audioDuration ‣ audioDescription ‣ audioMp3 ‣ image ‣ pullQuote ‣ relatedLink ‣ keywords ‣ organization ‣ listText ‣ correction Story Program Series Blog
- 36. content is meaningful, visualdesign is decorative.
- 37. content is meaningful, visualdesign is decorative. wrong
- 38. we will build the perfect modelwith no design assumptions
- 39. wait for it
- 40. wait for it
- 47. and have i mentioned the home page?
- 48. and have i mentioned the home page?
- 49. naïvely structured content ‣ misses tone, voice, and emphasis ‣ ignores editorial curation, aggregation ‣ strips content of important meaning ‣ accumulates hacks and workarounds ‣ inevitably jams “design” information somewhere
- 50. exercise time! ‣ web page makin’ ‣ prioritize ‣ emphasize ‣ jazzercize
- 51. exercise time! ‣ web page makin’ ‣ prioritize ‣ emphasize ‣ jazzercize product category ‣ name ‣ description ‣ features ‣ requirements ‣ photos ‣ price ‣ related products
- 52. ‣ did you include everything? ‣ howdid you decide what was important? ‣ would someone else make the same choices?
- 57. “Graphicaldecoration, which prospers in technical publications as well as in commercial and media graphics, comes cheaperthan the hard work required to produce intriguing numbers and secure evidence. Edward Tufte, The Visual Display of Quantitative Information
- 58. “Graphicaldecoration, which prospers in technical publications as well as in commercial and media graphics, comes cheaperthan the hard work required to produce intriguing numbers and secure evidence. Edward Tufte, The Visual Display of Quantitative Information
- 67. what design communicates ‣ what’s the most important ‣ what belongs together, and why ‣ what kind ofthing is this ‣ what comes next
- 68. how design communicates ‣ proximity and density ‣ pattern and repetition ‣ color, shape, and size ‣ order and placement
- 70. break time! ‣ snacks ‣ conversation ‣ coffee
- 71. ‣ did you include everything? ‣ howdid you decide what was important? ‣ would someone else make the same choices?
- 74. emphasis msnbc lets editors call out each article’s most compelling element
- 78. narrative sequence galileo’s world strings artifacts into a story about the astronomer’s accomplishments
- 82. priority, emphasis, curation, style… nbc universal’s decoupled api captures multiple design choices as structured data
- 87. complexity the guardian goes beyond sections and topics for its front page story categorization
- 91. relevance angie’s list tags services by level-of-urgency to prioritize appropriate calls to action
- 95. common patterns ‣ curated & automatic collections ‣ meaningful relationships ‣ inferred meaning where possible ‣ “front-end hints” in metadata ‣ carefully chosen nouns
- 96. exercise time! ‣ identifyvisualvariations ‣ decide what each variation communicates ‣ name that message
- 97. ‣ would an editor understand it? ‣ does the content model already include it? ‣ could it applyto a newdesign?
- 99. a field guide
- 100. data-driven templating ‣ many of one kind ‣ varied asset combos ‣ style, layout variation ‣ easyto build & scale
- 101. component embedding ‣ linear narrative ‣ supporting elements ‣ placement matters ‣ starts with rich media
- 102. component embedding ‣ linear narrative ‣ supporting elements ‣ placement matters ‣ starts with rich media
- 103. stacked components ‣ high per-page variation ‣ page-wide narrative ‣ discrete chunks ‣ increasingly popular
- 104. stacked components ‣ high per-page variation ‣ page-wide narrative ‣ discrete chunks ‣ increasingly popular
- 105. combined collections ‣ collections, often nested ‣ curated or automated ‣ page as a container ‣ landing & home pages
- 106. combined collections ‣ collections, often nested ‣ curated or automated ‣ page as a container ‣ landing & home pages
- 107. combined collections ‣ collections, often nested ‣ curated or automated ‣ page as a container ‣ landing & home pages
- 109. nowyou can do it, too
- 110. identifyvisual patterns ‣ stylistic variations ‣ contextual cues ‣ groupings and clusters ‣ use the blurtest
- 111. identifyvisual patterns ‣ stylistic variations ‣ contextual cues ‣ groupings and clusters ‣ use the blurtest
- 112. identifyvisual patterns ‣ stylistic variations ‣ contextual cues ‣ groupings and clusters ‣ use the blurtest
- 113. identify meaning & message ‣ describe purpose, not appearance ‣ brainstorm alternate treatments ‣ prefer editor/stakeholdervocabulary ‣ hooray, you’re a taxonomist!
- 114. map to the model ‣ does it exist as a property ‣ can we extrapolate from properties or context? ‣ does it require a new property? ‣ will it require a new content entity?
- 117. good design process* will add new meaning
- 118. good design process* will add new meaning *platonic modeling can’t do it all
- 119. exercise time! ‣ pick a “design message” ‣ brainstorm an alternate treatment ‣ brainstorm a different channel
- 120. ‣ what did you come up with? ‣ did knowing the intent help? ‣ howdid it affect conversations?
- 122. the 50,000 foot view
- 123. ‣ structured content is the bomb ‣ design communicates important messages ‣ capture the message, defer the aesthetic ‣ watch for emergent design messages ‣ remember: modeling design is a sign of respect
- 124. relevant to your interests
- 125. question time!