Lately, Apple Keynote has been gaining popularity among designers as a wireframing and prototyping tool. Features like multiple slide masters, styles, grouping, animation and hyperlinks make it ideal for crafting interactive prototypes and UI narratives. Today’s freebie, Keynotopia, is a free set of interface elements for Keynote that makes it possible for anyone to create these prototypes in minutes. All elements are hand-crafted in Apple Keynote, and organized in nested groups for easier manipulation and customization. The templates can be used in Keynote 09 and 08 and are designed by Amir Khella1.
Start with a blank presentation, and create a new slide for each application screen. Then copy/paste elements from the wireframe templates into your slides, and edit their labels, sizes and colors. To save time, group elements together, and use master slides to share common interface and navigation components across multiple screens. Finally, add hyperlinks to enable user interaction, and use slide transitions to create cool interface animations.
Voila! You now have an interactive prototype that you can test with users, share with team members, and present to stakeholders.
Download the set for free!
You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.
Motivation behind the design
Here are some insights from the designer of the set:
“The first time I’ve used Apple Keynote for prototyping, I was helping a friend create a product pitch for his startup idea. He didn’t have design or development skills, and I wanted to show him how he can quickly put together a click-thru demo in less than an hour, using his favorite presentation tool. He was impressed by the outcome, and I was equally impressed by Keynote’s simplicity and efficiency. I never went back to my prototyping tool since.
Keynotopia was created so that anyone with an idea can quickly test its potential, without having to spend time and money on design and development resources. It’s a simple proof that having the right mindset for prototyping is more important than buying expensive tools.
I also wanted to find a way to avoid writing UI specs. Using Keynotopia templates, I created prototypes that I annotated and shared with development teams, and the response was phenomenal! Time was no longer spent reading, staring at screenshots and imagining interactions; developers and testers were actually having fun playing with the prototypes and providing feedback. Design was finally catching up with the lean and agile development process.
Thank you very much, Amir! We appreciate your efforts.
You may be interested in the following related releases:
- The Ultimate Free Web Designer’s Icon Set (750 icons, incl. PSD sources)26
- Free Medical Icons Set (60 Icons)27
- Yummy! Free Food and Cakes Icon Set (20 Icons)28
- Quartz Icon Set (90 clean sharp icons)29
- gCons: Free All-Purpose Icons for Designers and Developers (100 icons + PSD)30
- 1 http://www.keynotopia.com
- 2 http://www.smashingmagazine.com/wp-content/uploads/2010/09/Wireframe-Library-V1.1.zip
- 3 http://www.smashingmagazine.com/wp-content/uploads/2010/09/Wireframe-Library-V1.1.zip
- 4 http://www.smashingmagazine.com/wp-content/uploads/2010/09/Wireframe-Library-V1.1.zip
- 5 http://keynotopia.com/guides/
- 6 http://keynotopia.com/wireframe-templates/
- 7 http://www.smashingmagazine.com/wp-content/uploads/2010/09/001.png
- 8 http://www.smashingmagazine.com/wp-content/uploads/2010/09/001.png
- 9 http://www.smashingmagazine.com/wp-content/uploads/2010/09/002.png
- 10 http://www.smashingmagazine.com/wp-content/uploads/2010/09/002.png
- 11 http://www.smashingmagazine.com/wp-content/uploads/2010/09/003.png
- 12 http://www.smashingmagazine.com/wp-content/uploads/2010/09/003.png
- 13 http://www.smashingmagazine.com/wp-content/uploads/2010/09/005.png
- 14 http://www.smashingmagazine.com/wp-content/uploads/2010/09/005.png
- 15 http://www.smashingmagazine.com/wp-content/uploads/2010/09/006.png
- 16 http://www.smashingmagazine.com/wp-content/uploads/2010/09/006.png
- 17 http://www.smashingmagazine.com/wp-content/uploads/2010/09/007.png
- 18 http://www.smashingmagazine.com/wp-content/uploads/2010/09/007.png
- 19 http://www.smashingmagazine.com/wp-content/uploads/2010/09/008.png
- 20 http://www.smashingmagazine.com/wp-content/uploads/2010/09/008.png
- 21 http://www.smashingmagazine.com/wp-content/uploads/2010/09/009.png
- 22 http://www.smashingmagazine.com/wp-content/uploads/2010/09/009.png
- 23 http://www.smashingmagazine.com/wp-content/uploads/2010/09/010.png
- 24 http://www.smashingmagazine.com/wp-content/uploads/2010/09/010.png
- 25 http://www.keynotopia.com
- 26 http://www.smashingmagazine.com/2010/04/15/the-ultimate-free-web-designer-s-icon-set-750-icons-incl-psd-sources/
- 27 http://www.smashingmagazine.com/2010/02/15/free-medical-icons-set-60-icons/
- 28 http://www.smashingmagazine.com/2009/12/24/yummy-a-free-tasty-icon-set/
- 29 http://www.smashingmagazine.com/2009/06/18/freebie-release-quartz-icon-set/
- 30 http://www.smashingmagazine.com/2010/07/14/gcons-free-all-purpose-icons-for-designers-and-developers-100-icons-psd/