We’ve joined the Carnegie team! Find out more.
Alert Close close
Intelligence
Return of the Pwireframes

Intelligence

Return of the Pwireframes

Mar 17, 2011By mStoner Staff

Kevin Tynan, Anne Petersen, Michelle Geddes, Patrick DiMichele, and Doug Gapinski gather in a meeting room to perform paper wireframing

Hey, remember my post on paper wireframing? Well, paper wireframing is back. And this time, it’s mobile.

To perform paper wireframing (also known as pwireframing), you print out all of the components you’d need to wireframe a site, cut them out, and lock yourself in a room with the people you need to make a new site with. You figure out which pages you need to create templates for and start arranging those components. If you picked the right people to lock yourself in a room with, you’ll end up with rough-hewn paper templates and ready to be redrawn digitally.

component pieces for paper wireframing arranged on a cutting board

This method (which I first came up thinking about how to apply magazine paste ups to the web) makes the wireframe process collaborative and visual for a web team.

Why the new post? We’ve been lucky enough to partner with UIC to apply this process in a new way. UIC is a large, public university with a reputation for research outcomes, quality academics, and innovation. Their marketing and web team (including Anne Petersen, Kevin Tynan, and Michelle Geddes, pictured above) contacted us to help design and build the new UIC mobile website.

As a group, we are trying to build a mobile site with utility and appeal for prospective students, current students, and alumni. We used mobile site statistics and a comprehensive review of other college and university mobile sites as a starting point and then dove into paper wireframing as a cooperative way to architect the mobile site. We created a paper set of all the mobile components we could think of, brought some blank paper for spontaneous ideas, and set aside some time to work. In a few short hours, we hashed out a majority of the information architecture for the new mobile site as a group.

Paper wireframing helped us make better decisions about what to offer visitors to the mobile site, how links should be ordered, and how a visitor would proceed from one screen to the next. When we were done cutting and pasting, we redrew everything digitally to clean it up. We’re now ready to dive into design and start making decisions about images, graphics, typography and color.

paper wireframes

If you work in education and would like to collaborate with others to make your mobile site in the same way, you can download the mobile paper wireframe templates here. After you print these, you will need scissors, tape, and something to write with to turn them into functional wireframes.

paper wireframes