Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Recoupling

675 views

Published on

Bridging structured content with future-friendly design. Presented at Confab Intensive 2016!

Published in: Marketing
  • Hi there! Get Your Professional Job-Winning Resume Here - Check our website! http://bit.ly/resumpro
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Recoupling

  1. 1. recoupling jeff eaton
 confab intensive 2016
 twitter.com/eaton
  2. 2. hi! i’m @eaton.
  3. 3. hi! i’m @eaton. i work for lullabot.
  4. 4. hi! i’m @eaton. i work for lullabot. strategy, design, development
  5. 5. those messages belong in your content model.
  6. 6. those messages belong in your content model. visualdesign communicates important messages.
  7. 7. those messages belong in your content model. visualdesign communicates important messages. those messages belong in your content model.
  8. 8. ye olde schedule ‣ “decoupling” and structured content ‣ the language ofdesign break ‣ capturing design messages ‣ a field guide to design structures
  9. 9. structured content and its discontents
  10. 10. Page
  11. 11. Title Author Photo Body Pullquote Article
  12. 12. Title Author Photo Body Pullquote Article Title Body Date Location Cost Event
  13. 13. Title Author Photo Body Pullquote Article
  14. 14. Title Author Photo Body Pullquote Article
  15. 15. MediaMediaMediaPlate Recipe Step Ingredient Technique Media SeasonVarietal
  16. 16. NPR C.O.P.E.
  17. 17. NPR C.O.P.E. Desktop
  18. 18. NPR C.O.P.E. Desktop Mobile
  19. 19. NPR C.O.P.E. Desktop Mobile iPhone
  20. 20. NPR C.O.P.E. Desktop Mobile iPhone Android
  21. 21. NPR C.O.P.E. Desktop Mobile iPhone Android Partner
  22. 22. NPR C.O.P.E. Desktop Mobile iPhone Android Partner Microsite
  23. 23. NPR C.O.P.E. Desktop Mobile iPhone Android Partner Microsite Youtube
  24. 24. NPR C.O.P.E. Desktop Mobile iPhone Android Partner Microsite Youtube Social
  25. 25. Story Program Series Blog
  26. 26. ‣ 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
  27. 27. content is meaningful,
 visualdesign is decorative.
  28. 28. content is meaningful,
 visualdesign is decorative. wrong
  29. 29. we will build the perfect modelwith no design assumptions
  30. 30. wait for it
  31. 31. wait for it
  32. 32. monotony monotony monotony monotony monotone
  33. 33. iPhone headline color field
  34. 34. iPhone headline color field …2
  35. 35. and have i mentioned the home page?
  36. 36. and have i mentioned the home page?
  37. 37. 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
  38. 38. exercise time! ‣ web page makin’ ‣ prioritize ‣ emphasize ‣ jazzercize
  39. 39. exercise time! ‣ web page makin’ ‣ prioritize ‣ emphasize ‣ jazzercize product category ‣ name ‣ description ‣ features ‣ requirements ‣ photos ‣ price ‣ related products
  40. 40. ‣ did you include everything? ‣ howdid you decide what was important? ‣ would someone else make the same choices?
  41. 41. communicate vs. decorate
  42. 42. “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
  43. 43. “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
  44. 44. what design communicates ‣ what’s the most important ‣ what belongs together, and why ‣ what kind ofthing is this ‣ what comes next
  45. 45. how design communicates ‣ proximity and density ‣ pattern and repetition ‣ color, shape, and size ‣ order and placement
  46. 46. modelthe message deferthe aesthetics
  47. 47. break time! ‣ snacks ‣ conversation ‣ coffee
  48. 48. ‣ did you include everything? ‣ howdid you decide what was important? ‣ would someone else make the same choices?
  49. 49. real-world examples
  50. 50. emphasis msnbc lets editors call out each article’s most compelling element
  51. 51. topic story emphasis
  52. 52. topic story emphasis
  53. 53. topic story emphasis
  54. 54. narrative sequence galileo’s world strings artifacts into a story about the astronomer’s accomplishments
  55. 55. resource exhibit period region theme
  56. 56. priority, emphasis, curation, style… nbc universal’s decoupled api captures multiple design choices as structured data
  57. 57. Container entities ContainerContainerscollections priority callout emphasis style
  58. 58. Container entities ContainerContainerscollections priority callout emphasis style
  59. 59. complexity the guardian goes beyond sections and topics for its front page story categorization
  60. 60. story complexity section
  61. 61. relevance angie’s list tags services by level-of-urgency to prioritize appropriate calls to action
  62. 62. ContainerContainerContainersservice urgency demographics selection average price ratings search keywords
  63. 63. common patterns ‣ curated & automatic collections ‣ meaningful relationships ‣ inferred meaning where possible ‣ “front-end hints” in metadata ‣ carefully chosen nouns
  64. 64. exercise time! ‣ identifyvisualvariations ‣ decide what each variation communicates ‣ name that message
  65. 65. ‣ would an editor understand it? ‣ does the content model already include it? ‣ could it applyto a newdesign?
  66. 66. a field guide
  67. 67. data-driven templating ‣ many of one kind ‣ varied asset combos ‣ style, layout variation ‣ easyto build & scale
  68. 68. component embedding ‣ linear narrative ‣ supporting elements ‣ placement matters ‣ starts with rich media
  69. 69. component embedding ‣ linear narrative ‣ supporting elements ‣ placement matters ‣ starts with rich media
  70. 70. stacked components ‣ high per-page variation ‣ page-wide narrative ‣ discrete chunks ‣ increasingly popular
  71. 71. stacked components ‣ high per-page variation ‣ page-wide narrative ‣ discrete chunks ‣ increasingly popular
  72. 72. combined collections ‣ collections, often nested ‣ curated or automated ‣ page as a container ‣ landing & home pages
  73. 73. combined collections ‣ collections, often nested ‣ curated or automated ‣ page as a container ‣ landing & home pages
  74. 74. combined collections ‣ collections, often nested ‣ curated or automated ‣ page as a container ‣ landing & home pages
  75. 75. nowyou can do it, too
  76. 76. identifyvisual patterns ‣ stylistic variations ‣ contextual cues ‣ groupings and clusters ‣ use the blurtest
  77. 77. identifyvisual patterns ‣ stylistic variations ‣ contextual cues ‣ groupings and clusters ‣ use the blurtest
  78. 78. identifyvisual patterns ‣ stylistic variations ‣ contextual cues ‣ groupings and clusters ‣ use the blurtest
  79. 79. identify meaning & message ‣ describe purpose, not appearance ‣ brainstorm alternate treatments ‣ prefer editor/stakeholdervocabulary ‣ hooray, you’re a taxonomist!
  80. 80. 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?
  81. 81. visual patterns meaning and message content structure
  82. 82. visual patterns meaning and message content structure
  83. 83. good design process* will add new meaning
  84. 84. good design process* will add new meaning *platonic modeling can’t do it all
  85. 85. exercise time! ‣ pick a “design message” ‣ brainstorm an alternate treatment ‣ brainstorm a different channel
  86. 86. ‣ what did you come up with? ‣ did knowing the intent help? ‣ howdid it affect conversations?
  87. 87. the 50,000 foot view
  88. 88. ‣ 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
  89. 89. relevant to your interests
  90. 90. question time!

×