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.
WEB101
Web Design for Everyone
Our Topic!
Writing for the
Web
Before we can learn
about writing for
the web...
We need to
understanding
reading on the web.
How do people read
on the Web?
They don’t!
How do people read
on the Web?
They read 18% of
what you write.
Which means...
• People are scanning
• So make your text scannable
• Bulleted lists, headings, highlighted
keywords, short...
How people look at
your website
• No one reads anything thoroughly
• State the important stuff right away
• Start subheads...
How people look at
your website
Who reads your
website
• Write for a 6th grade reading level on
certain pages
• Write for 8th grade reading level on
other...
Now, onto the
writing!
Print vs. web:
FIGHT!
• Headlines
• Keywords
• Storytelling vs. actionable
• Linear vs. non-linear
• Actionably needy
Taglines
• Support the logo in telling a user where
they are
• Ask yourself two questions
• Exercise time!
Can you match the
tagline to the company?
Companies:
A. Lucent
B. ZDNET
C. Sun Microsystems
D. Oracle
Taglines:
1. The net...
Taglines: good
Active Voice
• Kim loves writing.
• Writing is loved by Kim.
• Gets to the point faster
• Positive statements (do this vs....
Repetition
• No more than 2 times
• Say it differently
• Not to be used for SEO
Repetition: good
Repetition: bad
Headlines
• Not an easy feat
• Keep ‘em short
• Keep ‘em rich in information
• Make sure they’re understood out of
context...
Headlines: good
Headlines: bad
Keywords
• People all use the same words
• “Short words are the best and old words
when short are the best of all” - Winst...
Keywords
Corporate Real person
Price estimate Quote
Investment Price/Rate
Apply for an account Open account
Fees Costs
Numbers
• What you learned in high school doesn’t
apply to the Web
• Always use digits, not letters, no matter
what
• Oh, ...
Hypertext links
• Use plain language
• Use specific terminology
• Front load action and user items
• Be clear about what’s...
Hypertext links:
good
Hypertext links:
bad
We’re positioned in the ‘Leaders’ Quadrant for printers and MFPs
Learn more about the Gartner Magic Q...
Microcopy
• Buttons
• Form fields
• Instructions
• Branding
• URLs
• Email addresses
Microcopy: buttons
• Mix ‘em up
• Be descriptive
• Be informative
• Repeat information, differently
• Have fun!
Microcopy: buttons
Microcopy: buttons
Microcopy:
instructions
Microcopy:
branding
Upcoming SlideShare
Loading in …5
×

Web101: What designers need to know about writing for the web

2,077 views

Published on

Presentation given to the AIGA Arizona's Web 101 class by Kim Higdon on October 28, 2010

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

Web101: What designers need to know about writing for the web

  1. 1. WEB101 Web Design for Everyone
  2. 2. Our Topic! Writing for the Web
  3. 3. Before we can learn about writing for the web...
  4. 4. We need to understanding reading on the web.
  5. 5. How do people read on the Web? They don’t!
  6. 6. How do people read on the Web? They read 18% of what you write.
  7. 7. Which means... • People are scanning • So make your text scannable • Bulleted lists, headings, highlighted keywords, short paragraphs • 1/2 the word count • Make it worth reading
  8. 8. How people look at your website • No one reads anything thoroughly • State the important stuff right away • Start subheads with vital information • Make it scannable!
  9. 9. How people look at your website
  10. 10. Who reads your website • Write for a 6th grade reading level on certain pages • Write for 8th grade reading level on others • Prioritize information • Improving usability for low-literacy users increases usability for everyone
  11. 11. Now, onto the writing!
  12. 12. Print vs. web: FIGHT! • Headlines • Keywords • Storytelling vs. actionable • Linear vs. non-linear • Actionably needy
  13. 13. Taglines • Support the logo in telling a user where they are • Ask yourself two questions • Exercise time!
  14. 14. Can you match the tagline to the company? Companies: A. Lucent B. ZDNET C. Sun Microsystems D. Oracle Taglines: 1. The network is the computer 2. Software powers the internet 3. Where technology means business 4. Creating value through true convergence
  15. 15. Taglines: good
  16. 16. Active Voice • Kim loves writing. • Writing is loved by Kim. • Gets to the point faster • Positive statements (do this vs. avoid doing this) • Occasions for passive voice (SEO)
  17. 17. Repetition • No more than 2 times • Say it differently • Not to be used for SEO
  18. 18. Repetition: good
  19. 19. Repetition: bad
  20. 20. Headlines • Not an easy feat • Keep ‘em short • Keep ‘em rich in information • Make sure they’re understood out of context • Predictable: break trust and you lose.
  21. 21. Headlines: good
  22. 22. Headlines: bad
  23. 23. Keywords • People all use the same words • “Short words are the best and old words when short are the best of all” - Winston Churchill • Tie new words with old words • Use trigger words
  24. 24. Keywords Corporate Real person Price estimate Quote Investment Price/Rate Apply for an account Open account Fees Costs
  25. 25. Numbers • What you learned in high school doesn’t apply to the Web • Always use digits, not letters, no matter what • Oh, except when numbers don’t mean specific facts
  26. 26. Hypertext links • Use plain language • Use specific terminology • Front load action and user items • Be clear about what’s behind the link • Make sure it’s different from other links • Don’t mislead or promise too much
  27. 27. Hypertext links: good
  28. 28. Hypertext links: bad We’re positioned in the ‘Leaders’ Quadrant for printers and MFPs Learn more about the Gartner Magic Quadrant distinction
  29. 29. Microcopy • Buttons • Form fields • Instructions • Branding • URLs • Email addresses
  30. 30. Microcopy: buttons • Mix ‘em up • Be descriptive • Be informative • Repeat information, differently • Have fun!
  31. 31. Microcopy: buttons
  32. 32. Microcopy: buttons
  33. 33. Microcopy: instructions
  34. 34. Microcopy: branding

×