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?
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.
Welcome in! Be sure to check this lesson to see how to get the most of the course.
Before starting with the course, make sure you know what the course is about and make sure you are ready to start learning!
Grab all the course resources easily from here.
This lecture will show you where and how to download the required software for the course.
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.
This lecture shows how you can create shapes. Which are the shapes that you can create and why.
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.
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.
Learn how to properly connect your screens so they start to look like an animated prototype.
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.
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
Check your knowledge of the interface doing this quiz before you proceed with other lectures
This lecture will show you how to create an animated prototype of 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.
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.
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.
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.
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.
Learn in this lecture how to properly paginate your content. Something easy and fast to do.
Control prototype behaviors using drivers. In this lesson you will see how easy is to add special animations based on behavior.
Now challenges are coming, learn how you should proceed with them so you can be sure you'll make it :)
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.
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.
Using drivers and animation learn to build this slingshot with a tension meter 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
See in this lesson the step by step instructions to accomplish the proposed challenge.
Apple Watch is there and this lesson will show you how to prototype for it. Including the long press interaction.
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.
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.
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.
You made it, congratulations!
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.
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.