Keynotopia https://keynotopia.com iOS, Android and Web Prototyping UI Kits for Keynote and PowerPoint Sun, 31 May 2020 21:10:00 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 https://keynotopia.com/wp-content/uploads/2020/03/cropped-Keynotopia-logo-blue-red-32x32.png Keynotopia https://keynotopia.com 32 32 5 Things I wish someone had told me about prototyping 5 years ago https://keynotopia.com/5-things-i-wish-someone-had-told-me-about-prototyping-5-years-ago/ Tue, 29 Aug 2017 20:15:18 +0000 http://keynotopia.com/?p=6380 For the past couple of years, I’ve been designing and prototyping Virtual and Augmented Reality apps. I’ve also been doing lots of research into how the gaming industry and movie industry do rapid prototyping and idea validation, and noticing the similarities and differences between how they they do it, and how we do it. Here […]

The post 5 Things I wish someone had told me about prototyping 5 years ago first appeared on Keynotopia.]]>
For the past couple of years, I’ve been designing and prototyping Virtual and Augmented Reality apps.

I’ve also been doing lots of research into how the gaming industry and movie industry do rapid prototyping and idea validation, and noticing the similarities and differences between how they they do it, and how we do it.

Here are the 5 things that I learned from my research, and that I wish someone had told me about app prototyping 5 years ago:

1- Most prototypes SHOULD fail

The goal of prototyping is to find out what works, and what doesn’t, and to avoid the costs of executing what wouldn’t work.

You fail fast and cheap early, to avoid failing slowly and expensively.

If you’re prototyping only a few ideas that you “know” should succeed, then you’re either not coming up with enough ideas, or you’re too attached to a few ideas and you want to prove that they work.

On the other hand, if you’re prototyping lots of ideas, and most of them fail, you know that you’re exploring enough creative directions before settling on one.

And you will likely learn more from the prototypes that fail than from the ones that succeed.

2- You should pre-totype before you pro-totype

Movie directors and game designers probably use their imaginations much more than app designers. Before any scene is designed, they close their eyes and simulate the whole experience from beginning to end in their heads first. They then iterate on those scenes many times in their imagination, until they feel right, and only then, they start sketching, storyboarding, and prototyping.

Before you start prototyping any app, close your eyes for a few minutes, and imagine, as clearly as possible, each step of your app as you user interacts with it. Simulate the full user experience in your head first, and iterate on it as many times as needed until you know you’ve reached a point of user delight.

Only then, you should start prototyping.

And there should be no surprises when you’re creating the prototype, because you’ve already seen it all in your head, before you sat down to do it.

The more you pre-totype, the less you need to pro-totype.

3- Steal like a designer

Great ideas are built up on previous great ideas. Creativity doesn’t work in vacuum, and nothing is truly original.

I’ve written before about how I keep a design swipe file of app screens, to draw inspiration from when I am designing something new. I even created a collection of reusable screens based on the most popular app designs in Keynote and PowerPoint format.

My very first step after defining the idea I want to implement, is to gather as much inspiration from previous apps and experiences, and create various mood boards for layouts, interactions, specific features, color palettes,…

I then go through all those inspiration boards, and I start taking notes about what I like about every one of them.

By collecting and studying those inspirations, I am turning my brain into a melting pot with the best work that have already been done, and pointing it into specific creative directions to come up with similar ideas.

Make sure you’re gathering enough inspirations, otherwise you’d be plagiarizing, not stealing!

This lesson draws inspriation from Austin Kleon’s Steal Like An Artist.

4- Limit the time you spend on each prototype

Prototyping follows the 80/20 rule: 80% of the prototype required to validate an idea or answer a question is created in 20% of the time (often a week or less). Adding more time beyond that point often leads to diminishing returns on your time.

A polished prototype should never be your goal early on. Making lots of prototypes should be.

Once you feel your prototype is “good enough” to validate an idea or answer a question, stop, and make another one.

5- NEVER skip prototyping

It’s easy, especially when you’ve done something many times, to believe that you already know the outcome of a specific step, and to skip it. Because I’ve already prototyped lots of apps, sometimes I believe that I have a clear idea in my head about how the app should be designed, and skip prototyping to start production right away.

Oftentimes, I am wrong.

It doesn’t matter how many apps you’ve already prototyped, you should never skip prototyping your future ideas.

Prototyping isn’t just about testing how an idea works, it’s also about figuring out what the REAL idea is.

The first idea in your head is likely a messenger, pointing the way a much better idea that you can only reach through prototyping and iterations.

And sometimes you need to shoot the messenger, to reach the king.

The post 5 Things I wish someone had told me about prototyping 5 years ago first appeared on Keynotopia.]]>
iOS 13 UI Prototyping Kit for Keynote and PowerPoint https://keynotopia.com/ios-11-ui-prototyping-kit-for-keynote-and-powerpoint/ Sun, 13 Aug 2017 22:28:27 +0000 http://keynotopia.com/?p=6376

We just put the final touches on the iOS UI prototyping templates for Keynote and PowerPoint, and they are ready for download.

This is a complimentary update for all our customers who have already purchased the iPhone UI Kit, the Keynote prototyping bundle, the PowerPoint prototyping bundle, or the Super Bundle.

And if you haven’t purchased a keynotopia template or bundle yet, grab yours here, and get all future updates for free forever.

Looking forward to the awesome stuff you’ll create with those new templates!

Here is a preview of what’s included in this UI kit:

 

iOS UI Kit for iPhone

 

 

Apple Watch Prototyping UI Kit

iOS UI Patterns Prototyping Kit

 

 

The post iOS 13 UI Prototyping Kit for Keynote and PowerPoint first appeared on Keynotopia.]]>
How To Create Product Requirements In One Hour or Less https://keynotopia.com/how-to-create-product-requirements-in-one-hour/ Wed, 31 May 2017 22:32:14 +0000 http://keynotopia.com/?p=6251 One of the most boring and time consuming tasks in software development is creating product requirements. You spend endless days taking UI screenshots, writing up descriptions of what each UI control does, how users will interact with it, what kind of results the screens will show, and how the app will handle errors and edge […]

The post How To Create Product Requirements In One Hour or Less first appeared on Keynotopia.]]>
One of the most boring and time consuming tasks in software development is creating product requirements. You spend endless days taking UI screenshots, writing up descriptions of what each UI control does, how users will interact with it, what kind of results the screens will show, and how the app will handle errors and edge cases.

You then share those requirement documents with your team, have discussions about them, and based on their feedback and comments, you go back and modify some parts of the design, take new screenshots, paste them in place of the old ones, and rewrite the corresponding parts of the documents to reflect those new changes.

And you rinse and repeat until everyone signs off on those requirements, or until you realize it’s actually easy for an angry fist to punch through an LCD monitor.

That workflow accurately describes how I spent 50% of my time working as a product manager at Microsoft 10 years ago.

It was agonizing!

And I used to think that there was no way around it, until I left in 2007 and started consulting with startups and creating my own products.

That’s when I realized that I could create product requirements 10x faster 100% more enjoyably.

How did I do it?

I replaced requirement documents with videos!

 

Sample product requirement from StatusPanda‘s final prototype

Instead of taking screenshots, pasting them into Word, and writing about them, I would create a fully interactive prototype, fire up my screen recorder, do a walk-through with voice over, then share those videos with the team.

Not only did this turn out to be much faster to create and iterate, it was also a much clearer way to communicate because it shows (instead of tells) your product features and interactions within the context of using it.

And developers LOVED it!

Here’s what I found to be the best formula for creating those video requirements:

Design a comprehensive prototype

I use Keynote with Keynotopia to design all UI screens, add user interactions with hyperlinks, and create animations using slide transitions.

You can also use PowerPoint instead, if you’re on a Windows machine.

I make my prototypes easier to modify and iterate on by moving all my top-level screen layouts into master slides, sharing them across various app screens, so I can change all those screens at once with one change to the master slide.

I also use slide notes to remind myself of what I want to describe during the walkthrough.

Create a walkthrough outline

I go through the user flow diagrams (also known as user’s journey) that I created earlier on during the UX design process, and I create a list all the screens and features the user will go through and interact with.

I create a list of screens, and within every screen the list of the top level tasks and actions that users can perform (e.g. Dashboard — Creating a new report)

Developers love to work with people who have thought through all the detail of how the app works, and how users interact with it. Your goal is to show them the prototype in the best way they can measure their work against.

Record screencasts

I then record a series of 5–10 minute videos, one for each screen-feature combination from the user flow diagram, with voice over explaining how users get there, what actions they can (and cannot) take, what results the UI shows, how the feature handles edge cases, and where users can go from there.

And because I create a fully clickable and animated prototype in Keynote, it’s easy for me to show all those details in action!

I avoid creating one long video of the whole prototype, because shorter videos are faster to navigate to, better for comments and feedback, and easier to redo whenever I change one feature that requires only recording a couple of new videos.

I give each video file a name that corresponds to the screen + feature being discussed: For instance, 06-Dashboard-Create a new report.mp4. Adding the number prefix keeps files in the right order.

On the Mac, I use Quicktime Player (Free) to record screencasts. You can also use ScreenFlow ($99) if you need more advanced video editing and sound enhancement abilities. If you’re on Windows, you can use EZVid (Free) or Camtasia Studio ($199).

Share the videos

Create a new folder on DropBox (you can also use Google Drive or Microsoft Drive), drop all the videos inside it, then share it with your team. They can watch the videos, add comments and feedback, ask questions, and request more detail about a specific feature.

Upload the Keynote (or PowerPoint) version of your prototype in the same folder, so your team can experience it first-hand.

And if you need to redesign a screen or feature, you can re-record the corresponding video file and drop it in the same folder for further discussion and feedback.


That workflow has saved me hundreds of dull hours that I would have otherwise spent writing product requirements. It’s also great for showing clients how your design will be used, and to getting feedback from users about a new feature that you’re considering for your product.

The post How To Create Product Requirements In One Hour or Less first appeared on Keynotopia.]]>
Web App Prototyping Kit for Keynote and PowerPoint [Free Update] https://keynotopia.com/web-app-prototyping-kit-for-keynote-and-powerpoint-free-update/ Mon, 14 Sep 2015 23:11:27 +0000 http://keynotopia.com/?p=5962

If you’re designing a web application, the fastest way to prototype and test your ideas is to put together quick screens in Keynote or PowerPoint and show them to users. This new web UI kit update contains ready-to-use customizable vector UI components and modules that you can use to prototype your web apps in minutes.

This UI kit update includes search patterns, login/signup dialogs, rating systems, image galleries, video players, pricing tables and shopping carts.

The kit is a free update for customers who purchased the Web UI Prototyping Kit, Keynote UI Prototyping Bundle, PowerPoint UI Prototyping Bundle, or Keynotopia UI Super Bundle.

Here’s a preview of the updates in this web UI kit.

 


 

 

Prototype Your Web & Mobile Apps Using Keynote or PowerPoint!

 

The post Web App Prototyping Kit for Keynote and PowerPoint [Free Update] first appeared on Keynotopia.]]>
How To Create UI Animations With Keynote https://keynotopia.com/how-to-create-ui-animations-with-keynote/ Sun, 05 Apr 2015 21:37:35 +0000 http://keynotopia.com/?p=5863

This is a 20-minute timelapse video on how to use Keynote and Keynotopia to create interactive an UI animation using the native BUILDS feature in Keynote.

The animation is from Storehouse iPhone app as featured on Capptivate.

The original recording is over an hour long, and this time-lapse is played back at 4x speed (~18 minutes long).

Enjoy and share with your friends and followers.

Keynotopia is trusted by Fortune 500 companies, startups, design agencies, and universities in more than 80 countries

The post How To Create UI Animations With Keynote first appeared on Keynotopia.]]>
The Power Of A Design Swipe File https://keynotopia.com/how-to-design-better-interfaces-and-prototype-better-apps/ Fri, 30 Jan 2015 06:36:41 +0000 http://keynotopia.com/?p=5793

My best trick for becoming a a master-prototyper (I prototype dozens of apps every year) is that I spend a couple of hours every day browsing through the latest UI inspirations and design trends.

I browse UI-patterns websites, I look at designers’ portfolios, I read design-related news, and I download top selling apps and play with them.

But I don’t “just look” at those interfaces.

Whenever I find a design that I like, I add it to a Design Swipe File (notebook in Evernote). And if I find a design that inspires me, I re-create it immediately in Keynote (using Keynotopia templates), so that it becomes part of my visual prototyping vocabulary.

I now have a huge Design Swipe File in Keynote, containing more than 100 ready-to-use screens in various categories. I simply drag and drop those screens into my new prototypes, customize them quickly, and only design from scratch the ones that are unique to my prototype.

This saves me a lot of time, and it helps me get inspired and stay inspired.

Here’s what my Keynote Swipe File looks like:

 

 

 

If you want to become good at designing interfaces and prototyping apps, I recommend doing the following:

1- Download top selling apps frequently, use them, and notice what makes them engaging and easy to use. Take screenshots and add them to a design swipe file (digital notebook or hard drive folder).

2- Browse popular UI shots on Dribbble, Pttrns, PatternTap, and Captivate, and save the ones that inspire you

3- Spend an hour copying an interface every day, for the next 30 days.

The more interfaces you copy, the more interfaces you understand, and the better you get at prototyping new apps.

Keynotopia is trusted by Fortune 500 companies, startups, design agencies, and universities in more than 80 countries

The post The Power Of A Design Swipe File first appeared on Keynotopia.]]>
Android L Material Design UI Kit For Keynote and PowerPoint https://keynotopia.com/android-l-material-ui-design-kit-for-keynote-and-powerpoint/ Tue, 11 Nov 2014 19:59:43 +0000 http://keynotopia.com/?p=5682

The folks at Google have done a fantastic job with their new Material Design for Desktop and Mobile.

Today, we’re launching a new update for Keynotopia templates that includes hundreds of new UI components for designing Android apps using Material Design components with Keynote and PowerPoint.

This is a complimentary update (Keynotopia comes with free lifetime updates) for anyone who bought the Android templates, Keynote Bundle, PowerPoint Bundle, or the Super Bundle.

Here is a preview of the UI kit in this update:

Android Prototyping UI Kit 

 

 

Legacy Android Prototyping UI Kit

 

 

Keynotopia is trusted by Fortune 500 companies, startups, design agencies, and universities in more than 80 countries

The post Android L Material Design UI Kit For Keynote and PowerPoint first appeared on Keynotopia.]]>
iOS UI kit (iPhone+iPad) for Keynote and PowerPoint https://keynotopia.com/ios-8-ui-kit-iphoneipad-for-keynote-and-powerpoint/ https://keynotopia.com/ios-8-ui-kit-iphoneipad-for-keynote-and-powerpoint/#respond Tue, 23 Sep 2014 23:10:01 +0000 http://keynotopia.com/?p=5456

This new Keynotopia update brings Apple’s newest iOS UI templates in Keynote and PowerPoint format. It includes hundreds of new and updated GUI components for the iPhone and the iPad, in both portrait and landscape formats.

This update is complimentary for all our paying customers who purchased an iOS UI kit or a UI bundle from Keynotopia. If you haven’t purchased one of our paid templates or bundles yet, you can get yours here.

Here is a preview for what’s included:

 

iOS 13 UI Kit for iPhone

 

 

iOS UI Patterns Prototyping Kit

 

 

iOS UI Kit for iPad

 

 

Keynotopia is trusted by Fortune 500 companies, startups, design agencies, and universities in more than 80 countries

The post iOS UI kit (iPhone+iPad) for Keynote and PowerPoint first appeared on Keynotopia.]]>
https://keynotopia.com/ios-8-ui-kit-iphoneipad-for-keynote-and-powerpoint/feed/ 0
OS X Yosemite UI Kit for Keynote and PowerPoint https://keynotopia.com/os-x-yosemite-ui-kit-for-keynote-and-powerpoint/ https://keynotopia.com/os-x-yosemite-ui-kit-for-keynote-and-powerpoint/#respond Thu, 21 Aug 2014 16:09:16 +0000 http://keynotopia.com/?p=5421

Apple’s new operating system is launching this Fall, and it is embracing a beautiful simplistic flat user interface style. We designed a new user interface toolkit for keynote and powerpoint to make it easy for you to create new apps for the Mac.

This is a complimentary update if you’ve already purchased the Mac UI templates, the Keynote bundle, the PowerPoint bundle, or the Super Bundle. This new UI kit can be downloaded through the link in your original purchase confirmation email.

If you haven’t purchased one of our paid templates or bundles yet, you can get yours here.

Here’s a preview of what’s included in this update

 

 

MacOS Prototyping UI Kit

 

Legacy MacOS Prototyping UI Kit

 

 

Keynotopia is trusted by Fortune 500 companies, startups, design agencies, and universities in more than 80 countries

The post OS X Yosemite UI Kit for Keynote and PowerPoint first appeared on Keynotopia.]]>
https://keynotopia.com/os-x-yosemite-ui-kit-for-keynote-and-powerpoint/feed/ 0
FontAwesome Icons For Keynote and PowerPoint https://keynotopia.com/fontawesome-icons-for-keynote-and-powerpoint/ Mon, 04 Aug 2014 22:18:36 +0000 http://keynotewireframetoolkit.com/?p=5315

This new update contains 439 icons from FontAwesome that can be used in your prototype and final web and mobile apps. The icons are provided as text and vector shapes in both Keynote and PowerPoint formats.

The icons come as a complimentary update for Keynote Bundle, PowerPoint Bundle and Super Bundle (all three bundles include complimentary lifetime updates).

Here’s a preview of the icons included in this update.

FontAwesome Text Icons.003

FontAwesome Text Icons.004

FontAwesome Text Icons.005

FontAwesome Text Icons.002

These icons are included for free with Keynotopia prototyping templates for Keynote and PowerPoint

The post FontAwesome Icons For Keynote and PowerPoint first appeared on Keynotopia.]]>