Animate Designs Sketch 3 and Photoshop and add Interaction
4.6 (13 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.
272 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Animate Designs Sketch 3 and Photoshop and add Interaction to your Wishlist.

Add to Wishlist

Animate Designs Sketch 3 and Photoshop and add Interaction

Learn to add animation and interaction to your Sketch 3 and Photoshop designs without writing a single line of code
4.6 (13 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.
272 students enrolled
Created by Adria Jimenez
Last updated 1/2017
Current price: $10 Original price: $55 Discount: 82% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • 1 Article
  • 18 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Add interaction to designs and wireframes
  • Create animated prototypes
  • Build microinteractions
  • Showcase app ideas to team or customers
View Curriculum
  • You should already know how to do wireframes or designs
  • The software for this course only runs in Apple computers, so you need to use a Mac. We will cover the software in a lesson.

Last course update: July 17th 2017

This course teaches you step by step how you can move your Sketch 3 and Photoshop designs and prototypes from static images to animated, and interactive user experiences that you'll be able to play with and give to your clients and users to try, like the Apple, Facebook, Twitter and other thousands of companies are doing.

My name is Adria Jimenez, and I am an engineer and designer passionate about technology, design, and excellent products. During my life, I've worked in several multinational companies where I've learned how to create curated and beautiful web and mobile applications, and recently I created several courses to teach others what I've learned.

This is one of my most favorite topics, so I carefully created this course for anyone who wants to boost their design or UX career, learning how to move from static wireframes or designs to animated and interactive prototypes that you can show to your team or clients.

What are you getting with the course?

  • Lifetime access
  • HD video lessons
  • Step by step guides
  • Prototype challenges with solutions
  • Downloadable materials and exercises
  • Knowledge quizzes

What I'll be able to do at the end?

By the end of the course, you'll be able to create animated prototypes from your wireframes or designs that will provide interaction with the user, showcasing how to use certain features of your app without even touching a line of code.

As soon as you gain knowledge with the tool, we are going to go one step further creating full interactive prototypes that you'll be able to see directly on your phone, and not only that, the course has challenges that will help you learn and progress further in your career while you also have fun.

Who is the ideal student?

The ideal student for this course is an existing UX or designer who already knows how to wireframe or design applications but who wants to advance one step forward in his or her career and wants to be able to show or test animations or interactions with clients or users.

The only requirement for taking this course is to have an Apple computer and to be open to learning new cool stuff.

See you inside the course and see how quick your designs and wireframes improve.

Who is the target audience?
  • Existing UX or designers who already know how to do wireframes or designs but who wants to advance one step forward in their carreer and wants to be able to show or test animations or interactions with clients or users.
  • Frustrated people who tried different alternatives like Framer, Origami or Quartz Composer and left it because it was too difficult.
  • This course is not probably for you if you already have an advanced knowledge about how to add interaction or animate your wireframes or prototypes.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
31 Lectures
4 Lectures 07:14

Welcome in! Be sure to check this lesson to see how to get the most of the course.

Preview 01:34

Before starting with the course, make sure you know what the course is about and make sure you are ready to start learning!

Preview 04:27

Grab all the course resources easily from here.

Course Resources

This lecture will show you where and how to download the required software for the course.

Downloading and installing the required software
Get to know the tool
7 Lectures 26:13

The interface of the software is simple but powerful so it's important to know what you can do with it. Learn in this lesson all the buttons and windows, why are they there and what they do.

The software interface

This lecture shows how you can create shapes. Which are the shapes that you can create and why.

Drawing shapes

Learn in this lecture how you can add your assets to your composition. Directly from your computer to the composition and how you can later update them.

Adding your assets

If you are using Sketch to design your assets, you'll learn in this lesson how you can import them so they look good in your design.

Importing your assets from Sketch

Learn how to properly connect your screens so they start to look like an animated prototype.

Preview 03:36

When you have different screens that share elements, the transition between them can be easily animated. This lesson will teach you how you can do it.

Animate state between different screens

    From Principle 1.1 you can directly import your designs from Sketch with one click of a button. In this lesson you’ll learn how you can do that

Import your whole designs directly from Sketch

Check your knowledge of the interface doing this quiz before you proceed with other lectures

Tool knowledge
4 questions
Your first prototype
4 Lectures 13:51

This lecture will show you how to create an animated prototype of a shopping cart.

Creating a shopping cart

Now that you've seen how easy is to animate between screens and you've put it in practice, how about if you learn how you can tweak those animations? In this lesson you will learn how to do so.

Shopping cart, polishing the animations and transitions

Creating a prototype is nice, but what is better than sharing it?

This lesson will teach you how to easily share your prototypes with clients or colleagues.

Sharing your first prototype

Test your prototype on your iPhone easily and learn how to share the prototype with your clients so they can also see it in an iPhone.

Preview 02:51
Advanced interactions
4 Lectures 18:59

This lesson will show you how to manage big content and how to make it scrollable in order to make it appear correctly for the user.

Working with big content

Dragging layers is something useful and most of the times painful to do. In this case dragging layers it's pretty easy. Let's see how we can do that.

Dragging layers across the screen

Learn in this lecture how to properly paginate your content. Something easy and fast to do.

Content pagination

Control prototype behaviors using drivers. In this lesson you will see how easy is to add special animations based on behavior.

Control prototype behaviors using drivers​

Check your knowledge before proceeding to create more complex prototypes, this quiz will let you know if you are ready to continue or not.
Check your knowledge before proceeding to create more complex prototypes
3 questions
Combining skills to create prototypes
12 Lectures 58:49

Now challenges are coming, learn how you should proceed with them so you can be sure you'll make it :)

How challenges work

Create a basic menu with different options. This will help you in the future if you need to create prototypes that have different basic actions in different screens.

Basic menu challenge

If you didn't manage to solve the menu challenge, follow the steps mentioned here for a step by step guide to solve the problem.

Solving the menu challenge

Using drivers and animation learn to build this slingshot with a tension meter prototype.

Creating a slingshot prototype

This challenge is for you to try to make an image alignment prototype where using some alignment buttons you’ll correctly position an image inside a document. We will also use the hovering effects introduced in Principle 1.0

Web interaction challenge: Document image alignment

See in this lesson the step by step instructions to accomplish the proposed challenge.

Hands on web interaction challenge, document image alignment

Apple Watch is there and this lesson will show you how to prototype for it. Including the long press interaction.

Prototyping for the Apple Watch with long press

Reacting once a user scroll and then doing an event delayed is a common pattern that is done in different situations. This lesson will show you how to do that.

Add an event delayed by scroll interaction

You like challenges? Here is another one, this time you'll have to create a gallery with picture management where you can delete a picture.

Picture gallery deletion prototype challenge

If you tried the challenge and couldn't find how to do it, now follow this step by step guide in order to achieve the challenge.

Build the gallery step by step guide

You made it, congratulations!

Conclusion and thank you

Find in this bonus lecture a collection of resources to get inspired and learn from other people ideas. This is the quickest way to start with your animation prototypes, all for free.

BONUS Lecture: Resources for Prototyping Inspiration and Ideas
About the Instructor
Adria Jimenez
3.9 Average rating
917 Reviews
13,293 Students
11 Courses
Software Engineer, Designer

I love creating software and teaching how to be more successful.

Currently, I work at Xing creating software for millions of people. I've worked in other big and successful companies like Softonic, Honda or Fnac creating websites, apps, designs, and software.

I really enjoy teaching people new skills so they can improve their lives.

All my life I've been surrounded by computers. As a child, my father - who was a programmer back then - introduced me to the world of computing, which marked me forever. Years later, after hours and hours in front of computers, I am dedicated to my passion: code.

I try to do my best to achieve the best result day by day.