Recoupling
ā¢
1 likeā¢1,250 views
Bridging structured content with future-friendly design. Presented at Confab Intensive 2016!
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Recoupling
Similar to Recoupling (20)
More from Jeff Eaton
More from Jeff Eaton (15)
Recently uploaded
Recently uploaded (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 ļ¬eld 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 ļ¬eld 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!