Prototyping with PowerPoint

by Jan Verhoeven, 6 December 2003

This article is about using PowerPoint for interface prototyping, both for desktop programs and web applications.

Although this article does focus on Microsoft PowerPoint, most of it equally applies to other presentation programs like the presentation module of the openoffice suite.

For this article I used PowerPoint 2000. See the jansoft.ppt prototype described in this article.

Advantage of using PowerPoint

Why use PowerPoint for prototyping? Personally I used a range of tools to create a prototype: Photoshop, Dreamweaver (HTML), Internet Explorer (HTML+ javascript) and Delphi. The all have their pros and cons.

PowerPoint has several pros:

  1. Most people will have it in their office.
  2. The master slide allows for creating a template for every other slide.
  3. Is is very easy to arrange slides and copy and paste between slide.
  4. Because it is a presentation people will less likely regard is as the final product.
  5. It can be presented everywhere.
  6. It can be saved as a (series) of web page(s) with one click of a button.

Get started

First we want to create a master slide that contains the parts we want to appear on every slide. If we are prototyping a website we may want to use the image of an empty browser as the background.

  1. Open Internet Explorer (or any other browser) with a blank page. You can display a blank page by typing about:blank in the address field and pressing ENTER.
  2. Press Alt+Print Scrn to put a dump of the browser window on the clipboard.
  3. Open Windows Paint (or any other graphics program) and press Ctrl+V to paste the dump as a new image.
  4. Save the image as a BMP or PNG file and close Paint.

Now we are ready to adjust the master slide.

  1. Open a new blank presentation in PowerPoint and press CANCEL when asked for the layout of the first slide.
  2. Save the presentation.
  3. Select: VIEW - MASTER - SLIDE MASTER  from the menu to edit the master slide.
  4. Right-click BACKGROUND and then from the dropdown FILL EFFECTS.
  5. In the FILL EFFECTS dialog select the PICTURE tab and click the SELECT PICTURE button.
  6. Select the picture just saved with Paint and click OK the confirm the picture selection, and APPLY to apply the background.
  7. Click the CLOSE button to close the master slide.

We are not done yet. Suppose we are protoyping a website with a menu bar along the top and a coloured title bar below the menu bar. Let us add a title bar. We can add the title bar to the master slide but that will not enable us to modify the title itself on every slide. That is why we add the title bar to the TITLE MASTER.

We need a new title master.

  1. Select: VIEW - MASTER - SLIDE MASTER  from the menu to edit the master slide.
  2. Select: INSERT - NEW TITLE MASTER, to insert a new title master.
  3. As you can see: the title master has inherited the browser background of the master slide.
  4. In the title master you can see a boxed rectangle: Click to edit master title style.
  5. First select the text and change the font to : Verdana, 16 point, Bold.
  6. Next move the box up leaving space for the top menu bar (the menu items themselves will be added to the individual slides) and resize it with to the display area of the browser background.
  7. Right-click the box and select FORMAT PLACE HOLDER, and select blue as the fill color and click OK.
  8. Select the text in the box again and change its color to white.
  9. Delete the place holders for : SUBTITLE, DATE/TIME, FOOTER and PAGE NUMBER.
  10. Finally click the CLOSE button.

We are now ready to insert the first slide of the prototype.

  1. Press Ctrl+M and select the first autolayout (title slide).
  2. Click in the middle of the title bar and type: Home
  3. Press F5 to run the presentation.
  4. Press the Esc key to leave the presentation.

Adding hyperlinks and form elements

Now that we have a basic slide to start from we can add content to every individual slide. If we want to make a clickable prototype we need to add hyperlinks to the slides. Fortunately this is very easy with PowerPoint.

You may be tempted to use form controls from the Control Toolbox. Try not to use them. Just use autoshapes and text boxes to mimic form controls. We are not creating a fully functional application. Just a prototype to be presented and discussed.

Suppose we want to protoype a protected site with user login, a main menu after login and 3 main sections of the site: software, articles and links. In total this will give us the following 5 pages. We allready created the Home page. Let us now before we continue create the other 5 pages.

  1. Home
  2. Menu
  3. Software
  4. Articles
  5. Links

Save the presentation at this stage.

Now select the Menu slide and add three text boxes underneath each other at the center of the page, with the text: Software, Articles and Links.

  1. Use align and distribute to position them properly.
  2. Select the three text boxes and make them 24 point Verdana.
  3. Now select the Software text and right-click HYPERLINK.
  4. In the hyperlink dialog select: Link to: Places in this document, expand the SLIDE TITLES node and select 3. Software. Click OK.
  5. Do the same with Articles and Links linking to the Articles and Links slide.

The color of the link is a little pale. Let us change it to blue.

  1. Select the Menu slide and then FORMAT - SLIDE COLOR SCHEME
  2. In the color scheme dialog select the CUSTOM tab.
  3. Select the Accent and hyperlink box and change the color to blue.
  4. Select the Accent and followed hyperlink box and change the color to blue.
  5. Click the APPLY TO ALL button, to apply the changes.

Now press Ctrl+S to save your presentation and press F5 to run it. Click on the first slide to skip over to the menu slide. Now you can click any of the 3 links to jump to either: Software, Articles or Links.

Adding login elements

We will now add login elements to the Home slide. On the left side of the slide we place the following elements underneath each other:

  1. Text box with text: Username
  2. Rectangle with black borders.
  3. Text box with text: Password
  4. Rectangle with black borders.
  5. Text box with text: Login, black borders and a silver background.

Make the text boxed: Verdana 10 point. Use align and distribute for a proper layout.

Select the Login text and add a hyperlink to the Menu slide.

Now press Ctrl+S to save your presentation and press F5 to run it. Click on Login to jump to the Menu slide. Now you can click any of the 3 links to jump to either: Software, Articles or Links.

Adding to top menu bar

As a final touch we add menu items to the menu bar.

  1. Select the Menu slide.
  2. Add a text box somewhere on the slide with the text: Logout.
  3. Make the text: Verdana 10 point.
  4. Add a hyperlink to the Home slide.
  5. Position the text box to the right side of the menu area and press Ctrl+C to copy it.
  6. Now select in turn the Software, Articles and Links slides and press Ctrl+V on each slide to paste the Logout link.

Select the Software slide.

  1. Add a text box somewhere on the slide with the text: Menu.
  2. Make the text: Verdana 10 point.
  3. Add a hyperlink to the Menu slide.
  4. Position the text box to the left side of the menu area and press Ctrl+C to copy it.
  5. Now select in turn the Articles and Links slides and press Ctrl+V on each slide to paste the Menu link.

Finalize the protoype

You can now add further details to your prototype as needed. Save the prototype ready to be presented and discussed.