Successfully reported this slideshow.
Your SlideShare is downloading. ×

Better Content by Design

Better Content by Design

Download to read offline

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

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

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

Editor's Notes

×