42 comments

  • Kyle CaseKyle Case, almost 9 years ago

    That's amazing! Thanks for sharing. I never knew Keynote was capable of that.

    3 points
  • Jeff BroderickJeff Broderick, almost 9 years ago

    Super cool. I would love to see the Keynote file!

    3 points
  • Emiland DE CUBBER, almost 9 years ago

    This is just gorgeous Andrew. Keynote is so versatile and powerful - it's my favourite tool, without any doubt.

    Here a few animations I made for a TEDx conference : http://vimeo.com/60702211 (all is animated with Keynote)

    You can find the video of the full talk here : youtube.com/watch?v=yjWXVfIzgQg

    2 points
    • Andrew Haskin, almost 9 years ago

      Awesome! I really dig the glow effect. Did you create all the assets in Keynote or did you import them? I also like the subtle animations of the gears and piston.

      0 points
      • Emiland DE CUBBER, almost 9 years ago

        Thanks Andrew! I really appreciate it.

        The basic shapes are created in Keynote, and other icons are pasted from Illustrator. The final glow is made on Keynote. Gears and pistons were tough to sync but that's cool :)

        0 points
  • Mitch De CastroMitch De Castro, almost 9 years ago

    Right on! I'm a big supporter of Keynote. I even customized my Sketch toolbar to match Keynote's; can't beat it. Haha :)

    2 points
  • Andrew ZimmermanAndrew Zimmerman, almost 9 years ago

    Thanks for sharing. It is interesting to compare and contrast the animations between Google's Material Design animations and Keynote.

    I wonder if Google Ventures' use of Keynote had any influence on Material Design's creators. They certainly saw many of the same strengths that Mr. Haskins cites (see: http://www.gv.com/lib/the-product-design-sprint-prototypeday4).

    1 point
  • Eric FilkinsEric Filkins, almost 9 years ago

    That's pretty cool that Keynote can do that, but is it really better than just mocking something up in AfterEffects?

    1 point
    • Daan van KlinkenDaan van Klinken, almost 9 years ago

      What do you mean with "better"?

      A prototype is a prototype, right?

      0 points
    • Andrew Haskin, almost 9 years ago

      If AE is your jam, then no. I like the way Pasquale D’Silva put it in his article, 'The State of Interaction Design Tools.'

      "After Effects is an extremely powerful package, but is fundamentally built for video, motion graphics & compositing work. This creates The Photoshop Kitchen Sink Effect™ where the new user is punched in the eyeballs with an interface full of mostly irrelevant horseshit, that is not useful for anything. Once the user learns they only need 20% of the tools, they stop crying themselves to sleep at night like a little bitch. (That was how I learned After Effects)"

      https://medium.com/p/f755c6515368

      I think Keynote puts a lot of power in designer's hands with minimal effort. There's a beauty in not needing a timeline and keyframes, which can be difficult to manage. In my opinion with AE or any other animation software, you get sucked into the void of animating more and designing less. Where should we be spending our time?

      1 point
  • Josh ShayneJosh Shayne, almost 9 years ago (edited almost 9 years ago )

    Keynote can do some pretty impressive stuff! I love using it as a filmmaking tool. I animated this entire video in Keynote a couple of years ago -- though the illustrated assets were worked on in photoshop and the edit of sequences and temp voiceover were done in FCPX for timing. Still - pretty flexible and intuitive: https://vimeo.com/38049186

    1 point
  • Andrew Haskin, almost 9 years ago

    UPDATE: The video is now complete! It matches Google's original video from end to end. Check the link again to watch, and to download a new Keynote file.

    Thanks for the responses!

    0 points
  • Paul MartensPaul Martens, almost 9 years ago

    I'm glad to see I'm not the only one who sees this sort of value in Keynote (before Magic Move I relied more heavily on Apple's Motion). QC, Origami, Framer, Pixate, Hype, even Apple Motion...these still seem great and helpful, but my familiarity with Keynote (bought it for $99 the first month it was out like---10 years ago) seems to hinder my adoption of these newer prototyping apps. Not to say I don't like some new tools -- Sketch 3 with symbols and Flinto are really helpful...and then using Keynote to export some animations to quicktime, then running that through GIF rocket and placing it selectively in Flinto? It's pretty straight forward and easy to update.

    Now if only Apple would allow presentation of Keynote files at a 90˚ angle...that would solve a lot of mobile prototyping problems for me.

    0 points
    • Andrew Haskin, almost 9 years ago

      My experience matches yours! For most of my work, building a quick animation in Keynote with the assets I already have is all I need. A robust animation or prototyping tool are overkill for quick storytelling or testing ideas.

      That's not to say I don't think those other tools don't have a place, I just think they should come later in the process.

      Question: Why do have to run the quicktime through GIF rocket and then place images into Flinto? Are you trying to recreate the animations in Flinto?

      And YES to Keynote files at a 90˚ angle.

      0 points
  • Yakim van ZuijlenYakim van Zuijlen, almost 9 years ago

    I am learning After Effects. The big difference between Keynote and After Effects is that in Keynote you can't really see what you are doing. This doesn't really matter for small animation. But for larger prototypes it can get a bit annoying. The great thing about After Effects is that you have total control over the timing and easing. You can see everything on the timeline. It takes a while to get used to, but once you have learnt it it's a great tool. Although I also really like making quick prototypes in Keynote.

    0 points
    • Andrew Haskin, almost 9 years ago

      One thing I've noticed, many people (not necessarily you) make the mistake of building ALL the animations with ALL the assets into a single slide or two. It's easier to separate the flow out into multiple slides, like a storyboard, with Magic Move doing most of the heavy lifting with transitional animations. Secondary animations can then be added as builds.

      However, I have encountered slides with many builds, with some occurring at the same time, and some with delays, and some with different easing, and it can be difficult to track. Some would say a timeline would be helpful here, but I'm afraid adding one would be a slippery slope. There's something simple and elegant about having fewer options, enough to communicate the point, and then moving on.

      That said, I do wish there were a few more easing presets, and they were available to all animations.

      0 points
      • Yakim van ZuijlenYakim van Zuijlen, almost 9 years ago

        Good point. I do this myself too. In Keynote it gets really frustrating when you have too many objects or animations in one view.

        0 points
  • Moaaz SidatMoaaz Sidat, almost 9 years ago

    This is super sweet! Thanks for the share!

    0 points
  • Wes OudshoornWes Oudshoorn, almost 9 years ago

    I have been using keynote more and more, but this absolutely blows me away. Amazing work. Would love to see a more in-depth screencast of how you did some of the transitions.

    0 points
  • Vinay ChilukuriVinay Chilukuri, almost 9 years ago (edited almost 9 years ago )

    This is super cool.

    For creating interactive prototypes, I know there is Framer (and have been using it myself), but why doesn't anybody talk about Adobe Edge Animate?

    You can add good amount of interactivity, animation and transitions without writing much code. Right? Just asking.

    0 points
    • Andrew Haskin, almost 9 years ago

      I've tried Animate during its beta phase. I switched to Hype at the time because it supported multiple art boards or "scenes," and hyperlinking between them. In the end, both were slow to me. Also, neither have Magic Move, which does most of the heavy lifting.

      I'm beginning to learn that the timeline, the backbone of animation tools, are actually a greater hinderance to designers than not...at least during the early phases of a project.

      0 points
  • Eric FilkinsEric Filkins, almost 9 years ago

    That's pretty cool that Keynote can do that, but is it really better than just mocking something up in AfterEffects?

    0 points
  • Blake SimkinsBlake Simkins, almost 9 years ago

    Wow, that is awesome!!

    0 points
  • Robin RaszkaRobin Raszka, almost 9 years ago (edited almost 9 years ago )

    Keynote and Mica are the tools Apple designers are using most for prototyping. I'm big fan of Keynote too.

    0 points
  • Keira BuiKeira Bui, almost 9 years ago

    This is so awesome. Do you use any other tool such as Quartz Composer or Framer Studio? Now I don't know which tool I should learn next..

    0 points
    • Andrew Haskin, almost 9 years ago

      I have used other tools, but in the end, I keep coming back to Keynote. It's just so fast and intuitive. Here, I was primarily using it to show its capabilities as an animation and storytelling tool. QC and Framer are different because they're meant to produce non-linear interactive prototypes with rich gestures and finer levels of animations. You'll spend a lot more time in those apps, but to a different end. Keynote can be used as a prototyping tool, but it's not very good at it. If you're designing for mobile, I suggest Flinto. It's super simple, and it works on iOS and Android.

      Today I learned that Framer.js has Sketch integration, so I am very interested in trying that to build something non-linear with rich gestures quickly.

      4 points
      • Clark WimberlyClark Wimberly, almost 9 years ago

        I have a feeling that doing the exact same exercise in QC or Framer would take 4x as long.

        1 point
      • Keira BuiKeira Bui, almost 9 years ago

        Flinto is great and fast but it's too basic. So what you're saying is QC and Framer are different because they are interactive and provide better control over animation. Other than that, do you think QC/Framer prototypes would be more helpful for the developers?

        I'd definitely try Keynote now. Thanks for posting the file too!

        0 points
        • Andrew Haskin, almost 9 years ago

          I think for developers, the closer you can get to providing usable code, the better. The new Keynote can export to HTML, which supports complex animations, but performance varies, and the code I believe is quite unusable. Framer seems the most friendly for developers, but I don't have much experience with it.

          What Keynote is good at is I can quickly whip up an animation using wires or high fidelity assets to tell a story. I think using Keynote in this way comes before using QC/Framer. When you have something that looks right, and in interaction model to support it, then build a prototype to get the feel right.

          1 point
      • Jonathan YapJonathan Yap, almost 9 years ago

        I share the same experience with you Andrew. All the other tools that I've tried doesn't have the speed advantage over keynote. I can mockup a simple interaction flow in minutes compared to Framer and QC which will require sketch/photoshop to build one.

        Its also a bonus for easy quick demo to client/stakeholders, especially if you work with an accounts team which needs copy changes every 5 mins on presentations. ;)

        0 points