Page Description Diagrams
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Page Description Diagrams

on

  • 4,928 views

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.

Statistics

Views

Total Views
4,928
Views on SlideShare
4,928
Embed Views
0

Actions

Likes
8
Downloads
81
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Presentation 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