An Alternative to Wireframes — Page Content Maps
Published by Joel Steidl
I feel like a lot of my posts start out the same way, "We used to do something this way, and now we do something this other way." Just like our design and build process is very iterative with our clients, our internal process is very iterative as well. We are always trying to make our process better and more efficient.
As my role at Aten transitions more into IA (information architecture) and project planning, you'll see my blog posts move in that direction as well. I think the IA and planning stages are extremely important, and I'm passionate about seeing them continually improve.
Wireframes are one area of our IA process that we've reevaluated over the past year and a half. Wireframes definitely have their place, especially for showing complex interactions, but they are usually overkill for most websites*.
Our Problem
As an organization that focusses a lot on design, we were having trouble with our clients confusing wireframes with design. Wireframes are definitely not designs, but they are very visual and typically lead to design conversations, before it is time for those conversations. Also, we were spending a lot of time creating and updating wireframes, then spending even more time educating our clients about them. Of course, we didn't mind spending the time on wireframes if they paid off, but we would inevitably need to revisit the things we were trying to accomplish with the wireframes in the first place.
Our Solution
We started making something we call "page content maps". Page content maps are simple lists that show what content should be on a page, and what priority the content should have. Priority is set by the order the content comes in the list. Since we use Drupal in most of our projects, we go ahead and list out the fields that we'll want to be displayed. This can be helpful for creating views and view modes.
Check out a Sample Page Content Map
Page content maps are great for several reasons.
- They are fast to create and update. We usually create one for every page of a site.
- They provide the client with a complete list of content they'll need to create for a site.
- They provide site builders and developers with the information they need.
- They allow designers to know what content needs to be on a page without informing design.
- They are easy for clients to understand and they can even help update them. There are zero questions about design.
Page content maps may not be the silver bullet to information architecture, but they have been helpful for us. Give them a try and let us know what you think.
*Disclaimer: Wireframes are quite useful in some situations. When necessary, myBalsamiq is a pretty cool wireframing app we use. Check it out!

I've been using page content maps for a while and found them very useful in thinking, planning and documenting IA. I do not find page content maps an alternative to wireframes, because I still need to think IA in visual terms but they sure an imperative complement to them. I use https://workflowy.com to create page content maps, it's great!
I think you may have come up with the missing link for one or two of my problems. I work in a very "print" driven organization. The idea that web is not print is now generally accepted, but I have been looking towards introducing the idea of mobile first and responsive designs. Using the page content maps will help my department managers think through what is most important on the page. Also, when I ask for IA maps / site maps, I often get a Frankenstein of site map and a Page content map mashed together. Thanks