Page Description Diagrams

23
Who is using your system? We know them. Evidence Driven Design Page Description Diagrams Presented by Nick Finck

description

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

Transcript of Page Description Diagrams

Page 1: Page Description Diagrams

Who is using your system? We know them.Evidence Driven Design

Page Description DiagramsPresented by Nick Finck

Page 2: Page Description Diagrams

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

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

What is a PDD?

Page 5: Page Description Diagrams

“Page Description Diagrams are simply a tool for communicating IA decisions without talking about the visual design.”

Page 6: Page Description Diagrams

PDDs

Page 7: Page Description Diagrams

Why should we care?

Page 8: Page Description Diagrams

Stuck on design

Page 9: Page Description Diagrams

Restrained designers

By Jason Campbell

Page 10: Page Description Diagrams

“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

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

What goes into a PDD?

Page 13: Page Description Diagrams

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

Components PDDs should cover the following:• Design elements• Content elements• Interface elements

Page 15: Page Description Diagrams

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

Screen Name

First Priority Second Priority Third PriorityNotes &General

Info

Page 17: Page Description Diagrams

Some PDD examples

Page 18: Page Description Diagrams

Page Description Diagram

By Dan Brown

Page 19: Page Description Diagrams

Page Description Diagram

By Nick Finck

Page 20: Page Description Diagrams

PDD activity

Page 21: Page Description Diagrams

Thank You

Page 22: Page Description Diagrams

Questions

Page 23: Page Description Diagrams

Follow-up questions

• Consulting: BlinkInteractive.com• Personal: NickFinck.com• Email: [email protected]• Twitter: @nickf