page description diagrams
DESCRIPTION
A brief overview on Page Description Diagrams that I gave for Misty Weaver's Content Strategy class at the University of Washington.TRANSCRIPT
![Page 1: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/1.jpg)
Who is using your system? We know them.Evidence Driven Design
Page Description DiagramsPresented by Nick Finck
![Page 2: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/2.jpg)
About Me
Photo by Jeff Croft - http://bit.ly/g0hPil
User Experience EvangelistBlink Interactive
Personal SiteNickFinck.com
Twitter@nickf
NominatedSeattle’s sexiest geek
![Page 3: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/3.jpg)
Overview
1) What is a PDD?2) Why use PDDs?3) What goes into a PDD?4) Examples of PDDs5) PDD activity 6) Q&A
![Page 4: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/4.jpg)
What is a PDD?
![Page 5: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/5.jpg)
“Page Description Diagrams are simply a tool for communicating IA decisions without talking about the visual design.”
![Page 6: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/6.jpg)
PDDs
![Page 7: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/7.jpg)
Why should we care?
![Page 8: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/8.jpg)
Stuck on design
![Page 9: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/9.jpg)
Restrained designers
By Jason Campbell
![Page 10: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/10.jpg)
“We can't solve problems by using the same kind of thinking we used when we created them.” - Albert Einstein
![Page 11: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/11.jpg)
Why?• Documents the elements of each screen
without specifying layout. • May be used instead of wireframes, or
preceding wireframes. • Allows greater collaboration between team
members responsible for visual design and functional specification.
![Page 12: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/12.jpg)
What goes into a PDD?
![Page 13: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/13.jpg)
ContentEach element may include one or more of the following:• Description of each element• Finalized or draft content• Designs, sketches, or wireframes
![Page 14: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/14.jpg)
Components PDDs should cover the following:• Design elements• Content elements• Interface elements
![Page 15: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/15.jpg)
LayoutEach PDD page should include the following:• One screen per page• Screen name• Three columns (high, medium, & low
priority)• Optional notes or general screen info
![Page 16: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/16.jpg)
Screen Name
First Priority Second Priority Third PriorityNotes &General
Info
![Page 17: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/17.jpg)
Some PDD examples
![Page 18: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/18.jpg)
Page Description Diagram
By Dan Brown
![Page 19: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/19.jpg)
Page Description Diagram
By Nick Finck
![Page 20: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/20.jpg)
PDD activity
![Page 21: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/21.jpg)
Thank You
![Page 22: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/22.jpg)
Questions
![Page 23: Page Description Diagrams](https://reader035.vdocuments.net/reader035/viewer/2022062617/54c7ecb44a795999488b47e0/html5/thumbnails/23.jpg)
Follow-up questions
• Consulting: BlinkInteractive.com• Personal: NickFinck.com• Email: [email protected]• Twitter: @nickf