5 Tips for Creating A Wireframe In PowerPoint

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:

Screenshot taken on my computer

This is a screenshot from the American Red Cross website.

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.

Make sure you select the TOP slide in the Slide Master view.

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.

Default Slide Master

Default Slide Master

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.

Slide Master after minor changes

Slide Master after minor changes

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.

Yellow highlights show the design elements that will stay the same on each page.

Yellow highlights show the design elements that will stay the same on each page.

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.

Slide Master after tracing the screenshot

Slide Master after tracing the screenshot

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.

Slide Master with multiple=At this point the slide master and layouts are in good shape.  Close the Slide Master and begin creating your wireframe slide show…

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.

Slide showing annotations in the Notes view

Slide showing annotations in the Notes view

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.

I’m using PowerPoint 2007.

Bookmark and Share

Advertisements

6 thoughts on “5 Tips for Creating A Wireframe In PowerPoint

  1. Hi,

    I’ve seen a lot of people in many important companies using powerpoint to define it’s applications that I’m sure would be very impressed by this article. But I think the wireframing tools now in the market are moving slowly the PowerPoint to the place it’s made of, the slides presentations (and lots of spam messages :P).

    In my case I want to recommend Justinmind Prototyper as a tool as easy as the powerpoint but focused on the wireframe and prototypes definition.

  2. A good show madame (assuming from your name)

    I find it useful for my work. Thanks. Much appreciated. Wish there was a video too.

    Thanks anyway!

  3. Many kudos to you!

    Coming from a visio world…had not had to use PP as a wireframe tool…but gees…nice idea for sure and quick and easy if you have an example of something close. Cutting and pasting could never be easier. Thanks for sharing and making me a smarter guy for the future.

    • And here’s to hoping you never, EVER, have to use PowerPoint as your only tool!!! It would be extremely challenging for a large site. But sometimes it’s just right for the client and for doing something quick and dirty.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s