Bring Your Design Concepts to Life with Keynote
4.9 (44 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,310 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Bring Your Design Concepts to Life with Keynote to your Wishlist.

Add to Wishlist

Bring Your Design Concepts to Life with Keynote

Animate your app design work and bring your concepts to life to start winning clients over effortlessly.
4.9 (44 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,310 students enrolled
Last updated 11/2015
Curiosity Sale
Current price: $10 Original price: $75 Discount: 87% off
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • 12 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Animate their design work
  • Share beautiful video mockups of their app
  • Show clients and developers what the finished product will look like before it's built
View Curriculum
  • For Mac Users
  • Download and Install Keynote from the App Store
  • Recommended design experience

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.

Who is the target audience?
  • Designers of all kinds
  • Especially App Designers
  • Not for those looking to learn design from the ground up
Students Who Viewed This Course Also Viewed
Curriculum For This Course
23 Lectures
3 Lectures 09:04

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.

Preview 00:59

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.

What is Keynote?

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.

Preview 03:05
Document Setup and Keynote Basics
4 Lectures 19:22

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.

Creating a New Document

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.

Interface Tour

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.

Customizing the Toolbar

Quiz on the Basics
2 questions
Exporting Assets from Sketch, Photoshop, and Illustrator
3 Lectures 19:27

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.

Exporting Assets from Sketch

Quiz on Exporting from Sketch
2 questions

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.

Preview 06:33

Quiz on Exporting from Photoshop
2 questions

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.

Exporting Assets from Illustrator

Quiz on Exporting from Illustrator
2 questions
Putting it All Together in Keynote
3 Lectures 24:20

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.

Assembling Assets in Keynote

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.

Creating and Styling Shapes

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.

Creating and Styling Text Boxes

Quiz on Designing in Keynote
2 questions
Animating Your Design
6 Lectures 32:56

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.

Introduction to Builds

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.

Adding Builds

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.

Build Order

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.

On Click, Build After, and Build With

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.

Preview 07:06

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.

Reverse Magic Move

Quiz on Animating
3 questions
Exporting Quiz
3 Lectures 07:16

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.

Timing the Presentation

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.

Exporting the Video

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.

Creating the Mockup

Quiz on Exporting
2 questions
1 Lecture 00:59

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.

About the Instructor
Joseph Angelo Todaro
4.7 Average rating
1,876 Reviews
9,627 Students
2 Courses
Art Director & Software Instructor

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