Powerpoint Wireframe Stencils as Free Download « Michael Gaigg: Über UI/UX Design

23Jan12

Powerpoint Wireframe Stencils as Free Download

The last couple of weeks were pretty busy for me. We were trying to design an application that has potential to grow beyond national importance and get high visibility. Needless to say expectations are high. Time constraints aside, my focus was to extract the goal of the application and streamline the user experience, do I sound like a marketing person yet?

Powerpoint Wireframes

In order to get quick and accurate feedback from our client I wanted to create visuals as early as possible. That's when Microsoft Powerpoint came in handy. I created wireframe mockups and iterated through the slides via video conference which turned out to be not only useful but essential to the mutual understanding. The client was able to adjust their process, our project managers increased their knowledge about the domain and our developers identified potential issues with integrating our mapping software.

Free Download

Download Powerpoint Wireframe Stencils

During the process of designing the wireframes I created my own set of Powerpoint stencils that covers all common interface elements as well as a set of small icons.

Powerpoint Wireframe Stencils

Example Usage

Just recently I started to redesign www.actress.at, the website of my sister who is an actress currently located in Berlin, Germany.
What better opportunity than this to put the wireframe stencils into work. After talking with her for some time over the phone I got a good sense of what her vision is based on the needs of job. Together with some photos from her agency and videos from youtube I created the following three mockups:

Mockup for Eva Gaigg's redesigned webpage actress.at

Mockup for the Homepage of Eva Gaigg's redesigned webpage actress.at

Mockup for a page inside the navigation architecture, in this case videos but also applicable for photos and other presentation items.

Mockup for the response form, probably a critical part of the application since this will be the butter on the bread.

Next Step: XHMTL Prototype

Following the wireframes exercise we created a color palette and implemented an XHTML prototype which roughly took us 3 days. Screen snapshots fed another set of Powerpoint slides for the big demo and will eventually go into the design doc as well. So far, so good.

Help me to improve the stencils

I really hope the wireframe stencils will be helpful for your work (as they made my life easier). I am interested in your opinion. What is missing? What can be improved? Send me your suggestions, ideas, updates

Enjoy this article?

Consider subscribing to our rss feed!

About Michael Gaigg

Michael Gaigg is a User Interface Expert at ESRI. His expertise includes User-centered Design (UCD), Usability, Accessibility and Section 508, Web Development and Web Design.

Tagged as: demo, design, download, free, mockups, powerpoint, ppt, prototype, slides, stencils, wireframes, xhtml Leave a comment

Comments (12) Trackbacks (0) ( subscribe to comments on this post )

Amol
February 27th, 2009 - 11:43

Thanks for the wirefame stencils. I found them very helpful, especially for a neophyte.

It would be great if you could add some text resizing icons and also may be a screen capture of some of your work so we could see how the usability piece comes through.

Thanks. Keep up the great work!!
Michael Gaigg
February 27th, 2009 - 16:32

Hey Amol, cheers on your comment! I updated the entry with an example I’m working on right now. Unfortunately most of my work for my company is still under disclosure but I guess you get the idea.

You can use fonts like ‘webdings’ or ‘windings’ to display symbols that resize smoothly (TrueType). Search google images for charts of these fonts.
Amol
February 27th, 2009 - 18:28

Amazingly quick response! Thanks again.
lisa
March 19th, 2009 - 17:30

I love your stencils but can not figure out how to bring them into Powerpoint – can you provide some instructions by chance?

Thank you – Lisa
Michael Gaigg
March 27th, 2009 - 23:08

@Lisa: the stencils are for Powerpoint 2007 – which version do you have? Once you can open the document, just copy and paste whatever you need into your new document to create your mockups.
Kxlotmoo
May 7th, 2009 - 12:12

ccJJsL comment2 ,
Paul
June 22nd, 2009 - 01:50

Thanks for this – it is fantastic. In fact it is so good that I would like to create some more template objects but I can’t work out how to do it. Would you be able to tell me how you created the complex objects (like the tabs) so that PowerPoint sees them as one object that moves and scales, and with multiple text input fields? Any help appreciated.
Michael Gaigg
June 22nd, 2009 - 20:34

Paul, all you need to do is create your ‘object’ by adding the desired elements onto the canvas, then highlight them either by holding Ctrl+Mouseclick or simply by using the mouse to drag a rectangle around the elements. Then right-click on the selection and select ‘Group’ from the context-menu – that’s it.
In the same way you can ‘ungroup’, for example if you wanted to resize an element of a complex object but without touching (resizing) another element like the text.
Paul
June 24th, 2009 - 17:46

@Michael Gaigg
Perfect – thanks
Phone numbers
January 20th, 2010 - 06:45

Thanks, good job!
But I can’t open actress.at
intheblue
January 27th, 2010 - 13:58

@Lisa; the file downloads as a .zip you need to change it’s extension to .pptx, then you will see the slideshow that will alow you to copy and paste the elements you want for your wireframes.
Michael Gaigg
January 31st, 2010 - 11:52

Phone numbers :

Thanks, good job!
But I can’t open actress.at

Yes, the url has changed and should forward you directly to http://www.evagaigg.com