Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Origami 2.0 add interaction and animation to your designs to your Wishlist.

Add to Wishlist

Origami 2.0 add interaction and animation to your designs

Learn Origami 2.0 and Quartz Composer to quickly add animation and interaction to your Mobile and Web designs
3.8 (17 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.
744 students enrolled
Created by Adria Jimenez
Last updated 1/2017
English
$19 $45 58% off
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • 2 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Add interaction to apps/websites easily without code
Prototype apps/websites using Origami and Quartz Composer
Animate designs easily
Import designs into Quartz Composer in an easy way
View Curriculum
Requirements
  • Having a bit of design knowledge is recommended
  • I recommend to have already some prototypes or designs so you can start right after doing the course
  • Having a bit of design or prototyping knowledge is recommended
  • Is recommended to have at least used Quartz Composer before as this course asumes that you know what things like patches and compositions are
  • This course is about Origami 2.0 for Quartz Composer, not for Origami Studio
Description

Course updated on 26th January 2017

Join more than 700 students in this course to learn how to easily and quickly prototype, add interaction and animate your mobile and web designs with Facebook Origami and Quartz Composer without coding.

This course teaches you step by step how you can use Origami to create prototypes and add animation to your designs. If you already tried to read the documentation on the website and you find it quite confusing, then this course is for you.

With this step by step course with the full explanation of how you can use the different patches and how you can combine them to create the animation or the interaction, you were looking for. All the lessons include downloadable material that you can download and play with.

Forget about other tools or coding, Origami and Quartz Composer are the tools to use if you are a visual person.

Learn how to use quickly Origami by following my method and be ready to create designs, interactions and animations fast and in a very easy way.

Join the new era of designers, start showing your designs with interactions and animations and look at your clients reaction!

The course includes all you need to know from beginning to end.

This course is targeted for designers, UX, freelancers, developers or all kind of people that would like to design, prototype or add interaction in an easy and up to date way.

Don't lose more time with static designs and join the animation and interaction era.

Who is the target audience?
  • You should take this course if you want to learn how to prototype fast
  • Take this course if you want to start using Origami but you find the website tutorials quite hard to follow or the documentation not clear enough
  • You should take this course if you want to learn how to add animation and interaction to your designs and prototypes
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 32 Lectures Collapse All 32 Lectures 02:26:12
+
Get to know the tool and how you can benefit from Origami additions
8 Lectures 24:33

Welcome to the course. Check this lesson to know what the course will be about and how you can benefit most from it!

Preview 02:29

Learn more about Facebook Origami

About Facebook Origami
00:10

Grab all course resources from here

Course Resources
00:07

Origami works ove Quartz Composer from Apple so first let's have a look at the basics of Quartz Composer and how can you use it in integration with Origami.

Learn how to use new Origami Quartz Composer features
03:52

Origami now has an option to export a Pop animation to Objective-C (iOS), Java (Android), or Javascript (Web). This lesson will teach you how you can use it.

From Origami to Code, exporting to code
03:51

Learn how to see your compositions on your mobile devices. This lesson will also teach you how you can see your compositions in a big screen.

Origami live and presentation mode
03:38

Exporting the right images is the key to successfully creating a nice animation/interaction, so this is a key lesson. Learn how to think when exporting the right assets for your Origami composition.

Learn how to export the right assets for your compositions
02:58

The latest version has a very cool feature that you'll discover in this lesson. Real time update of your images! So you'll be able to update your designs and all of your compositions will be updated at real time without the need to re-import the images again after each modification.

Exporting your designs and updating them real time
07:28

Check your knowledge by challenging yourself. How much did you retain from the interface? Do you know for sure how you should export your assets? Check it now!

Interface and exporting/importing your designs
6 questions
+
Origami Patches
12 Lectures 50:30

The most basic patch. The layer path. Everything that should be displayed in your composition will end up in a layer so as it may seem really basic is very good to pay attention and learn it correctly.

The basic layer, knowing the most useful patch
03:22

Border layer patch was created for easily adding borders to your layers. This is useful for showing your clients where they can interact with the app.

Adding a border to a layer
02:56

Learn about the button patch and how you can easily create buttons that receive interaction without even the need of designs.

Preview 05:06

Learn how to toggle different animation states to be able to create animations with a transition.

Switching states to create animations with a transition
04:59

The most basic animation. The classic animation will let you easily create animations with different curves.

Preview 02:15

Learn how you can connect remote patches together in this lesson.

Connecting patches remotely
05:46

Spring animations is the new thing to be, so learn how you can easily create them in Origami thanks to the new Pop animation patch.

Spring animations and code export
03:11

Sometimes you need to add a delay to an animation so this patch will help you do so if you know how to use it. This lesson teaches how to use the delay in your animations.

Preview 04:08

A lot of the times you need to be able to scroll through your design, can be to show something or to allow the interaction by itself. As this is really needed, in this lesson you'll learn how to easily do it.

Adding scroll interaction to big designs
06:17

Sometimes you'll need to loop an animation for your prototypes. This lesson shows you how you can easily do it.

Looping an animation
03:47

This is a really important lesson as you'll learn a tip that a lot of times nobody knows. How to connect multiple outputs to one input? As you may know, Quartz Composer doesn't let you do that, but thanks to this lesson you'll learn how you can do it.

Connecting multiple outputs to one input
07:10

Take a look at more than 100 patches available for you in Quartz Composer. Don't just limit yourself to Origami!

Note on patches
01:33

Are you sure that you know how the patches work? Now it's the time to prove it.

Get to know your patches
6 questions
+
App flows and real use cases
5 Lectures 34:25

The keyboard is a crucial part when you are working with forms or inputs and you want to showcase the use case of clicking on an input. In this lesson you'll create a reusable keyboard show/hide patch that you'll be able to use across your projects and compositions.

Showing and hiding your keyboard when needed
07:30

Creating reusable patches let's you boost your productivity as you'll be able to just add your patches without the need of creating them from scratch. In this lesson you'll see how to create the reusable keyboard patch so you can use it in the future in your compositions.

Creating a reusable keyboard patch
03:31

Some people think that is not possible to use Origami and Quartz just to connect simple screens and showcase your designs as it might be really complex. Well in this lesson you'll this that this is just a myth. This lesson will teach you how you can easily showcase your designs doing screen connections really quick.

Connecting app screens to show user flows
06:08

This lesson will show you how to create a sliding menu animation like the so typical hamburger menu.

Sliding menu animation
09:14

Learn how to present content to the user using a small and nice animation that will boost your animation designs!

Presenting the content to the user with an animation
08:02
+
Exercises and challenges
4 Lectures 28:25

In this this lesson we'll create a parallax animation effect with a combined bounce animation. You'll see how easy it is.

Application parallax effect
09:57

Now it's time to try it yourself. Check this exercise explanation and try to do it by your own. If you struggle with it just continue to the next lesson to see step by step how to do it.

Creating a lightbox exercise explanation
01:25

Did you finish the exercise? Now it's time to check the solution explained step by step so you can follow and compare your approach with the one presented here.

Creating a lightbox solution
09:00

This lesson will teach you how to revert the existing transition that we have so we can go back to our initial animation state.

Lightbox solution, dismiss the lightbox
08:03
+
Course conclusion and extras
3 Lectures 03:20

Check and learn the Origami keyboard shortcuts that will boost your productivity once you learn them.

Origami Keyboard shortcuts
5 pages

If you are here, that means that you successfully followed the course, congratulations! Check my last tip and start prototyping and adding interaction and animation to your designs!

Course overview and thank you
02:09

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
01:11
About the Instructor
4.0 Average rating
692 Reviews
12,181 Students
10 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, that 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.

Report Abuse