Your SlideShare is downloading. ×

Page Description Diagrams

4,380

Published on

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

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

No Downloads
Views
Total Views
4,380
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
88
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

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

    ×