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.

Page Description Diagrams

6,866 views

Published on

A brief overview on Page Description Diagrams that I gave for Misty Weaver's Content Strategy class at the University of Washington.

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

Page Description Diagrams

  1. 1. Page Description DiagramsPresented by Nick Finck<br />
  2. 2. About Me<br />User Experience Evangelist<br />Blink Interactive<br />Personal Site<br />NickFinck.com<br />Twitter<br />@nickf<br />Nominated<br />Seattle’s sexiest geek<br />Photo by Jeff Croft - http://bit.ly/g0hPil<br />
  3. 3. Overview<br />What is a PDD?<br />Why use PDDs?<br />What goes into a PDD?<br />Examples of PDDs<br />PDD activity <br />Q&A<br />
  4. 4. What is a PDD?<br />
  5. 5. “Page Description Diagrams<br />are simply a tool for <br />communicating IA decisions<br /> without talking about<br /> the visual design.”<br />
  6. 6. PDDs<br />
  7. 7. Why should we care?<br />
  8. 8. Stuck on design<br />
  9. 9. Restrained designers<br />By Jason Campbell<br />
  10. 10. “We can't solve problems by<br />using the same kind of <br /> thinking we used when we<br />created them.”<br />- Albert Einstein<br />
  11. 11. Why?<br /><ul><li>Documents the elements of each screen without specifying layout.
  12. 12. May be used instead of wireframes, or preceding wireframes.
  13. 13. Allows greater collaboration between team members responsible for visual design and functional specification.</li></li></ul><li>What goes into a PDD?<br />
  14. 14. Content<br />Each element may include one or more of the following:<br /><ul><li>Description of each element
  15. 15. Finalized or draft content
  16. 16. Designs, sketches, or wireframes</li></li></ul><li>Components <br />PDDs should cover the following:<br /><ul><li>Design elements
  17. 17. Content elements
  18. 18. Interface elements</li></li></ul><li>Layout<br />Each PDD page should include the following:<br /><ul><li>One screen per page
  19. 19. Screen name
  20. 20. Three columns (high, medium, & low priority)
  21. 21. Optional notes or general screen info</li></li></ul><li>Screen Name<br />Notes &<br />General Info<br />Second Priority<br />Third Priority<br />First Priority<br />
  22. 22. Some PDD examples<br />
  23. 23. Page Description Diagram<br />By Dan Brown<br />
  24. 24. Page Description Diagram<br />By Nick Finck<br />
  25. 25. PDD activity<br />
  26. 26. Thank You<br />
  27. 27. Questions<br />
  28. 28. Follow-up questions<br />Consulting: BlinkInteractive.com<br />Personal: NickFinck.com<br />Email: nick@blinkinteractive.com<br />Twitter: @nickf<br />

×