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

4,638

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
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,638
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
158
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×