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.
Better Content by Design Lisa Herrod: Scenario Seven Open Publish: August 2007
Content Design 2 approaches 5 stages
what is web content?
video <ul><li>educational  </li></ul><ul><li>social </li></ul><ul><li>promotional </li></ul>
audio <ul><li>sound tracks interviews  </li></ul><ul><li>news  </li></ul><ul><li>music  </li></ul><ul><li>pod casts </li><...
images <ul><li>Support content </li></ul><ul><li>Are content </li></ul><ul><li>Generate discussion </li></ul>
Text as Content
text <ul><li>page titles </li></ul><ul><li>page headings </li></ul><ul><li>navigation labels </li></ul><ul><li>site conten...
text <ul><li>page titles </li></ul><ul><li>page headings </li></ul><ul><li>navigation labels </li></ul><ul><li>site conten...
text <ul><li>page titles </li></ul><ul><li>page headings </li></ul><ul><li>navigation labels </li></ul><ul><li>site conten...
text <ul><li>page titles </li></ul><ul><li>page headings </li></ul><ul><li>navigation labels </li></ul><ul><li>site conten...
Content Design
what is design? <ul><li>A  deliberate  decision  </li></ul><ul><li>To  enhance  the  value  of an object </li></ul>
raw   text
Best Practice  Content Design
two approaches <ul><li>technical </li></ul><ul><li>human </li></ul>
User Focused Development   User Centred Design  technical human
User Focused Development Standards compliant Accessible Semantic
User Centred Design    User research User focus User testing
Content Design should take an integrated approach
a ground-up approach
five stages <ul><li>Content </li></ul><ul><li>Interactivity </li></ul><ul><li>Visual design </li></ul><ul><li>Structure </...
Design stage Design approach content structure visual design interactivity User research, Writing for the web  Semantics, ...
content <ul><li>Written for the web </li></ul><ul><li>User focus </li></ul><ul><li>Plain English </li></ul><ul><li>Shorter...
 
 
structure <ul><li>Separate content </li></ul><ul><li>Source order </li></ul><ul><li>Semantic  </li></ul><ul><li>Accessible...
Headings, lists, paragraphs, images, emphasis, block quotes, tables, forms
visual design <ul><li>Separate design  CSS </li></ul><ul><li>Colour contrast </li></ul><ul><li>Visual hierarchy </li></ul>...
visual design <ul><li>Separate design  CSS </li></ul><ul><li>Colour contrast </li></ul><ul><li>Visual hierarchy </li></ul>...
 
 
interactivity Should enhance  usability accessibility content Unobtrusive methods W3C supported format
Interactive Content
 
Static Content
 
Progressive  Content Design
an  integrated  approach human and technical
Begin and End with content
questions...?
Lisa Herrod Scenario Seven [email_address] Better Content by Design
Upcoming SlideShare
Loading in …5
×

Better Content by Design

5,146 views

Published on

This presentation discusses a best practice approach to content development, with a focus on text as content, using progressive content development techniques.

Published in: Technology, Design
  • Be the first to comment

Better Content by Design

  1. 1. Better Content by Design Lisa Herrod: Scenario Seven Open Publish: August 2007
  2. 2. Content Design 2 approaches 5 stages
  3. 3. what is web content?
  4. 4. video <ul><li>educational </li></ul><ul><li>social </li></ul><ul><li>promotional </li></ul>
  5. 5. audio <ul><li>sound tracks interviews </li></ul><ul><li>news </li></ul><ul><li>music </li></ul><ul><li>pod casts </li></ul><ul><li>radio streaming </li></ul>
  6. 6. images <ul><li>Support content </li></ul><ul><li>Are content </li></ul><ul><li>Generate discussion </li></ul>
  7. 7. Text as Content
  8. 8. text <ul><li>page titles </li></ul><ul><li>page headings </li></ul><ul><li>navigation labels </li></ul><ul><li>site content </li></ul>
  9. 9. text <ul><li>page titles </li></ul><ul><li>page headings </li></ul><ul><li>navigation labels </li></ul><ul><li>site content </li></ul>
  10. 10. text <ul><li>page titles </li></ul><ul><li>page headings </li></ul><ul><li>navigation labels </li></ul><ul><li>site content </li></ul>
  11. 11. text <ul><li>page titles </li></ul><ul><li>page headings </li></ul><ul><li>navigation labels </li></ul><ul><li>site content </li></ul>
  12. 12. Content Design
  13. 13. what is design? <ul><li>A deliberate decision </li></ul><ul><li>To enhance the value of an object </li></ul>
  14. 14. raw text
  15. 15. Best Practice Content Design
  16. 16. two approaches <ul><li>technical </li></ul><ul><li>human </li></ul>
  17. 17. User Focused Development User Centred Design technical human
  18. 18. User Focused Development Standards compliant Accessible Semantic
  19. 19. User Centred Design User research User focus User testing
  20. 20. Content Design should take an integrated approach
  21. 21. a ground-up approach
  22. 22. five stages <ul><li>Content </li></ul><ul><li>Interactivity </li></ul><ul><li>Visual design </li></ul><ul><li>Structure </li></ul><ul><li>Content </li></ul>
  23. 23. Design stage Design approach content structure visual design interactivity User research, Writing for the web Semantics, Standards CSS, Separate presentation Standards, Progressive enhancement content User research
  24. 24. content <ul><li>Written for the web </li></ul><ul><li>User focus </li></ul><ul><li>Plain English </li></ul><ul><li>Shorter sentences </li></ul><ul><li>Journalistic </li></ul>
  25. 27. structure <ul><li>Separate content </li></ul><ul><li>Source order </li></ul><ul><li>Semantic </li></ul><ul><li>Accessible </li></ul>
  26. 28. Headings, lists, paragraphs, images, emphasis, block quotes, tables, forms
  27. 29. visual design <ul><li>Separate design CSS </li></ul><ul><li>Colour contrast </li></ul><ul><li>Visual hierarchy </li></ul><ul><li>Page layout </li></ul><ul><li>White space </li></ul><ul><li>Typography Sans-serif </li></ul>
  28. 30. visual design <ul><li>Separate design CSS </li></ul><ul><li>Colour contrast </li></ul><ul><li>Visual hierarchy </li></ul><ul><li>Page layout </li></ul><ul><li>White space </li></ul><ul><li>Typography Sans-serif </li></ul>
  29. 33. interactivity Should enhance usability accessibility content Unobtrusive methods W3C supported format
  30. 34. Interactive Content
  31. 36. Static Content
  32. 38. Progressive Content Design
  33. 39. an integrated approach human and technical
  34. 40. Begin and End with content
  35. 41. questions...?
  36. 42. Lisa Herrod Scenario Seven [email_address] Better Content by Design

×