Pwireframing: Paper Wireframing
The Bethel Strategy Background
Every web redesign project we get comes with an essential strategy document. This strategy document is a tailored roadmap laying out specifics for a successful relaunch including wireframes to help visualize how new web templates will take shape, a review of competitor sites, key messages to be surfaced in the new creative stylings of a site, a streamlined information architecture, rollout schedules, and more.
Two clients of ours from Bethel University, Mark Erickson (Director of Web Communications) and Michael Vedders (Director of Web Technology), came to mStoner’s Chicago office for two days earlier in the month to work directly with us on the Bethel strategy document. The idea was that two days of intense collaboration and discussion would produce a more cohesive report, better suited to Bethel’s needs.
It Doesn’t Get Any More Old School than Paper and Scissors
Part of this two day process was an exercise that I like to call paper wireframing, or Pwireframing. It’s an idea that came to me based on a link that my colleague Laurel Hechanova sent me: The Design Police Visual Enforcement Kit. If you take a look at this page, it’s essentially a print-it-yourself sticker kit, laying out a bunch of funny “laws” you can stick to a piece of communication.
The idea behind Pwireframing (again, wireframing with paper) was to make the regular wireframing process more modular and collaborative. Instead of having a designer simply follow the instructions of a strategist, we started by discussing all possible contents of pages as a group, including syndicated feeds Bethel is currently maintaining. We also made some decisions about feeds or content Bethel would be likely to bring online in the near future. After this, I drew and printed modular drawings of all of the types of content we talked about, and cut them into sets.
We then taped some blank page templates to our upstairs whiteboard. These templates carried only consistent information: the Bethel logo, the topic-based navigation, the tactical navigation, and the footer. From here, we started by thinking about which pages would need their own specific templates (or which templates would be the most flexible for filling out the full Bethel site) and pasting these up with modular contents.
Let’s Talk it Out
The best thing about this process, in my opinion, was the dialogue it created between Bethel’s representatives and the mStoner strategy team.
The process made us ask each other critical questions. Which templates were the most essential, and which could be consolidated in favor of others? How should we address an admissions page for a University that has a fairly even split between traditional-age students and post-graduates, with completely different niche colleges such as Seminary? Which pages might rely on tabbed structures to present larger sets of data more efficiently? These are only a few of the questions we asked each other as we taped content to these rough drafts.
It was incredibly valuable to have this kind of discussion between Bethel team members who are closest to the needs of the institution, and mStoner team members who are more familiar with best practices.
Hey, It Worked!
Of course, as part of the full strategy, we redrew the paper wireframes digitally. It was tempting to show our hacked-up, taped-up paper to Bethel’s steering committee, but sometimes it’s important to put a bit more polish on official documents.
The end result was exactly what we had hoped for: a highly tailored set of wireframes, custom-cut to meet the needs of Bethel, and a template suite designed for maximum flexibility for filling out the specific needs of the Bethel relaunch.
We presented the full strategy document last week, and it was very well received by the steering committee. I know that part of the reason is that we had a chance to work closely on the document with Bethel team members, using exercises like this to guide us in our collaboration.
Nice article you have here - would be interested in seeing the page components made available as a download :-)
Posted on September 1, 2009 by Steven Grant
Thanks Steven. We may make downloads available someday, but to be honest, it’s not on the short to-do list.
One reason I can’t simply post the Bethel templates is that a lot of the content drawn was specific to web features we’re building for them. Even basic page elements - such as the task-based nav, came from an IA that was specific to them.
I will say it’s faster than you think to draw this stuff in Illustrator, Omni, or even freeware vector programs. Or if you wanted to get really old school, you could still replicate this technique with pen, paper and a xerox machine!
Posted on September 1, 2009 by Doug Gapinski
This is a great idea! I’m going to do this real soon!
However, i do agree with Steven Grant on the download front!
Posted on September 1, 2009 by John
Ok guys, I’m getting an influx of requests for downloads due to the Smashing Magazine reference.
Give me a couple of days to remove the Bethel-specific references, and I’ll post a downloadable pwireframing pdf. It’ll make the templates usable for a broad audience.
Check back in this thread on Thursday, or follow my tweets @thedougco because I’ll announce it there too.
Posted on September 1, 2009 by Doug Gapinski
Hey, Dough.
Nice initiative - and very well written and explained article, that I was very inspired by.
Thank you very, very much for sharing this great idea - and now also the downloads, that I’ll come back for… :)
Kindest regards,
Sandie
(Denmark)
Posted on September 2, 2009 by Sandie
ecologically incorrect!
Posted on October 5, 2009 by Daniel Gianni
@Daniel Gianni: thanks for your comment. I think if you try doing this exercise on the front end, you will find you or your client printing fewer revisions overall - because you’ll have done more planning at the beginning.
Posted on October 5, 2009 by Doug Gapinski
A great way to get the client involved in what can typically be a one-sided process. Also a great educational experience for the client to really understand how much thought and planning is put into UI design elements. Thanks for sharing Doug!
Posted on October 16, 2009 by Evan Barash
Thanks for sharing this process Doug. We are in the midst of wireframing for the next iteration of our site. Look forward to those downloads
Posted on October 20, 2009 by Tim GRiffin
Greeting. Reality is that which, when you stop believing in it, doesn’t go away. Help me! There is an urgent need for sites: Profitable trend forex trading system. I found only this - dynamite tnt forex trading system. Gambling an illinois value may be easier than you deal still with the companies of chicago decreased firms for volume in the forex, forex trading system. The needs were to be issued to the reserve banks for great tro to investment exchanges, forex trading system. With best wishes :-), Hedwig from Wales.
Posted on February 20, 2010 by Hedwig
Thanks for all the bothersome assignments over the years. It was continually a priceless course having you blog. It is enchanting to transport one’s self into the sense of the past, to see how a keen man has thought before us, and to what grand crest we have at last make. Best of luck in your new endeavor if you’ll have a require of ideas, always bank on research paper service. Keep the articles coming!
Posted on February 25, 2010 by PRESTONSondra
I guess, thesis writers create the superior stuff or buy a dissertation about this topic, so, we would have dissertation writing service and, believably, that’s executable to have the on-line thesis or essays written.
Posted on February 27, 2010 by Tommie34English
Hi,
What an amazing idea. I have heard about paper wire framing for the first time and it encourages me to wireframe my documents. Thanks for this informative information.
Dissertation Help
Posted on March 5, 2010 by Dissertation Help
So, you’ve gotten yourself a World of Warcraft account, set everything up, and chosen for yourself a character within the many races available and two factions of Horde and Alliance.wow goldYou’ve also chosen forAion kinah yourself a profession and craft
Posted on March 8, 2010 by ksharp
Warcraft Millionaire was born out of a single purpose. I was spending days at a time helping my friends unlock the gold making secrets that had made me rich and while I was happy to do it,wow gold I couldn’t help but wonder, “what about all of the other guides out there?Aion kinah
Posted on March 8, 2010 by ksharp
World of Warcraft gold and how to earn it is a major concern to everyone in the game. There are many ways of earning gold and making use of quests is one of them.wow goldAion kinahThere are many quests within World of Warcraft that give a very nice cash reward
Posted on March 8, 2010 by ksharp
It all begins with a way out. The solution is to not ever again allow lots of students to intrude while you are working . I am completely charmed with your chapter it will help me in my research paper services
Posted on March 9, 2010 by Vang35Lucinda
It all started with an escape. The solution is to never again allow more students to intrude while you are working. I totally charming your program, it will help me in my Thesis AND Dissertation AND Essay AND Assignment
Posted on March 10, 2010 by Dissertation
My neighbor is an university student. He has lots of assignments all the time, but that is not possible to manage with two tasks at the same time. So I suggested him to order the free essays from online essays service. I was hoping that would have to aid.
Posted on March 10, 2010 by GoodmanViolet22
Thanks for this post!
I recently used a similar method for a project. However instead of using regular paper and tape, I printed all of the elements out on magnetic paper and cut them out. And then assembled them together on a whiteboard.
The advantage was that we could easily move the pieces around. The disadvantage is that magnetic paper is difficult to find, and usually has to be ordered online.
Posted on March 10, 2010 by Joel Laumans
We will say that you make very good article more or less about this topic. You can finish the dissertation reference for thesis service or just create our own dissertation writing services and good people would buy theses there.
Posted on March 13, 2010 by FISHERMAGDALENA
I recently used a similar method for a project. But instead of using regular paper and tape, I print all factors on paper from the field and cut them out. And then gather them together on a table. Link Building Services Search Engine Optimization Social Bookmarking Submission Blog Posting Service
Posted on March 15, 2010 by Paul