Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote
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 Khella.
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.
Screenshots
Containers and Dialogs. Large view.
Controls. Large view.
Navigation. Large view.
Galleries. Large view.
Social Web. Large view.
Browser window. Large view.
Application window. Large view.
Lightbox. Large view.
Badges and icons. Large view.
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.
I am constantly updating the website with guides, tips, and new prototyping templates.
— Amir
Thank you very much, Amir! We appreciate your efforts.
Related Posts
You may be interested in the following related releases:
Flip Flap Man
September 6th, 2010 3:13 pmThis is absolutely amazingly helpful. Keynote has definitely become my creative blank slate. Such a flexible toolbox. Thanks a lot for sharing.
Thor
September 6th, 2010 3:40 pmUsing Keynote for wireframing is news to me, and a great idea! Will try out on my next projects. Template looks great too!
Leanna
September 6th, 2010 3:54 pmI have been using Keynote for wireframing for awhile now and it cuts down on my time spent on them by less then half. Not only that but I also use it for building design animatics. It will support almost any file format so I can mash together graphics, video, type and then with the animation capabilities bring it to life. Once a client sees how things actually work it is amazing how quickly things get signed off. Secrets out now!
Abhishek Pathak
September 6th, 2010 4:26 pmA real time saver for me… also will help me leave a better impression
sl01k
September 6th, 2010 4:59 pmin my opinion quite poor wireframing design …
for me this is powerful http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/
i know that “wireframing design” is trendy at the moment but please…
Brandon Luis
September 9th, 2010 1:08 pmThey seem to have a nice collection of higher fidelity sets on Keynotopia.
dave
September 6th, 2010 5:40 pmNice one. Been using Keynote for wireframing for a few years now – as people have mentioned, the ease of use, plus the fact it can be exported in a range of formats from a flat pdf to an interactive prototype make it a definite contender for most simple wireframing needs.
Hastimal Shah
September 6th, 2010 7:39 pmits Amazing and it will save the time too. thanks
colin
September 6th, 2010 7:46 pmKeynote is awesome for doing interactive prototypes. Amir’s paid stencils are great too. I’d check them out.
I started an open source project for Keynote UX Stencils… I made a bunch for myself, so feel free to take from and add to the pot.
http://github.com/sud0n1m/Free-Keynote-UX-Stencils
Gregory Thomas-Tench
September 6th, 2010 9:49 pmThis seems like an exact copy of a system we have been using for the last couple of years called balsamiq mockups (http://www.balsamiq.com/products/mockups)
But hey, if it works why not copy and profit?
Aureli
September 6th, 2010 10:52 pmThat’s right, it looks exactly like Balsamiq
Stefan
September 6th, 2010 11:43 pmSweet! Thanks Smashing mag ;)
Guy
September 6th, 2010 11:46 pmAwesome! Thanks
Deepika
September 7th, 2010 1:54 amThanks SM team for sharing keynote wireframe templates. I truly believe that these kind of templates help designers generate designs faster and designers can concentrate more on conceptual designing. Few days back I had posted similar links for iPhone, iPad and Android on my blog (http://deepikadutta.wordpress.com/2010/06/30/ready-to-use-templates-for-iphone-ipad-and-android/), if anyone needs.
Remco
September 7th, 2010 2:29 amEhh… Maybe a stupide question but will this work on an iPad?
Aaron
September 7th, 2010 4:52 amOr, you could spend $12 and get the original and not use the cheep knockoff.
keynotekungfu.com/
Flety
September 7th, 2010 5:29 amHow should I use this?
Timoslav
September 7th, 2010 12:13 pmWell, that’s new…but great…never thought about that…simple things sometimes don’t come to mind…right? :)
Thank you very much!
Greetz
Andy Ptacek
September 7th, 2010 4:02 pmInteresting… but wondering if takes some of the creativity out of the process by eliminating good ol’ sketching.
Adam
September 8th, 2010 7:00 amHi Andy,
I don’t think of this as a way to eliminate sketching. It’s a way for clients to get what you’re envisioning without having to figure out a way to implant your imagination into their heads or waste time building everything before approvals. So it takes your sketches and brings them to a middle ground where it’s functioning but not refined. Keep sketching :)
Muhammed rafi
September 8th, 2010 2:06 amNice post
Meher Ranjan Howji
September 8th, 2010 9:34 amThis is something really awesome. Great for prototyping. This package contains everything one needs. A must have.
Ryan
September 8th, 2010 10:23 amMaybe one of you keynote wireframing gurus can help me with this problem. Wireframing in Keynote for me is dead slow. Check out the file to see if it’s slow for you too: http://forr.st/~yEY
Tai Travis
September 8th, 2010 11:57 amI would like to see more resources on SM for Adobe Fireworks.
I wonder how many readers here don’t use an Apple..
Jim Hanifen
September 8th, 2010 6:43 pmI don’t use Apple Keynote, but this post makes me want to try it out. Very nice.
Emanuel Fernandes
September 9th, 2010 1:10 amI’ve been using Keynote for prototyping purposes for a while and definitely rules. The main benefit is the behavior you can give to your prototypes, without much effort. If you have an idea that you wanna share with someone, just quickly put up some animations and people get it straight away.
I use it as well for design specs, for the final UI. This means, when we have a final design, but we need to explain some interactions, just make some transitions and export a movie. This movie can be used to showcase your final product, even before it is being implemented. I’ve done this for a TV application. And the final implementation didn’t go much different from the prototype.
This was also a way to get validation from management, instead of waiting for a couple of months and having the risk of not being approved.
You guys should also, check the new Microsoft Blend prototyping tool, that is more complete. Nevertheless, the strength of Keynote is the simplicity and efficiency, as the author mentions.
Matt
September 9th, 2010 6:50 amI have been indoctrinated into the Keynote wireframing coven and love using these:
http://keynotekungfu.com/
Sure it’s $12, but its the best $12 I’ve spent in a long time.
Stuart
September 11th, 2010 3:50 amcool! I use an online wireframing and sharing app at the moment, but certainly will look in to this. I have to say that this looks like such a great comprehensive resource….
Zizzamia
September 11th, 2010 4:46 amE’ stupefacente il lavoro che hai fatto. Mi sarà molto utile per i miei wireframe.
It’s amazing the work that you did. I will be very useful for my wireframe. Thanks from Italy.
Dhaval
September 14th, 2010 10:04 amNice,
very nice
Thanks
Rogier
October 9th, 2010 3:38 amVery cool, thanks!!
Heath
October 10th, 2010 8:06 pmVery Nice!
kledii
July 1st, 2011 7:47 amthankssssssssss
Ivy
July 26th, 2011 6:47 pmIt’s a great toolset but why did they have to use such a horrid font? But it’s free, so I shouldn’t complain, right?
Kgrigole
October 9th, 2011 1:19 pmGreat concept; but after several concentrated hours of struggle, I realize a person must first be an expert at Keynote to use the Wireframe templates.
Kgrigole
October 9th, 2011 1:29 pmUnless you are already an expert at Keynote, I don’t see how anyone could build something–but the concept is still great. I watched the videos, read the ReadMe, etc. But I cannot figure out how to use the wireframes, even after Several hours of concentrated effort. What is a .kth file? What is a theme file? ???????????