Anyone who creates wireframes on frequent basis will read the title of this post and laugh.
Who creates wireframes in PowerPoint?
Every once in a blue moon, I do. So here are five tips if you find yourself having to make a wireframe using PowerPoint.
This all started because I had the privilege of working with an enthusiastic client who dabbles in “web stuff” and wanted to expand her horizons. Part of our engagement included creating a simple wireframe. She asked if she could help out.
“Absolutely!” I replied. I remember how badly I wanted a mentor (and still do!) when I was new to the UX field.
My best advice for creating a wireframe is to skip technology completely. Put pen to paper and sketch!
In this case the client was off site. We couldn’t sit down and sketch out our ideas, and she didn’t have access to a scanner. Sketching was out.
Over email I asked, “Do you have Visio or InDesign?”
“I had an old version of Visio but it was removed from my toolkit a year ago. All my shovels and diggers were removed from my sandbox. 😦 I’m left with PowerPoint, unfortunately.”
I replied, “No need to say unfortunately!”
Visio and InDesign are expensive and can be hard to justify buying if you’re not going to use them regularly. Not to mention you have to learn how to use the software.
If you are creating a simple, annotated wireframe PowerPoint can get the job done.
Plus, if you are comfortable using Power Point already there isn’t as much of a learning curve. Here are a few tips to help you get the most out of PowerPoint for the purposes of creating a simple, annotated wireframe.
To show you how it can be done, I’ll recreate the Prepare Your Home and Family page from the American Red Cross website.
Tip 1: Take a screenshot.
For my client engagement, I was working on a section of a larger site. I could not change pieces of it, like the header and horizontal navigation. I needed to recreate those pieces inPowerPoint. So I began by taking a picture of the screen.
I used the Web Developer plugin by Chris Pederick to set my Firefox window to 1024 x 768. (Note: If you have several rows of toolbars exposed in Firefox you may want to turn some off so you get more of the website in the shot.)
Then I used the Screengrab plugin by Andy M to save a copy of the visible portion of the window.
Here’s how the shot turned out:
Tip 2: Use the Slide Master. Trace design elements from the screenshot into the slide master.
Slide Masters allow you to make universal style changes to every slide in your presentation. Traditionally, it’s used to control things like the background color, fonts, placeholder sizes, etc.
Start a new presentation in PowerPoint 2007. Select View and Slide Master from the ribbon. Make sure you select the top slide in the list.
Note: If you are not familiar with Slide Masters read more about them in the Help section. Search for “slide master” and believe it or not, Microsoft provides a good explanation.
On the Red Cross page the logo, navigation labels, search box and ‘Donate Now’ button are going to stay in the same place on every webpage. I’ll recreate those elements in the Slide Master. That way, when I switch to the presentation view, I’ll never have to copy and paste those elements onto each new slide I create.
Tip 3: Repurpose the Placeholders and Adjust the Theme
All of the placeholders in the Slide Master are useful for wireframing.
Resize the text inside the title placeholder and move it to the top. Ditto with things like page numbers and dates.
What about the master text placeholder that takes up most of the screen?
Change the styles to something closer to what will appear on the webpage. For instance, remove the bullets, reduce the font sizes, adjust the paragraph spacing as needed, and in the long run you’ll have consistent text formatting across each wireframe/slide you create.
I prefer to create wireframes in black and white or grayscale. In my experience, the more “finished” the product, the less honest feedback you’ll get. That’s why sketching is great. People don’t take it seriously (and they shouldn’t).
To avoid the temptation to add a splash of color, change the color scheme to grayscale. You’ll find the grayscale option in Colors drop down in the Edit Theme section of the ribbon.
Tip 4: Trace the screenshot
Paste the screenshot you took early into the slide master. Begin tracing the design elements that will remain the same on every page.
In the Red Cross example, I’ve highlighted the design elements that will remain the same on every page in yellow. These are the first elements I’ll recreate using shapes and text boxes.
And here’s what it looks like after I’ve traced the elements. Notice how I moved the Master text styles placeholder? It is now in the same area where the left navigation will appear.
I’m also going to modify an existing layout. Every slide master has a set of layouts associated with it. When you are creating a presentation, the layouts are what you use to create a two column slide for example.
For wireframes, I might create several layouts to represent a two- or three-column webpage. The Red Cross example is essentially a three-column layout. Right now, I’ve got my left navigation set up in the slide master and I want to create a layout that includes a text placeholder for the center column.
Tip 5: Use the Notes section to annotate the wireframe
Thanks to the slide master, each time you add a new slide to the deck, you won’t have to copy and paste the header or right column. Not to mention, you won’t accidentally erase an element in the header.
Once you’ve created your wireframe it’s not unusual to need to add notes and descriptions–annotations. The notes section in PowerPoint is the perfect place to do this.
Additional wireframe references and resources:
So there you have it. There are plenty of other tools–Omnigraffle, Visio, Axure, InDesign and so forth. But if push comes to shove or if you’re just starting out, you can create a basic wireframe in PowerPoint.
Smashing Magazine’s 35 Excellent Wireframing Resources is by far one of the most comprehensive lists I’ve seen on the theory and practice of wireframing. As your skills advance, consider reading one of my earlier posts about using EightShapes Unify.