Designing with Keynote

I have been experimenting with new tools for designing user interfaces. Previously I worked solely with Adobe Illustrator, occassionally with Adobe Photoshop for final touches.

Since October I moved on to Apple Keynote (85% of my workload) in combination with Pixelmator (10%). I still use Adobe Illustrator (5%), but the percentage is much less. 

The reason for this is that Apple Keynote allows for faster and more rapid prototyping. It is most useful in producing and updating wireframes at rapid pace. However, beyond that, I also have used it to create detailed interface designs, at precision details, and I am always sure that they are nudged to the next pixel grid. Illustrator has the “Align to pixel grid” selection to be activated first to be able to achieve this precision.

Perhaps the most useful of Keynote is its multi-page or multi-screen capability, which is super useful in interface scenario designs. In Illustrator, you’ll have to use layers, and everyone knows that the process of activating/deactivating or locking/unlocking layers is sometimes a pain.

Want a certain element to show up in every or some of the slides? You can always use master slides.

I can even design simple (or with a little bit more time, a complex one) icon on the fly.

However, there are some issues I have not solved with Keynote. The first is how to use certain grouped objects repeatedly (as a module) in every screen without copying and pasting it. So, for example, if I have a set of button that changes position but needs to look the same. The next one is scaling group of objects, which don’t automatically scale text and outlines proportionately. Other than those, I am doing really fine and happy.

With Keynote, I deliver mockup revisions faster (I estimate 50%-60% faster) with the most consistent results. The application is light-weight, loads fast, exports fast and saves faster. With PDF export capability, a 100+ screens mockup set result in only 30MB emailable file. Imagine exporting 100 layers in Illustrator with PDF or images.

Also, by default, the design is presentation-ready, and if you choose, you can add interactivity on the fly for a client or manager demo!