An Alternative to Wireframes — Page Content Maps

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!


About the Author

With over ten years of professional experience, Joel's joint background in design, development and information architecture allows him to lead our development team with a focus on building user-centered web applications.

Read More