What are PDDs and what is their purpose in web design?
PDD stands for Page Description Diagram. It’s used to outline the content and elements on web pages and can improve the overall web design process. 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, web 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.
PDDs facilitate web design 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 web design 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 web 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.
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:
- High – These elements are essential to the user’s understanding and functionality of the page.
- Medium – These elements are useful to most user’s understanding and functionality of the page.
- Low – These elements are nice to have but they do not contribute to the user’s understanding or functionality of the page.
During a website 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 web 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 web design?
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 web design process?
Atlantic BT is well-versed in the strategy, UX, and technical aspects of a web design and development. If you need help planning your next web project, reach out for a free consultation.
