${post.fImageName}

Building software with Keynote

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.

materialdesign_introduction.png
Screenshot: Google Material Design

Link mode

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?

links-mode.png
Select presentation type to be "Links only"

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.

custom-slidesizie.png
Select custom slide size from the document properties menu

Cut'n paste

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

Copyright disclaimerRemember to verify permissions for any artwork before using it in live applications and sites!

Instant Alpha

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!

alpha.jpg
Using Keynote's Instant Alpha function you can make parts of images transparent

Magic Move

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.

magic-move.001.jpeg
Magic Move transitions the menu softly into place, while pushing the coffee cup out

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!

Useful resources

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:

Keynote Templates

Keynotopia-Keynote-and-PowerPoint1.jpg
Keynotopia.com - Keynote templates with reusable designed components from Material Design, Windows 10 and iOS

Icons

Screen Shot 2016-09-23 at 12.09.23.png
Icomoon.io - Generate icons of any color and size. Even supports loading the most popular icon libraries too