Kickstart your content stratgey with html wireframes

335 views
286 views

Published on

Home-grown html wireframes can be quickly built to offer proof of concept in the eraly stages of working out an IA with a client, and helps get them thinking about their content strategy.

Published in: Education, Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
335
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Kickstart your content stratgey with html wireframes

  1. 1. Interactive responsive wireframes: Kickstart your content strategy! Tom Pixton, Communications Specialist Communication Production Services Massachusetts Institute of Technology tpixton@mit.edu @tpixton Massachusetts Institute of Technology Communication Production Services
  2. 2. What we’ll cover Three techniques to help you or your site owners raise awareness of content strategy using html wireframes. Massachusetts Institute of Technology Communication Production Services
  3. 3. But first, some background... Massachusetts Institute of Technology Communication Production Services
  4. 4. Changes since 2000 Massachusetts Institute of Technology Communication Production Services
  5. 5. Changes since 2000 1. Larger screen size and resolutions Massachusetts Institute of Technology Communication Production Services
  6. 6. Changes since 2000 1. Larger screen size and resolutions 2. Faster network speed Massachusetts Institute of Technology Communication Production Services
  7. 7. Changes since 2000 1. Larger screen size and resolutions 2. Faster network speed 3. Accessible rich media (jquery, html5, css3) Massachusetts Institute of Technology Communication Production Services
  8. 8. Changes since 2000 1. Larger screen size and resolutions 2. Faster network speed 3. Accessible rich media (jquery, html5, css3) 4. Wider range of channels on which to reach our audiences Massachusetts Institute of Technology Communication Production Services
  9. 9. Changes since 2000 1. Larger screen size and resolutions 2. Faster network speed 3. Accessible rich media (jquery, html5, css3) 4. Wider range of channels on which to reach our audiences 5. Web fonts Massachusetts Institute of Technology Communication Production Services
  10. 10. Changes since 2000 1. Larger screen size and resolutions 2. Faster network speed 3. Accessible rich media (jquery, html5, css3) 4. Wider range of channels on which to reach our audiences 5. Web fonts 6. Mobile web Massachusetts Institute of Technology Communication Production Services
  11. 11. What has not changed since 2000? The challenge of advocating for the content. A site’s content is its best asset. But it is usually the one asset that has the least allocated resources. Massachusetts Institute of Technology Communication Production Services
  12. 12. Content: Writing Images Blog posts RSS feeds Social media channels Video Content strategy: Pulling it all together... Massachusetts Institute of Technology Communication Production Services
  13. 13. “It’s an open secret in our daily work how often the challenges posed by content elude our collective talents and acumen.” Jeffery MacIntyre, “Content-tious Strategy” http://alistapart.com/article/contenttiousstrategy Massachusetts Institute of Technology Communication Production Services
  14. 14. “But one step in the web development process is often skipped over or forgotten altogether: content planning.” Kristin Wemmer, “Starting Out Organized: Website Content Planning The Right Way” www.smashingmagazine.com/2010/03/17/starting-out-organized-websitecontent-planning-the-right-way/ Massachusetts Institute of Technology Communication Production Services
  15. 15. “You design first, then plug in the content later, instead of designing from the content out.” Jonathan Colman, “Why Our Content Sucks” http://www.jonathoncolman.org/2013/02/24/why-our-content-sucks/ Massachusetts Institute of Technology Communication Production Services
  16. 16. “Our content dialogue needs to engage the broader, nonspecialist community of content producers and consumers alike.” Jeffery MacIntyre, “Content-tious Strategy” http://alistapart.com/article/contenttiousstrategy Massachusetts Institute of Technology Communication Production Services
  17. 17. Kristina Halverson http://contentstrategy.com/ Massachusetts Institute of Technology Communication Production Services
  18. 18. So why is it often a challenge to advocate for the content? 1. Content needs to be appropriate for your intended audience. 2. Being concise and precise is still a craft. 3. You may be overwhelmed addressing the needs of your stakeholders. 4. In a redesign, time and resources are scarce. 5. You may not have been provided with adequate resources to engage with the development of your content by the pros advising you... Massachusetts Institute of Technology Communication Production Services
  19. 19. Massachusetts Institute of Technology Communication Production Services
  20. 20. $ $ $ $ Massachusetts Institute of Technology Communication Production Services
  21. 21. Massachusetts Institute of Technology Communication Production Services
  22. 22. Massachusetts Institute of Technology Communication Production Services
  23. 23. Massachusetts Institute of Technology Communication Production Services
  24. 24. Massachusetts Institute of Technology Communication Production Services
  25. 25. Research: audience and user profiles Visual design and identity Massachusetts Institute of Technology Schematics: information architecture Communication Production Services
  26. 26. Massachusetts Institute of Technology Communication Production Services
  27. 27. Massachusetts Institute of Technology Communication Production Services
  28. 28. http://balsamiq.com Massachusetts Institute of Technology Communication Production Services
  29. 29. Massachusetts Institute of Technology Communication Production Services
  30. 30. Giving you the opportunity to interact with your content structure early in the process in its native habitat (a web browser) raises your awareness of it. Massachusetts Institute of Technology Communication Production Services
  31. 31. “HTML wireframes are a smart way to demonstrate your plans to collaborators. It’s a great visual tool and very expressive.” Kristin Wemmer, “Starting Out Organized: Website Content Planning The Right Way” www.smashingmagazine.com/2010/03/17/starting-out-organized-websitecontent-planning-the-right-way/ Massachusetts Institute of Technology Communication Production Services
  32. 32. Ethan Marcotte http://www.abookapart.com/products/responsive-web-design Massachusetts Institute of Technology Communication Production Services
  33. 33. Massachusetts Institute of Technology Communication Production Services
  34. 34. Massachusetts Institute of Technology Communication Production Services
  35. 35. http://www.axure.com Massachusetts Institute of Technology Communication Production Services
  36. 36. Massachusetts Institute of Technology Communication Production Services
  37. 37. Giving you the opportunity to interact with your content early in the process on mobile devices facilitates your engagement with it (and gets you excited about it). Massachusetts Institute of Technology Communication Production Services
  38. 38. Steve Krug http://www.sensible.com/dmmt.html Massachusetts Institute of Technology Communication Production Services
  39. 39. Massachusetts Institute of Technology Communication Production Services
  40. 40. Massachusetts Institute of Technology Communication Production Services
  41. 41. Andy Budd http://clearleft.com Massachusetts Institute of Technology Communication Production Services
  42. 42. Massachusetts Institute of Technology Communication Production Services
  43. 43. Massachusetts Institute of Technology Communication Production Services
  44. 44. Massachusetts Institute of Technology Communication Production Services
  45. 45. “Guerilla usability testing ... helped us validate (and invalidate) critical assumptions at cheap cost and with rapid speed.” “... guerilla usability testing opened our stakeholders’ eyes so that they challenged their own, innate assumptions about “the user.” http://www.thoughtworks.com Massachusetts Institute of Technology Communication Production Services
  46. 46. Including you more fully in testing of your site contributes to your understanding of how your users interact with your content and raises awareness of content strategy. Massachusetts Institute of Technology Communication Production Services
  47. 47. Massachusetts Institute of Technology Communication Production Services
  48. 48. Massachusetts Institute of Technology Communication Production Services
  49. 49. Massachusetts Institute of Technology Communication Production Services
  50. 50. Creating opportunities for you and your audiences to interact with your content in html wireframes: 1. raises your awareness of it; 2. provides further engagement on mobile devices; 3. contributes to a better understanding of content and content strategy through user testing. A validated html wireframe also provides designers and developers with a concise model of the site and helps to align expectations with resources. Massachusetts Institute of Technology Communication Production Services
  51. 51. Massachusetts Institute of Technology Communication Production Services
  52. 52. Resources Kristina Halverson Content Strategy for the Web http://contentstrategy.com/ Ethan Marcotte Responsive Web Design http://www.abookapart.com/products/ responsive-web-design Steve Krug Don’t Make Me Think http://www.sensible.com/dmmt.html Massachusetts Institute of Technology Communication Production Services
  53. 53. Resources http://balsamiq.com/ http://www.axure.com/ http://www.smashingmagazine.com/ http://alistapart.com/ Massachusetts Institute of Technology Communication Production Services
  54. 54. Tom Pixton, Communications Specialist tpixton@mit.edu @tpixton Communication Production Services Massachusetts Institute of Technology Massachusetts Institute of Technology Communication Production Services

×