2 new positions now open  🙌
After I explained to a friend that I used Keynote to re-design Skype in the classroom, he had a look of confusion. "Can you even design in it?" was his ...


Using Keynote for designing and prototyping has been referenced in a few places recently. Google use it  for design sprints with start-ups, ESPI have been using it in their workflow, both evangelise about the speed at which you can produce work and create basic interactive prototypes. So when I joined Made by Many I wasn't entirely shocked to find designers using Keynote, as it fits our lean principles. "I haven't opened Photoshop in 6 months" Tom, design director, told me on my first day. The challenge was set to use Keynote as my primary design tool.



Speed



The first project I was tasked with was to refresh the design of Skype in the classroom and bring it in line with Skype’s new Modern UI, a style thats inherited from Microsoft’s latest visual treatment for all its new software. The new branding would bring a crisp, neat approach to the interface with a stronger emphasis on content. It was going to be interesting to balance Skype’s playful personality with a more stark, type led feel.

Keynote is great at geometric shapes and typography, and this worked really well when designing for Skype’s new ‘flat look’. However, the way Keynote enabled me to edit and create these shapes and type changed the way I worked. Being able to easily re-use elements and build upon ideas over multiple slides meant I could iterate upon ideas really quickly - amassing a large number of different design approaches faster than I normally could.


Multiple pages within a document allows me to duplicate  and iterate my ideas without losing momentum.

 



There is no pixel



The effect of working with a tool that allows me to design this quickly means I moved from pen and paper to Keynote far quicker than I expected. Designing with vectors feels more intuitive and being able to embed images within the document saves a lot of headaches. I found myself far less concerned about being pixel perfect, which makes sense in the world of responsive sites. Keynote naturally encourages me to be less precious and spend more time refining in the browser with the great developers at Made by Many.


The vector tools and image embedding mean I can quickly rough out sketch ideas.

 



Animations



Keynote really came into its own when designing the homepage. We wanted to inspire users by presenting content with some interesting animations and interactions. Being able to solve movement and interactions within Keynote meant I could bridge the gap between a static PSD and code, and with minimal effort or time. This does not mean I was limited to a simple swipe effect or explosions for transitions. In particular, Magic move is an amazing tool to move through pages and describe each part of the design to a client.




Video walkthrough of key pages at an early design stage.

 



Tools influencing design



One thing that I found interesting with Keynote was I naturally adopted a stripped down, "flat", design aesthetic. The nature of moving through design ideas quickly means I now operate in a world that has more fidelity than a wireframe or basic prototype, but less fidelity than a super glossy PSD design. I still haven't decided if Keynote has led me down a particular path. In another life I studied automotive design, and there was a debate whether new CAD technologies were influencing the look of new designs because it was easier to create flatter surfaces that met in harsh creases, as seen in the Ford designs in the late 90s. I think its always worth being aware of how much your tools affect your work.




Left: The classic curves of the Jaguar D-Type. Right: The angular surfaces of the Ford GT90

 



Limitations





There is a lot to love about using something other than Photoshop. The beachball of death on save is now a thing of the past for example. However Keynote isn't a super app that will solve all your UI design needs. If I want to create icons, I still need Illustrator. If I want to manipulate an image for a design, I still need Photoshop. And on big pages, Magic Move can be a bit of a hassle for creating transitions. Essentially Keynote is a really well made presentation tool that lends itself to designing interfaces, but isn't capable of replacing Adobe’s Creative Suite. But the fact that Keynote isn’t bloated by extra features is to its benefit. In the end it allowed me to move away from designing in a pixel perfect mindset and focus on the things that mattered. And, that's better for everyone involved the process.