Long Live Page Description Diagrams
I've never been the kind of designer that locks down ideas and expects other team members to understand and support my ideas. Design artefacts should be used as a platform for collaboration and to that end, Page Description Diagrams are great.
A project that I came to late at Lightmaker was the creation of The Rest is Noise (TRIN) website for the New York music critic Alex Ross' The Rest is Noise book.
Our Creative Director asked me to get involved in the project after he'd shown some initial look and feels to the folks at the Southbank Centre which they had loved and approved straight away. To create wireframes at this point would've been counter productive because:
- The client had already okay'd the design and with that, the flow of the page
- The design team were particularly close to this project and to have me come along with my size 9s and start changing things would've bothered some team members.
The Page Description Diagram
There's a lot of posts out there about why people love PDDs, my favourites have to be:
- Konigi's simply titled Page Description Diagrams
- Boxes and Arrows Where the Wireframes Are: Special Deliverables (to my knowledge it all begins with this article from 2002 by Dan Brown who created the first PDD in 1998.)
A PDD is perfect to sit within the processes for creating a responsive website.
With limited time and budget, I had to be careful that the work I produced, was as effective as possible. So after some stakeholder phone calls, I knew we needed to focus on the conversion path as the ticket sales were handled by the main Southbank Centre website and we couldn't lose customers in the transition. So as well as the PDD, I also created a selection of user journeys.
The client's response
I was curious as to how the client would react to the PDD, they had traditionally only worked with wireframes and looked perplexed at first. Once I'd explained it, they were straight in there helping me change the priority of elements and adding insight.
The design team's response
I think they were assuming I'd give them wireframes that would rearrange their page so when I passed them the PDD, their eyes lit up and a day later, the comps were signed off and we were beginning the build.
Creating the Page Description Diagram
To save time I ended up using Axure (for the user journeys too), it's quick to place simple elements on a page and could spit out a PNG for me to distribute. Simple.