istartedsomething

PowerPoint Prototyping Toolkit (release 0.2)

October 18th, 2007 AEST by Long Zheng
Jump to comments

PowerPoint Prototyping Toolkit

After hearing about the impact and success it had in Microsoft, I couldn’t wait to get my hands on prototyping in PowerPoint 2007. Amongst a few things Manuel Clement suggested a few weeks ago in his presentation about “wireframe prototyping with Office PowerPoint 2007″, was to create a toolkit of commonly used GUI components to copy and paste when designing the prototype screens. That’s what I set out to build.

PowerPoint Prototyping Toolkit sampleMy vision for a toolkit is to contain a set of all the possible and feasible GUI components you could otherwise use in designing a real Windows application or browser application. For example, it should include buttons, drop-down lists, window frames, toolbars, dialog boxes and address bars. Of course there are probably as many of those as there are stars, so I’ll just have to focus on the most commonly used ones.

I imagine I’m not the only one excited by prototyping in PowerPoint, so others might need to build similar toolkits as well, then why not make it publically available? I’m glad you asked.

Downloads

After a few hours of work, it’s currently very limited and only supports a handful of the control I require to show off my short demo, but I hope it gives you a taste of what I intend to do with the idea. Press F5 (start slide show) to see the demo in action.

I’d love to hear everyone’s feedback on what is there currently, what can be improved, what can be added (or removed). I’m also considering making this an “open” project so everyone can contribute to essentially a toolkit library. If you think this is a waste of time, please tell me that too.

Update (18/10/07): Changes in revision 0.2

  • Added start bar and start menu components
  • Added additional example screen with opened file
  • Added basic form field controls (radio buttons, checkbox)

25 Comments

  1. Josh J

    Oct 18th, 2007 at 2:08 am

    This is executed very well! Certainly not a waste of time. This can be very useful for early usability testing and generally envisioning ideas.

    Thanks and looking forward to future updates!

  2. dacholo

    Oct 18th, 2007 at 2:32 am

    Haven’t downloaded yet, but the idea sounds great! To really get some traction and downloads, you can also upload it to Microsoft Office Online – http://office.microsoft.com/en-us/templates/HA101695371033.aspx

    Looking forward to your toolkit.

  3. Jasmin

    Oct 18th, 2007 at 2:37 am

    It looks like very cool thing, but how to install it on PowerPoint 2007?

  4. tino

    Oct 18th, 2007 at 2:52 am

    Very good! Thank you, Long. If I only would have time to design some things that are floating around in my head.

  5. Keeron

    Oct 18th, 2007 at 3:04 am

    Thanks Long! No more excuses to not use this (there’s already a basic toolkit now)

  6. rieuwa

    Oct 18th, 2007 at 3:29 am

    @Jasmin…. I just changed the extension from .zip to .pptx and it worked..

  7. Rafael

    Oct 18th, 2007 at 4:29 am

    Yet another story of Microsoft not using their own products. The lackey that empowered Long to create this should have used Expression Blend…

  8. tom

    Oct 18th, 2007 at 8:51 am

    Rafael is so spot on it’s not funny.

    I saw a presentation by Lee Brimlow on application prototyping back in July. At his employeer Frog design they apparently use both Flash/ Flex and Expression Blend to build working prototypes.

    In the presentation he showed how they really quickly build prototypes which look and behave like the real thing without the use of wireframes.

    The real advantage of prototypes build with Flash or Blend is that you get real application functionality. In addition a lot of the prototype functionality can be reused at a later stage.

    If navigational usability is what you are after I’d suggest you use pencil and paper. Works a lot faster.

  9. Zian

    Oct 18th, 2007 at 2:56 pm

    @Rafael:
    I suspect that part of the reason the presenter used PowerPoint is that more people have PowerPoint than have Expression Blend.

  10. BenN

    Oct 18th, 2007 at 6:36 pm

    @Tom. Navigation Usability in PowerPoint (I used 2003 for some prototypes a couple of years ago) is easier than on Paper because of two things – Copy and Paste. If I have 2 screens that look very similar, I can duplicate the slides used to show them. In the paper world, you either use 2 sheets of paper or have a small paper flap that indicates the changed section.

    I’m not sure if either is faster than Flex/Flash/Expression, but you are right that a prototype done that way will give you functionality. For instance, you can’t use PowerPoint to validate input in text boxes. But normally, by the time I’m at this stage I can have the thing finished in Visual Studio – it’s all drag and drop anyway.

  11. Khuzema

    Oct 19th, 2007 at 8:04 pm

    Thanks for sharing, can you also provide installation instruction as when I try to open in Powerpoint 2007 gives error.

    regards

  12. Rafael

    Oct 20th, 2007 at 4:16 pm

    @Zian:
    I’m merely concerned that Microsoft would spend time to educate the public on how to design an interface in an unproductive, hacky way.

    One may also wonder why Microsoft is trying to talk UI with the design of ridiculously stupid user interfaces in their CV… (cough, Network and Sharing Center)

  13. Trailblazer101

    Oct 22nd, 2007 at 8:16 am

    This is pretty cool. Just can you change the download file form .zip to .pptx like rieuwa said.

  14. Ztest

    Oct 30th, 2007 at 11:05 am

    This enhancement sounds promising. How do I install it?

    I tried opening the .XML slides with PP 2007 and I receive an error stating that the XML is not in a MS format. Any ideas on what I’m doing wrong?

  15. Scott Barnes

    Nov 20th, 2007 at 9:12 pm

    Ztest:

    You rename the .zip to .pptx as for some reason it appears to download as a zipfile.

    -
    Scott Barnes
    RIA Evangelist
    Microsoft.

    p.s
    Nice work Long!!

  16. Kalid

    Apr 4th, 2008 at 5:10 pm

    Really cool, thanks for sharing! I’ve enjoyed using PowerPoint 2007 to mock up quick designs, and this will make it much easier.

  17. Dave

    Apr 4th, 2008 at 9:21 pm

    Any chance you could save this as an Office 2003 file as well? I’m guessing the components aren’t anything that would require Office 2007. I understand why you’d use 2007 for it, but we haven’t upgraded yet and it would be nice to try this out.

  18. Dave

    Apr 4th, 2008 at 9:23 pm

    nevermind, I just found the “Office Compatibility Pack” which lets you open 2007 files in 2003.

    http://www.microsoft.com/downloads/details.aspx?FamilyId=941b3470-3ae9 -4aee-8f43-c6bb74cd1466&displaylang=en

  19. Pippo

    Apr 8th, 2008 at 1:31 am

    Really nice tool.
    Just a very stupid question: how do you do to avoid the PPTX to advance to the next slide by clicking anywhere in the screen?

  20. Jie

    Apr 18th, 2008 at 3:48 am

    This is a very nice tool. I used the toolkit 2.0 for our UI prototyping, and it served our purposes very well.

    Pippo, to remove mouse click advancing, go to the slide you want, and from the Slide Show menu, select “Slide Transition”. In this dialog, uncheck the “On mouse click” and “Automatically after” boxes at the bottom.

  21. Pippo

    Apr 18th, 2008 at 4:29 pm

    Cool, was very easy, and now I feel stupid :-)

    thanks Jie. Also, In PowerPoint 2007 it’s on ‘Animations’ tab.

  22. merlos

    May 8th, 2008 at 2:25 am

    arrrrrrrrrrr! Is there any possibility to have a PowerPoint 2003 version?

  23. Kris Jordan

    Sep 9th, 2008 at 12:57 am

    This is a really great pallet for prototyping windows apps. For some tips on improving your prototyping productivity in PowerPoint check out:
    – My Blog Post “10 Minute Mock Prototyping – Tips for PowerPoint” – http://www.krisjordan.com/2008/09/07/10-minute-mock-prototyping-tips-f or-powerpoint/
    – Related YouTube video: http://www.youtube.com/watch?v=JjbeCkn0bJg

  24. Juan Manuel Bojorquez

    Sep 24th, 2008 at 10:37 am

    I have downloaded both releases, but I’m not being able to get any of them to work. Would you be most kind of letting me know how is done??

    Thanx

  25. Jair

    Dec 10th, 2008 at 7:50 am

    I did the download, but how can I use that? There is no execute…Please, help!

Leave a Reply

  1. Der PowerPoint Compiler « GreenDoor

    Oct 18th, 2007 at 5:29 am

    [...] zwischen PowerPoint und Compiler Software. Jetzt ist Licht am Ende der Tunnels. Microsoft hat das PowerPoint Prototyping Toolkit (Release 0.1) veröffentlicht. Ich habe da gerade einen Task beim Kunden, den ich damit mal umsetzen darstellen [...]

  2. Another day in the Office

    Oct 18th, 2007 at 11:06 pm

    PowerPoint Prototyping Toolkit from Long Zheng…

    My life revolves around PowerPoint slides at the moment. Long Zheng has posted a really cool slide deck…

  3. MSDN Blog Postings » PowerPoint Prototyping Toolkit from Long Zheng

    Oct 18th, 2007 at 11:36 pm

    [...] PowerPoint Prototyping Toolkit (release 0.2) – istartedsomething [...]

  4. Borsalino Moreno

    Oct 19th, 2007 at 6:01 am

    PowerPoint Prototyping Toolkit…

    PowerPoint Prototyping Toolkit…

  5. FredCavazza.net » Des gabarits de création de prototypes avec Powerpoint

    Oct 25th, 2007 at 7:19 am

    [...] que l’on vient de me faire découvrir des gabarits tout à fait au goût du jour : PowerPoint Prototyping Toolkit (release 0.2). Ces modèles servent à réaliser des prototypes d’applications avec un look & feel à [...]

  6. Prototipos en PowerPoint - Angel "Java" Lopez

    Oct 31st, 2007 at 7:40 pm

    [...] Prototype Toolkit 0.1 [...]

  7. MSDN Blog Postings » Wireframing in Silverlight 1.0

    Jan 5th, 2008 at 3:38 pm

    [...] wireframes are static, and created with drawing tools like Illustrator, Visio, OmniGraffle or even PowerPoint. Sometimes the wireframes are turned into click-through protoypes using tools like Axure, Intuitect [...]

  8. Prototyping Toolkit at NuTIC

    Jan 28th, 2008 at 2:42 am

    [...] first, I started with Long Zhen’s toolkit. I think it’s a good one, but I wanted to make it even more efficient. Then, [...]

  9. Créer ses cinématiques simplement Synerg´heBlog - Le blog de la Junior-Entreprise Synerg’heTiC

    Feb 29th, 2008 at 3:56 am

    [...] tout d’abord débuté avec le toolkit de Long Zhen. Je pense qu’il s’agit là d’un bon outil de départ bien que ce dernier soit perfectible. [...]

  10. Information Bricolage » Design Process and Methodologies: Apple, Microsoft, and others

    Mar 13th, 2008 at 1:32 pm

    [...] Microsoft Design prototyping with PowerPoint [...]

  11. links for 2008-04-04 « toonz

    Apr 5th, 2008 at 9:23 am

    [...] PowerPoint Prototyping Toolkit (release 0.2) – istartedsomething (tags: powerpoint ui prototype) [...]

  12. UI-First Software Development | The CyberwBlog

    Apr 6th, 2008 at 2:29 am

    [...] PowerPoint Prototyping Toolkit (Long Zheng) [...]

  13. Criando Protótipos com o PowerPoint » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards

    May 5th, 2008 at 6:43 pm

    [...] Internet Explorer foram prototipadas com o PowerPoint. Com base nisso, você pode baixar um kit de prototipagem gratuito para PowerPoint e começar a criar hoje mesmo seus [...]

  14. jdfreitas.com » Protótipos com o PowerPoint

    May 11th, 2008 at 2:28 am

    [...] Microsoft Design prototyping with PowerPoint [...]

  15. My Today’s Diigo 05/31/2008 « Rif.webmemo

    Jun 1st, 2008 at 9:20 am

    [...] PowerPoint Prototyping Toolkit (release 0.2) – istartedsomething [...]

  16. Mieux coder » Commencez par une maquette

    Jun 9th, 2008 at 6:22 am

    [...] également utiliser Powerpoint pour faire des “maquettes papier” interactives avec le Powerpoint Prototype Toolkit que je vous recommande [...]

  17. Pcrapide » Archive du blog » Outils pour réaliser des maquettes web et applicatives

    Jun 9th, 2008 at 6:54 pm

    [...] La page de téléchargement [...]

  18. NovaDexeus » Blog Archive » A Better Way to Create Information Architectures, Wireframes and Prototypes

    Jun 9th, 2008 at 11:24 pm

    [...] tends to be the standard, although I regularly use PowerPoint due to its ubiquity. Thanks to the PowerPoint Prototyping Toolkit you can produce quite good [...]

  19. Sketching your designs in Pencil » Blog Archive » scottkuo.com

    Jul 10th, 2008 at 9:58 am

    [...] Many interface designers spends endless amounts of hours making low-fi mock-ups in Visio or even PowerPoint. What makes this tool different is that it is very simple and doesn’t come with all the [...]

  20. dykin's me2DAY

    Sep 24th, 2008 at 9:15 am

    리거니의 생각…

    프로토타이핑 워크샵 한번 해야겠다. – 플래시로 프로토타이핑하기 & 블렌드로 프로토파이핑하기 & 파워포인트로 프로토타이핑하기…

  21. 分享互联网 » 选择原型设计工具

    Dec 2nd, 2008 at 1:46 am

    [...] 但是毕竟PowerPoint不是专门的原型设计工具，所以一些 配套的功能不够，比如界面的文档管理，界面的上下 标识等等。另外有人提供了一套PowerPoint的原型模板 还是不错的。 [...]

  22. ウェブの画面設計に使えるまとめ | DesignWalker

    Dec 11th, 2008 at 8:20 am

    [...] PowerPoint Prototyping Toolkit [...]

  23. Cómo hacer prototipos interactivos - Experiencia de usuario

    Mar 25th, 2009 at 9:03 pm

    [...] podemos crear un prototipo interactivo con PowerPoint 2007 y un toolkit, o incluso desde Excel. Aunque ambos estén quizás más enfocados a realizar test de usuarios [...]

  24. User Interface Mockup for GIS - Spatial Knowledge

    May 27th, 2009 at 5:10 am

    [...] to generate, and one needs to invest a lot of time into generating basic UI elements (altough some templates to get you started are available). With PowerPoint mockups, you can even generate basic [...]

  25. Outils de prototyping / wireframes | Ergonomie Web

    Sep 25th, 2009 at 3:22 am

    [...] Powerpoint (cher !) + Powerpoint Prototyping toolkit. Gratuit, pas encore essayé, mais cela à l’air essentiellement pour les applications [...]

  26. GUI Mockup Tools « Clint on Security

    Nov 7th, 2009 at 2:23 pm

    [...] http://www.istartedsomething.com/20071018/powerpoint-prototype-toolkit -01/ [...]

Previous: Dark Aurora wallpaper
The future of Windows Photo Gallery: Next

Twitter updates