Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

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 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.

Wireframe templates for Apple Keynote2

Download the set for free! Link

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.

Screenshot3

Screenshots Link

Screenshot7
Containers and Dialogs. Large view8.

Screenshot9
Controls. Large view10.

Screenshot11
Navigation. Large view12.

Screenshot13
Galleries. Large view14.

Screenshot15
Social Web. Large view16.

Screenshot17
Browser window. Large view18.

Screenshot19
Application window. Large view20.

Screenshot21
Lightbox. Large view22.

Screenshot23
Badges and icons. Large view24.

Motivation behind the design Link

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 website25 with guides, tips, and new prototyping templates.

— Amir

Thank you very much, Amir! We appreciate your efforts.

You may be interested in the following related releases:

Footnotes Link

  1. 1 http://www.keynotopia.com
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2010/09/Wireframe-Library-V1.1.zip
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2010/09/Wireframe-Library-V1.1.zip
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2010/09/Wireframe-Library-V1.1.zip
  5. 5 http://keynotopia.com/guides/
  6. 6 http://keynotopia.com/wireframe-templates/
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2010/09/001.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2010/09/001.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2010/09/002.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2010/09/002.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2010/09/003.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2010/09/003.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2010/09/005.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2010/09/005.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2010/09/006.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2010/09/006.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2010/09/007.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2010/09/007.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2010/09/008.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2010/09/008.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2010/09/009.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2010/09/009.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2010/09/010.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2010/09/010.png
  25. 25 http://www.keynotopia.com
  26. 26 https://www.smashingmagazine.com/2010/04/15/the-ultimate-free-web-designer-s-icon-set-750-icons-incl-psd-sources/
  27. 27 https://www.smashingmagazine.com/2010/02/15/free-medical-icons-set-60-icons/
  28. 28 https://www.smashingmagazine.com/2009/12/24/yummy-a-free-tasty-icon-set/
  29. 29 https://www.smashingmagazine.com/2009/06/18/freebie-release-quartz-icon-set/
  30. 30 https://www.smashingmagazine.com/2010/07/14/gcons-free-all-purpose-icons-for-designers-and-developers-100-icons-psd/

↑ Back to top Tweet itShare on Facebook

Advertisement

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Abhishek Pathak

    September 6, 2010 4:26 pm

    A real time saver for me… also will help me leave a better impression

    1
  2. 2

    its Amazing and it will save the time too. thanks

    1
  3. 3

    Keynote 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

    1
  4. 4

    Gregory Thomas-Tench

    September 6, 2010 9:49 pm

    This 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?

    2
  5. 5

    That’s right, it looks exactly like Balsamiq

    1
  6. 6

    Sweet! Thanks Smashing mag ;)

    2
  7. 7

    Awesome! Thanks

    1
  8. 8

    This is absolutely amazingly helpful. Keynote has definitely become my creative blank slate. Such a flexible toolbox. Thanks a lot for sharing.

    2
  9. 9

    Using Keynote for wireframing is news to me, and a great idea! Will try out on my next projects. Template looks great too!

    0
  10. 10

    I 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!

    1
  11. 11

    Thanks 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.

    1
  12. 12

    in my opinion quite poor wireframing design …
    for me this is powerful https://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…

    0
  13. 14

    Ehh… Maybe a stupide question but will this work on an iPad?

    3
  14. 15

    Nice 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.

    0
  15. 16

    Or, you could spend $12 and get the original and not use the cheep knockoff.

    keynotekungfu.com/

    2
  16. 17

    How should I use this?

    1
  17. 18

    Well, that’s new…but great…never thought about that…simple things sometimes don’t come to mind…right? :)

    Thank you very much!

    Greetz

    0
  18. 19

    Interesting… but wondering if takes some of the creativity out of the process by eliminating good ol’ sketching.

    0
    • 20

      Hi 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 :)

      0
  19. 21

    Nice post

    0
  20. 22

    Meher Ranjan Howji

    September 8, 2010 9:34 am

    This is something really awesome. Great for prototyping. This package contains everything one needs. A must have.

    0

↑ Back to top