Page Description Diagrams

5,889 views
5,309 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
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,889
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
94
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • Despite our best efforts, clients can get caught in the designwhen looking at wireframesrather than focusing on the structure & organization ofinformation on the page.
  • Wireframes dictate a lot about the design of a screen.This restricts visual designersfrom doing… well, design.
  • 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 />

    ×