Skip to content
Article

Streamline Content, Design, and Development with PDDs.

page-description-diagrams

What are PDDs and what is their purpose?

PDD stands for “Page Description Diagram.” PDDs are used to outline the content and elements on web pages. The elements are organized into low, medium, and high priority. 

Showing wireframes too early on can trigger premature discussions around layout and design, no matter how bare-bones the wireframes appear. PDDs offer a solution. They come before wireframes to keep the focus on  taxonomies, functionality, and prioritization. After all, design should support desired content – not the other way around.

Outlining PDDs can also make the wireframing process much faster since everything is already outlined for the UX designer. 

In special cases, it is even possible to skip the wireframes and hand PDDs straight to the designer. The drawback is that skipping the wireframes may inadvertently skip the UX designer’s interpretation of layout, flow, and interactions with the user in mind. 

What does a PDD look like?

PDD’s can be created in several different ways, from a simple Google Doc list to a Sketch or Figma file with basic graphic elements. Atlantic BT prefers to use Trello, a kanban style list application, because it is easy to move elements around and collaborate with our clients.

No matter the tool, each list will represent a single page or type of page. Individual cards or bullet points within the list represent a component on the page. 

Trello allows for tagging cards, which we use to identify the type of content of each card (call to action, metadata, search field, etc). Furthermore, the tagging can be used to indicate priority.

PDD Example
Example of a Trello board used for PDDs.

PDDs facilitate collaboration.

Collaborating with clients.

The ability to easily collaborate with clients is one of the benefits that make PDDs so attractive. Involving stakeholders in the process creates a shared sense of ownership and helps develop the list of components in more detail. 

With Trello, clients can add comments and examples in real time to elicit discussions. Clients are empowered to include feedback from key players in their organization without having to schedule separate Zoom meetings. 

Collaborating with developers.

Making PDD’s available to developers early on is crucial, especially on website redesigns. Developers want to get a head start on migrating the content from the old website. 

If it’s difficult for developers to translate a PDD to backend fields, it is important to agree on terminology to identify key elements. 

For example, we collaborated with our development team to create a spreadsheet that contained what they needed for migration, most of which were copied straight from the PDDs. 

Design Requirements for Developers

Avoid common PDD pitfalls.

Don’t be vague with prioritization.

It may be helpful to develop definitions of high, medium and low prioritizations to stay focused on essential features. An example of these definitions are:

  1. High – These elements are essential to the user’s understanding and functionality of the page. 
  2. Medium – These elements are useful to most user’s understanding and functionality of the page. 
  3. Low –  These elements are nice to have but they do not contribute to the user’s understanding or functionality of the page.

During a redesign, make sure that there is discussion around which elements stakeholders want to keep and remove from the original website. This will make handing off to development a lot easier.

Don’t focus on visual design.

It may be tempting to add graphics to the PDDs to show stakeholders what pages might look like from a low-fidelity perspective. However, adding these visuals runs the risk of people getting stuck on the look and feel of the graphics, overshadowing the content. 

Don’t let the nitty gritty details prevent progress.

Don’t spend too much time laboring over the details of the PDDs and going back and forth with stakeholders. Once there is enough information to start wireframes, move on. Lest you get stuck in an endless cycle of minutia. 

Should you always include PDDs in a redesign?

PDDs are a great way to prioritize and collaborate on the essential elements of main pages without getting bogged down by design details. 

PDDs may also save time by skipping wireframes, avoiding some of the wireframe pitfalls. Inevitably, you’ll also lose the benefits that go with wireframes, so this is typically not recommended. 

The great thing about PDDs is that you can spend as little time as possible or go into a lot of detail. They can fit comfortably into any system!

Need help streamlining the redesign process?

Atlantic BT is well-versed in the strategy, UX, and technical aspects of a redesign. If you need help planning your next web project, reach out for a free consultation.

capabilities covered
Experience Design UX Design UX Research

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project

Insights

Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

What is the best web development framework?
Many people commonly ask “what is a framework in web development?” Web development frameworks can easily be confused with web development tools, languages, or parts of the web development stack (like PHP, Ruby, or Javascript).
Learn More about What is the best web development framework?
What is the best programming language for web development?
If there was one “best” programming language, then everything else would be obsolete. The reality is that there are so many different programming languages because there is no “best” language for any situation.
Learn More about What is the best programming language for web development?
How much does web development cost?
Web development can vary from a few hundred to millions of dollars depending on what is needed. You may simply need some changes to something that already exists, or you'd like to build a large or complex application.
Learn More about How much does web development cost?
What is web design and development?
People often lump web design and development together, so what's the difference? As the Internet has evolved, the skills required to produce a high quality website or web application have changed.
Learn More about What is web design and development?
What is JavaScript used for in web development?
Historically speaking, JavaScript was only commonly but sparingly used in web development. The multiple browsers in use at the time each supported different versions of JavaScript and were slow to render more complex Javascript.
Learn More about What is JavaScript used for in web development?
What is React web development?
React is a popular JavaScript library. It is primarily used for building interactive user interfaces (UI).
Learn More about What is React web development?
What is PHP web development?
PHP is a back end language primarily used for custom applications, content management systems (such as Wordpress), eCommerce engines (such as Magento), or even massive sites like Facebook.
Learn More about What is PHP web development?