No designer on your team? No problem! Everyone with a Mac and Keynote can create awesome interactive animated designs. This post will reveal how to rip cool designs and make them your own faster than you can say prototype!
Gone are the days when only wand mastering Photoshop wizards could produce stunning designs. Specialized prototyping tools can now be left alone until you have that special requirement.
So - why are Google Venture and dozens of other agile companies are embracing Keynote as their favourite prototyping tool these days?
Seeing is believing
The video below shows a hands-on-Keynote-in-action-session. Watch it to learn how anyone can build an interactive prototype in just 15 minutes. Or go through the post and enjoy the video later!
Flat Flat Flat
Flat and minimalistic design is THE megatrend nowadays. Raning from Google's Material Design via Microsofts Universal Apps design to iOS - its all about flat - and less is more. This is good news for anyone not comfortable with handling those detailed nitty-gritty pixel-perfect effects, not to mention flat designs are easier to create with Keynote too.
Your average presenter tool (Keynote included) is heavily inspired by paper - yes, the chopping down trees, boiling, pressed, square-shaped thing you can print out and give away physically. Thus the "next slide" paper-like flow, which is not exactly suitable for making interactive prototypes. Arguably going through slides is like rocket science compared to switching between files in your favourite designer tool.
As it turns out the Keynote team has yet another trick up their sleve - "Link mode". From the document settings you can change presentation type into "links only" - which will free you from the linear presentation flow. To move between slides you now have to click an object with a link - potentially taking you to a slide before the current - Crazy isn't it? I Imagine you already see the potential of this feature?
Custom slide size
Most people are not aware, but Keynote actually supports custom slide sizes. Just choose your favourite theme, and set your preferred slides-size in pixels. This way you can easily create designs that fit perfectly on your phone for instance. You'll find this setting from the document properties tab top left.
"Good artists copy, great artists steal" is a famous quote. When designing in Keynote the brilliant trick is stealing good designs and ideas by copying them to make them your very own artwork.
Spend time investigating various applications, sites or design guidelines until you find something you like and steal it! No reason to invent the weel if someone has already done it before you, right? Remember you may copy just about anything - searching Google for icons is one way of doing this - i.e. "white coffee icon" shoud get you some nice white icons in a few milliseconds.
As we go about copying screenshots, icons and other neat things we come across - they might not always have the proper background color to match your design. Once more Keynote has an excellent solution to your problem. To remove a color (or range of similar colors - simply select the image and use the "Instant Alpha" tool. Now select the color you want to remove (to select a color range: drag until everyhing you want to remove is selected) and release. Voila, the color is gone!
The trick where Keynote really pulls the rabbit from the hat has the matching name "Magic Move". This feature is as powerful as it is simple. When moving between two slides - objects that are similar across the slides will automagically be animated from slide 1 to slide 2. So simply copy anything that is visual in your target slide into the starting slide, select "Magic Move" as your transition type and watch the magic unfold. The result will convince just about anyone your prototype is the real thing.
Run live tests on iPhone
Since Keynote is available for iPhone too, any designs intended for use on a mobile device may easily be tranferred and run on your iPhone. Simply start the presentation on your phone and hand it over to someone and see what happens!
It's also good to know there are many professional design and templating sites that can help you speed up your prototyping even more - some are free - and other offer a lot for a modest contribution: