Tuesday, 24 June 2008

Powerpoint Wireframe Template for UI design


A wireframe is an early UI design that can help you and your team agree about what the design should look like and how it should behave. This is similar to how an architect may create a sketch of a building, or how a director may create a pencil storyboard of a movie. The purpose of the wireframe isn’t to have a completed product it’s to get high-level agreement on the overall flow.

There are many specialized tools to create wireframes but I believe that many of these actually get in the way of the creative process. The most common problem is that they often render visuals that could be confused for an actual design. This can trick people into thinking they are looking at a specification, critiquing the minor points and wordsmith, instead of engaging in a discussion about the high-level workflow.

The other problem with highly specialized tools is that they tend to force the designer to behave like a programmer, wiring up pages with links and actions. The wireframe is not meant to be a working prototype. It’s meant to be fluid presentation of the high-level application structure.

I often wireframe using a pencil, a ruler and a stack of paper:

Pencil  Drawn Wireframe Template A hand drawn wireframe including checkbox and radio button choices

Paper has the property that you can do anything you want. You don’t need to find a checkbox in a dialog you simply draw a checkbox. You don’t need to wire-up events you just draw what you want it to look like.

The advantage of wireframing in pencil is that the design is obviously not complete, and it gives you and others creative freedom to try things out and move things around.

I took the same principal and applied it to a PowerPoint template. All the parts of a PowerPoint can be easily moved around and customized. The parts have a pencil drawn appearance. Making it easy to edit, customize and add.

It’s not as flexible as paper & pencil, but PowerPoint does make it easier to get executives and developers to edit a wireframe and explore UI concepts and ideas. This sample includes a number of sample PowerPoint screens showing how various web-page parts and techniques can be mocked up.

Feel free to download the PowerPoint file and use it in your own projects. For anyone interested I created the parts using a Wacom tablet to get the pencil look & feel.

Download the PPT from here


Do you have a project in mind? We’d love to work with you. If you’d like an opportunity to work on projects with us, check out our Careers page. We’re hiring!