Keynote does Material Design (vimeo.com)
almost 9 years ago from Andrew Haskin, Interaction Designer at frog
almost 9 years ago from Andrew Haskin, Interaction Designer at frog
That's amazing! Thanks for sharing. I never knew Keynote was capable of that.
they've also done ios7 main menu on word.
Super cool. I would love to see the Keynote file!
Link posted in the description. Take a look!
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
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.
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 :)
Right on! I'm a big supporter of Keynote. I even customized my Sketch toolbar to match Keynote's; can't beat it. Haha :)
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).
Hey great link! I echo all those bullet points on using Keynote at a prototyping tool.
That's pretty cool that Keynote can do that, but is it really better than just mocking something up in AfterEffects?
What do you mean with "better"?
A prototype is a prototype, right?
Which one is easier?
I would say Keynote.
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?
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
You got it! What a great way to bring rich illustrations to life!
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!
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.
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.
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.
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.
Good point. I do this myself too. In Keynote it gets really frustrating when you have too many objects or animations in one view.
This is super sweet! Thanks for the share!
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.
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.
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.
That's pretty cool that Keynote can do that, but is it really better than just mocking something up in AfterEffects?
Wow, that is awesome!!
Keynote and Mica are the tools Apple designers are using most for prototyping. I'm big fan of Keynote too.
Are you sure about Mica? My understanding is that Mica was based on the Shake engine within FCP, but was discontinued.
Are you sure about Mica? My understanding is that Mica was based on the Shake/Motion engine within FCP, but was discontinued. Here are some details from Nov 2013: http://alex4d.com/notes/item/imovie-2013-and-fcpx-10-1-part-3
Yes, pretty sure.
Cool. Apple Designers also use Keynote for prototyping. If you have a Developer Account, check out the link to see how they use Keynote to prototype Apps. https://developer.apple.com/videos/wwdc/2014/?id=223
Which talk is it?
"Fake it until you make it"
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..
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.
I have a feeling that doing the exact same exercise in QC or Framer would take 4x as long.
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!
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.
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. ;)
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now