10 Minute Mock Pro to Typing Tips for Power Point Kris Jordan

8/9/2019 10 Minute Mock Pro to Typing Tips for Power Point Kris Jordan

1/4

HomeRecess! PHP FrameworkNotes from Web 2.0 Expo NY

AboutFeed

Kris Jordan

on Software, Frameworks, & Stuff

Doing Some Life ArchitectureWhy the Google Chrome Comic Rocked Scott McClouds Invisible Art

10 Minute Mock Prototyping Tipsfor PowerPoint

Written by Kris on September 7th, 2008

Mocking up user-experience designs neednt be time a huge time-sink. This isespecially true for sketchy, early-stage designs. First draft mockups are about

exploring as many promising directions possible before picking just one. Agilityand speed are the overarching goals when laying out a new vision,brainstorming a screen flow, or mocking a renovated experience. The goal is notpixel perfection its proof-of-concept (ex ppt).

Jason Fried of 37 Signals [cite] is dead on when hesays Photoshop is not the right tool for the job. InPhotoshop its too easy to get lost in the details. In

0 Minute Mock Prototyping Tips for PowerPoint... http://www.krisjordan.com/2008/09/07/10-minut

of 7 12/15/2009 08:13


2/4

Photoshop you cant simulate clicking around, itsjust static images. That said I would argue thereare flaws with the Jasons method of starting inXHTML / CSS. The proclaimed upside in workingtowards something real is worthless if youreworking towards something realbad but dont

realize it until hours have been invested in anoxymoronic real mockup. The time to dive intoXHTML / CSS is after the direction your design is heading in is clear, the wireframing and interaction flow set.

PowerPoint is great for fleshing out quick and dirty UX Design Mockups. You canwhip screen flows together, make important elements interactive and clickable,share with other people, and quickly iterate on the mock. For a greatintroductory tutorial on step-by-step checkthis article out. [Quick & dirtyexample of a mock ppt for Jitter. View in presentation mode.]

When Im mocking/prototyping in PowerPoint there are a couple of short-cuts Itake to make the work go fast. To see the following 5 tips illustrated, check outthe YouTube screen cast.

1. Use a Pallet PowerPoint File and Ctrl + Tab

The number one waste of time when mocking UX in PowerPoint is to have togo to Insert > Shape, pick the shape, and correctly style it or Insert > Picture,and have to go find an icon, etc.When mocking designs there are a handfulof things youll often need: shapes, styles, UI controls, icons, images,

container screens, and action templates. Create a PowerPoint file which

contains all of your commonly used elements and have it open in thebackground. Heres the example pallet I threw together to use in the video[download ppt]:


2 of 7 12/15/2009 08:13


3/4

Have a pallet file open while youre working on your prototype design file andCtrl-Tab between the two for quickly getting at your design elements.

2. Create Master Slides First and Duplicate with Ctrl + D

In PowerPoint each slide is independent of the rest. So if you create a layout on

one slide then duplicate it and rearrange the layout the result is a differentlayout on each. This is addressed in two ways, one by keeping your screens assimple as possible, and two by creating master slides and doing someforethought around the elements that will be present on every screen. Once

youve got your template you can quickly duplicate by selecting the slide andusing the Ctrl+D shortcut.

3. Copy and Paste Styles (Ctrl + Shift + C / V)

Maintaining a consistent UI is a lot easier with a catalog of styles. The coloringand text styles used throughout your mockup should be kept on a slide in your

pallet file. Want to change from one style to another? Easy, just select the styleyou want, use Ctrl + Shift + C shortcut, then select the items you want to applythe style to and use the Ctrl + Shift + V shortcut. Voila! Fun hack: on my palletfile Ive got styles and then a group of shapes. By copying a style and selectingany object in the group I apply the style to all shapes and then copy the shape Ineed out.

4. Use Hyperlinks for Interactivity (Ctrl + K)

To simulate interaction in PowerPoint use hyperlinks that jump non-linearlythrough the presentation. Select the item you want to be made clickable and use

the Ctrl + K shortcut. Then select the Places in this Document and finally slidein which you want the click to bring you to. Sure, it is spaghetti like GoTo inprogramming, but it works. Additionally, you usually want to turn off the abilityto click anywhere on the slide and move to the next slide. This can beaccomplished by going to the Animations tab in PowerPoint 2007 andunselecting Advance Slide on Mouse Click.


3 of 7 12/15/2009 08:13


4/4

5. When Feigning Mouse Over (Use Action Templates)

Believe it or not you can get mouse over effects in PowerPoint. Warning: itshacky. The premise is you place a very transparent box on top of what you wantto be able to hover over and give it mouse over action of moving to the nextslide. The following, nearly duplicate slide, then uses a transparent Border

shape (hollowed out rectangle) which surrounds the hoverable area and movesto the previous slide when its mouse over action is triggered. I use a templatefor this, located in the example pallet, which simplifies the process.

Do you use PowerPoint for Mock-ups?

If so, what are your short-cuts, speed-ups, and tactics? If not, what do you useand why?

Related links:

Great pallet for prototyping windows apps over at istartedsomething.comJoel on Software Thread

ShareThis

Write kick-ass web apps? Check out the Recess Framework. It's my full-stack,RESTful PHP frameworkthat breathes a little fun into the drudgery of PHPdevelopment.

Posted in UX Design | Tags: Design, mockups, powerpoint, ui, ux

2 Comments so far

Sep1512:48

AM

Ric Bretschneider

Hi Kris,Thought youd like to see this.Cheers,-Ric

http://blogs.msdn.com/powerpoint/archive/2008/09/14/one-more-special-intern.aspx

1.


4 of 7 12/15/2009 08:13

Documents

10 Minute Mock Pro to Typing Tips for Power Point Kris Jordan