Keynote has quietly revolutionized the world of mobile application design by providing the tools to transform your flat designs into fully animated and engaging concepts with only a few hours of training. This course will teach you to use the Keynote application to design dynamic, animated mobile app UIs that impress clients and engage users.
Learn to Build Beautiful, High-Quality Animated Mobile Application UIs with Keynote’s Powerful Tools and Smooth Workflow
• Master the essential principles and tools of Keynote.
• Discover design techniques that will enhance your creative potential.
• Learn and implement best practices to ensure quality and impact.
• Journey from concept to completion by animating a sample mobile application.
Find Out Why Some of the Best Designers in the World Use Keynote
Many of Silicon Valley’s most established and fastest growing companies swear by Keynote when animating UIs for mobile applications because it’s fast and intuitive, and produces stunning final products.
One thing that sets Keynote apart is its nearly one-step “Magic Move” transition which animates the difference between to design comps. This course will teach you the power of Magic Move, as well as many other advanced design techniques available within Keynote.
Contents and Overview
Whether you’re a beginner or a veteran designer with experience using Photoshop and Illustrator, you will find this course valuable in the way that it blends step-by-step instruction with hands-on, customizable exercises:
• Mobile App Animation from A to Z: With 23 lectures and 2 hours of content, this course covers everything from preparing assets, designing elements, and precision animation timing to exporting finished video mockups.
• Workflows for Sketch, Photoshop, and Illustrator: Since not all designers use the same tools, this course covers the workflows for bringing in designs for each of the top 3 design applications used by professionals.
• Test Your Knowledge: Periodic quizzes will review key concepts and ensure that you are mastering the content.
• Interactive Design Project: Together with the instructor, you will animate a sample UI for an iPhone music player app. Included Sketch, Photoshop, Illustrator, and Keynote documents allow you to pick up at any point in the project.
After completing this course, you will understand how to animate high-quality mobile application UIs using Keynote and you will be better prepared to meet the demands of your clients and developers.
Allow me to introduce myself. I am Joseph Angelo Todaro and it's a pleasure to meet you. Let's talk about what this course is all about.
Keynote is the application we will be using for the duration of this course. Let's take a look at what Keynote is all about and how to get it on your Mac.
Attached to this particular lecture, you will find all of the demo content and sample files for the course in a single zip file. In addition, files will be redundantly attached to lectures along the way. Use either or. This video discusses what is included.
Creating a new document is where it all begins. Let's open up Keynote and look at how to get started completely from scratch. We will set up the document to be the perfect canvas for bringing in our design elements without having to resize or adjust anything.
Autosave can be a confusing feature for those who are unfamiliar with it. Let's take the mystery out of it and look at how helpful it can be, along with a few warnings and workflow tips.
It's time for a tour around Keynote. We will look at the interface, where your tools are, how the inspector works, and how to get around quickly and smoothly.
The toolbar at the top of Keynote gives us quick access to commonly used tools and features. The problem is, Apple doesn't know what we want up there. Let's customize our toolbar to make it suitable for our workflow.
Sketch 3 is a very powerful and very popular UI design application for the Mac. Let's look out how to get our design assets out of Sketch so we can start dropping them into Keynote.
Photoshop is still the industry leader for UI design. Let's look out how to get our design assets out of Photoshop using the Generator tool so we can start dropping them into Keynote.
For those of you Illustrator users out there, let's take a look at some of the challenges and opportunities when preparing your design to be brought over into Keynote.
Now that we have our assets set aside, it's time we start assembling our Keynote document. We will bring in our design elements as well as layer and position them properly. This is the tedious part but we will get it done quickly and put it in the past.
Some elements are better off created in Keynote rather than being brought in from the outside. Shapes can have their styles, and proportions later animated with no loss in quality. That's definitely something to take advantage of.
Much like shapes, text has some advantages when recreated in Keynote. The text is vector and looks very clean, making changes to text will be very easy, and using text boxes in Keynote, you gain access to additional animations that are text specific. So let's rebuild our text elements real quick.
We finally made it past the assembling phase. Now it's onto animated. Before we start making deliberate animation decisions, let's first talk about Builds and the role that they play in Keynote.
Now we are ready to start adding builds to our elements and making things animate onto the page. Using builds, we will determine how things appear and how quickly these things happen. This is a big big step.
Animating can get a little hectic when we have a lot of elements. By default, our builds animate in the order that we add them to the document. This doesn't have to be the case. We can rearrange our builds at any time to be absolutely sure that we get things to flow the way we want them to.
Some builds need to happen one after the other in sequence, but many need to happen at the same time. Especially in an opening animation, many things will be happening at once. Here we take a look at the three options we have for sequencing our animations together or separately.
More often than not, between two screens, things may move around but still be visible. Here we take a look at one of the most powerful features of keynote, Magic Move. Magic Move allows us to animate the changes between two design comps with little to no effort whatsoever. It really is like magic.
Since Magic Move is so very powerful and so very automatic, let's do a quick trick to make things animate back to the start.
We've got our builds and transitions set, but it's not all automatic. We've set a number of our builds to happen automatically, but the transitions are still waiting for our click. While it's possible to set this timing to be automatic, it can be much more natural to record the timing by clicking through our presentation in real time. Let's get our timing dialed in.
You've done it! All of your animation is set and all we need to do now is produce our Quicktime video. Let's take a look at the export settings that yeild us the best result possible.
Our video is finished! Now let's add some extra polish by making it look like it's playing on an actual iPhone sitting on a desk. This is the type of thing that really brings your presentations to the next level. And it's very, very easy.
You made it! Congratulations on completing the course and thank you for being a part of it. You are the reason I do this and I hope your work is never the same.
My entire life I have been aware of one very simple principle; sometimes information vibes with people, and sometimes it does not.
I have a passion for making information resonate.
It all starts with how people think. With how humans work. As humans we have learned how to read and write and while that is incredible, we are also already hard-wired to do some things a bit more "automatically". We are animals – designed to see things things as a whole. To start with a big picture and build understanding as we break it down. To learn from the visual. The spacial. The tangible.
Information can be all of these things. The difference is design.
I am a software instructor and designer who uses the art of design to nurture effective communication. Through 5,000+ hours of face-to-face teaching for the largest software company in the world and 10+ years of exploring the visual arts, I have learned to make information work for people.
"People ignore design that ignores people." - Frank Chimero