Prototyping with ProtoPie: Bring Your App Designs to Life with Motion! | Ljubomir Bardžić | Skillshare

Prototyping with ProtoPie: Bring Your App Designs to Life with Motion!

Ljubomir Bardžić, UI/UX Designer • Adobe Certified Expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
16 Lessons (1h 4m)
    • 1. Announcement

      0:16
    • 2. Intro

      2:09
    • 3. About Prototyping

      2:34
    • 4. Motion in UI Design

      2:44
    • 5. Basics of Motion

      4:00
    • 6. Intro to ProtoPie

      1:47
    • 7. Exporing the ProtoPie UI

      3:53
    • 8. Scrolling

      10:53
    • 9. Paging

      9:33
    • 10. Hamburger menu

      6:25
    • 11. Scene Transitions

      2:25
    • 12. Simple Sequence

      9:12
    • 13. Sharing Your Pies

      1:34
    • 14. Bonus assignment

      0:40
    • 15. Bonus: Using a Mockup

      5:10
    • 16. Final thoughts

      0:28
11 students are watching this class

About This Class

Learning how to prototype is crucial for any UI/UX designer as it helps to test, share and showcase designs. That's why prototyping is a part of a lot of widely used design methodologies like Design Thinking, Design Sprint, Lean UX and Rapid Prototyping. Protopie lets you take your existing designs and use them to quickly create everything from simple prototypes to advanced interactions. It is a simple tool to learn but packs a lot of advanced features – this means that after watching this class you will be able to create prototypes that look and feel just like real apps without having to write any code.

Protopie goes far beyond just linking different screens, it makes it possible to add motion to your prototypes. Motion is what makes an app great. It has a lot of potential to improve the user experience beyond just making products look better. However, not a lot of people know how to use it properly. If you learn to do that, motion can become your design superpower and set you apart from other designers!

In this class you are going to learn how to create advanced prototypes and add motion to your UI design in a natural and effective way using Protopie. This class is made for anyone who wants to take their UI/UX design skills to the next level. If you know how to design an interface, this class will give you the principles and tools you need to create realistic prototypes right away.

After you create your prototype, you can record the interactions to post them online, share it with your teammates and clients, and, last but not least, you can test the prototypes on an actual phone. As a bonus, I’m also going to teach you how to take the interactions you created and package them up nicely so you can post them on social media to show off your new skill. Let's get started!

Transcripts

1. Announcement: Hello guys. Before jumping to the class, I wanted to quickly let you know that you can now get four months of ProtoPie usually work $33 for free when you watch the class. Go ahead and watch the next video to learn more about the class and how you can get your four-free months. 2. Intro: Hello guys. My name is Juma Maid. I'm a User Interface and User Experience designer and today I'm going to teach you not one but two things that will make you better at designing mobile apps. First, we're going to talk about prototyping using a tool called ProtoPie. Learning how to prototype is crucial for every UI UX designer as prototyping is a part of every major design process, like design thinking, design sprints, Lean UX, rapid prototyping and so on. ProtoPie lets you take your existing designs and use them to create everything from simple prototypes to a vast interactions. After you create something, you can use ProtoPie to record the interactions so you can share them online. You can share the prototypes with your teammates and clients and last but not the least, it lets you run the prototype on an actual phone so you can test with actual users. Since ProtoPie goes far beyond just linking different screens together and it makes it possible to have a lot of elements moving on the screen, I don't want to leave you alone in figuring out how to make all those elements move in an actual and effective way. The second thing that I'm going to teach you today is motion. Motion is what makes an app great and it has a lot of potential to improve its user experience beyond just making things look better, but not a lot of people know how to use motion properly. If you learn how to do that, it can become your design superpower and really set you apart from other designers. This class is made for anyone that wants to take the UI UX design skills to the next level. If you know how to design User Interface, you'll be able to follow this class and by the end of it, you will have a solid foundation of both principles and the tools that you can put into action right away. As a bonus, I'm also going to teach you how to take the interactions you have created and package them up nicely so you can post them on social media to show off your new skills. There will also be a bonus assignment that you can complete to practice what you learn during class and as a reward for completing the assignment, you will receive four months of ProtoPie for free. To learn more about the assignment, check the Project & Resources tab and go to the lesson titled Bonus Assignment. There are a lot of interesting things to cover, so let's dive right in. 3. About Prototyping: We'll start by talking about prototyping as it's a crucial part of any design process because it lets you test your ideas and bringing life before they go into development and into the final product. This is important because it helps you make sure you're on the right path and it lets you discover and correct any mistakes early on in the process. The first person to test the prototype will be you. Having a prototype in your hand and actually using it will give you a new perspective or what you have made and it will let you identified some basic mistakes and fix them before you show the prototype to anyone else. If he can always save the prototype on an actual device it is intended for. Next, you should show the prototype to your teammates and especially to the developers. This will help you get initial feedback to see if the team understands your ideas and the developers will be able to tell you if what he had in mind can actually be done. Just keep in mind that you can do user testing, by letting your teammates use the prototype because they are biased and not your target audience. This brings me to my final point, which is the most important thing you should do with a prototype, and that is to test it with your users. Basically, what you need to do is find some people that fit your target audience, give them the prototype, and observe them while they use it. You will later use the feedback you collected to improve your designs. This is called user testing, and it's a whole discipline by itself, so we can carry it in full today. But as we go through the lessons, I'm going to provide you with some resources, and tell you where you can learn more about it. Now that you know why you should use prototypes, let's see what kind of a prototype you can create. Prototypes usually fall into one of these two categories, low-fidelity, and high fidelity. Low-fidelity prototype, maybe something like a paper prototype or a rough wireframe, and on the other hand, a high-fidelity prototype will be something that looks, works and feels much closer to the real product. Low-fidelity prototypes are quick and easy to create, but they lack realism. Test done with such a prototype may lack validity, this is why ideally, you always want to use high fidelity prototype for your testing. But you might be asking, don't they take too much time to create? No, they don't. This may have been true in the past, but with the tools available today, you can easily create high-fidelity prototypes. Even in a fast-paced workflow like a design sprint, you have a full day for prototyping and that is more than enough time to create one using the methods I'm going to teach you today. 4. Motion in UI Design: By now, we know that we should be using high-fidelity prototypes. Now we're going to discuss what we need to do to make such a prototype. There are two main things you need to do to make your prototype feel like a real app. First, you need to make it look like a real app, if you designed UIs before, you already know how to do this. If you don't know how to do this, you can check out my other class on UI design basics. The second thing you need to do is make it behave like a real app. A big part of this is how the app moves, so we're now going to talk about motion. Motion's primary job is to help users navigate the app by illustrating the relationships between UI elements. Motion helps the UI be easier to understand and easier to use. Although it has a lot of potential, it's one of the most underused areas of UI design. Knowing how to use motion properly can really set your part as a designer. Since [inaudible] out, we're going to focus on official motion and animation guidelines for Android and iOS. These are tried and tested principles and whenever you are not sure about something, you can refer back to them. According to Google's material motion guidelines, there are three main principles motion should follow. First off, motion should be informative. It should convey the relationship between different elements, both in terms of space and hierarchy. Next, motion should be focused. It should focus users' attention on what's important without creating unnecessary distractions. Finally, motion should be expressive. Motion can add character to common interactions and help experience brand's personality and style. There is one more thing I would like to add to that list, and that is that motion should be natural. In the real world, people see things move all the time, so they're used to a certain way they move. This means you should keep laws of physics and real world examples in mind, even though you're designing digital interactions. Based on these principles, here are some common use-cases for motion. You can use it to convey hierarchy and show how items are related to each other. Motion can also be used to provide feedback and show system status. You can also use motion to focus users' attention on what's important. There is an exception where it's actually okay to use motion to distract the user, and that is to distract the user from something like loading. Motion can also be used to educate the user about ways they can use the UI. Finally, motion can add character. This is especially useful for things like error states, where a fun animation can draw the user's attention away from error that happened. These are some high-level motion principles. In the next lesson, we're going to get into more technical stuff about motion. 5. Basics of Motion: Now that you know what motion is and why you should use it in your UI designs, let's talk about some basic properties of motion, which you need to know to use it successfully. When you introduce motion to your designs, you're working with one more dimension than usual and that is time. It's natural for things to change over time instead of jumping between steps abruptly, so you need to take time into consideration. When talking about duration of different changes, we're talking in milliseconds, usually between 100 and 500 milliseconds. In other words, 0.1-0.5 seconds. Anything shorter than 100 milliseconds and the human eye might not notice it. On the other hand, you don't want to keep the user waiting for the animation to end so in most cases, you shouldn't use anything longer than 500 milliseconds or half a second in other words. Remember that we aren't adding animation for the sake of animation, but to improve the user experience. A motion should have a supportive role instead of dominating the interaction so keep in mind that long animations could get annoying over repeated use. But it's not just time alone, I want you to think in terms of speed, which represents the connection between duration and distance traveled. Motion that happens over a small area should be shorter than the one that happens across the whole screen. Keeping this in mind will help you when determining how long a transition should last. The size of the screen also affects the duration of the transition. For mobile phones, in most cases you don't want transition to be longer than 300-350 milliseconds. On tablets that number is 400-450 milliseconds and on smaller devices like smartwatches, that is 150-200 milliseconds. Web also requires a different treatment as people are used to things loading fast on the web and a slow animation can be confused for slow loading. So for web, you generally want to cut the duration you have compared to what you would use on a mobile phone. One more thing to keep in mind when determining the duration is complexity, simple animations should take less to complete the more complex ones. A simple transition may last only 100 milliseconds while more complex ones can go up to 500 milliseconds. Aside from duration and distance, there is one more thing that affects the proceed speed and that is easing. Easing allows objects to speed up and slow down instead of moving at a constant speed, this makes the animation feel more natural. There are four main types of easing we're going to talk about today. First is linear or no easing. Next, we have standard easing or ease in-and-out, how it's popularly called. Also we have decelerate easing or ease out, and accelerate easing or ease in. Without any easing, an element starts moving at full speed and stops just as abruptly. This is unnatural because we are used to objects taking time to speed up and to slow down. So you only want to use linear easing for things that are repeating like a loading icon and you can also get away with it with the things that change but don't move like when changing colors. Next, we have what's popularly called ease in and out or standard easing as it's called in material design. This type of easing let's the object speed up and slow down over time, which makes the animation feel more natural and in material design, this curve is asymmetrical and puts more emphasis on the end of the transition. For things that start moving off screen and enter transition on screen, we use decelerate easing. In these type of easing, elements start moving at full speed and then slow down. There is no acceleration phase because the transition starts off screen, so the user can't see how the object started moving. Finally, for out going objects, they start their transition on-screen but end up off-screen, we use accelerate easing. We use this so the object starts moving naturally, but since it ends up off-screen, we don't care how it stops. These are some basics to keep in mind. You'll learn more about this as well as other principles once we start working on some examples. 6. Intro to ProtoPie: Now that we know a bit about motion, let's talk about the tool we're going to use today, ProtoPie. ProtoPie lets you easily create realistic prototypes and it lets you create advanced interactions without any coding. It can help you explore different design solutions, better communicate your ideas, and gather feedback. We've already talked about why you should be prototyping, and now let's talk about how prototype can help us do that. First off, how does it work? ProtoPie's concept model is based around objects, triggers, and responses. The objects will be your UI elements to which you can add triggers that will activate a certain response. For example, tapping a button can take you to a different screen. ProtoPie supports a lot of different objects, triggers, and responses, which means there's lots and lots of combinations you can create. There is no way we can cover all of them today, but I'm going to teach you the common ones and give you the knowledge which will help you keep exploring and creating new interactions on your own. A really important feature of ProtoPie is that it lets you run your prototypes on actual smartphones, which can help you during user testing and you will be able to test as if you had a finished step. Another cool thing about ProtoPie is that it lets you use your existing designs made in Adobe XD, [inaudible] and import them right in; and in the following lesson, I'm going to show you how exactly to do that. It also lets you record the interactions which you can later share online or include the in your portfolio. It even has some real events features like being able to use the sensors on your phone and being able to connect two phones running the prototype. In the following lesson, we're going to start working with ProtoPie, and to be able to follow me along, you will need to download it and install it. I'm going to leave a link down in the description as well as on the screen to the ProtoPie website where you can download a free trial. 7. Exporing the ProtoPie UI: If you don't have ProtoPie, we're going to open it now, when you do that, you will be met with this intro screen. On the right, you have the recent files you worked on, and you can create or open your pies. That's what the files are called ProtoPie. On the left side you have some resources, we're going to open this one called basics. We have something to look at while we go through the user interface. Once you're in the main UI, on the top-left behavioral standards menus, like File Edit, Insert, and so on. Below that you have your main toolbar. On the left side of the toolbar you have your tools that are aimed at creation. These lead to add, and edit shapes, and images, and other media, as well as import your designs from other software. You learn more about these as we go through the class. In the center portion, we have device, scene settings. Device is pretty self-explanatory. Here we can pick which device you're prototyping for, and scene is an equivalent of art board or a screen in other design software. Finally on the right, whichever tools aimed at previewing and sharing their prototypes. We will go through these in more detail once we have something to preview or share. Next thing we have is Layers panel here on the right, it functions like any other layer spent on the design software use tool. There is not much to explain there. In the center, we have our main number carrier where you can preview our prototype. To navigate it you can hold space, and then click, and drag to move around. You can also hold, Control or Command, and then use the scroll wheel on your mouse to zoom in and out, or you can just use this onscreen selector, next to that on the right, we have our panel containing triggers in the responses. This is where you will be creating your interactions. Next to that is also the timeline or the value line, finally, all the way to the right, we have a Properties panel that changes based on what is selected. It lets you view and edit properties of each object or a transition in ProtoPie. Since we have this scene open, let's preview it. To do that, just click on the preview button, and a new window will open. As you can see, this first square moved right away. That's because it's set up to move as soon as the prototype starts, and you can use this reload button to start it again. Next square is setup to move as soon as you tap it. Next one will move many long press it, just clicking hold. Last one you can drag wherever you want. Aside from looking at the prototype on your computer, you can preview it on your mobile device as well, to do that, you first have to download and install the ProtoPie player app on your phone. After you do that, you can come back here, and click on device. It will show this QR code. You can use the app you just installed on your phone to scan this QR code, once you do that, the phone will be connected to your computer, and you'll be able to preview your prototype as you work on it. Now that we have explored the workspace, and looked at some basic interactions, in the next lesson, we're going to start working on our first prototype. 8. Scrolling: We're now ready to start working on our first prototype. First, we're going to go into File and create a new pie. Next, we're going to select which device we're designing for. Since our designs are made for a 360 by 64 ADP screen, we're going to go into Android and select the Galaxy S7. This is 16 by nine aspect ratio, so you should also be able to view it on iPhone 6, 7 or 8 in full-screen mode, since they are also using that same aspect ratio. Newer phones use a taller aspect ratios and you can adjust the height of the design if you have such phone, but most people still have a 16 by 9 phone according to statistics, so that's what we included. We now have a blank file before us and we are ready to import our design from XD. To be able to import a file to ProtoPie first, you need to open the file in XD. Keep in mind that XD needs to be running for you to be able to import your designing to prototype and your file needs to be open. You can find this file in Your Project tab down below. If you don't have XD installed on your computer, I'm going to include a file where the design is all important. Let's go back into the ProtoPie and click on Import. Pick Adobe XD CC, and you will be met with this import dialogue. First off, it asks you which Artboard and at what scale to import. We want contacts, and you can look up here and see that our device is @4x, so that's what we will select. Below that, we have some more options. First set here asks you whether you want to import all layers or only the important layers you marked for backtrack sport in XD, we're going to go with all layers. This second set of options is here because even after you import the file from XD to ProtoPie, you can go back into XD, change the design, and then re-import it, and it will update your prototype. But since you are importing our designs for the first time, we're going to skip all of this for now and just click on Import. Now that we have our design imported, you will notice that there are a lot of elements that do not fit on our screen, and we're going to address that by adding scrolling and paging functionality to our prototype. Adding scrolling is really easy, and all you need to do is select the container you want, in this case the contact list. Go here in the Properties panel, scroll down, and here on Scrolling and Paging, select Scrolling. Leave everything as is. Now just come down here and adjust the size of the container to the visible area. Now, if you open the preview, you will see that our prototype now here scrolling. This thing right here called Over Scroll where bounce is selected, when you try to scroll but there is nothing more to show, it will introduce some resistance and just bounce like this when you pull on it. As you see, that it is real easy. In this case, we already had a container ready, but if you don't have a container to which you can add scrolling, you can create a container. In the toolbar, you can even create a scoring container right away and then just move objects to it. Or you can also just select multiple objects and then press Control or Command G, and it will create a new container, and you can add scrolling to that. Now if we go back to our preview, you will notice that the last item is right at the bottom of the screen, it touches the edge. We will go back to our design, select that group and just make the container taller. I'm going to add 16 pixels. If we go back to our preview, you will see that there is now enough space at the bottom. You might have also noticed this scroll bar on the right of the screen that is static at the moment when we scroll. You won't encounter this often in mobile apps. But since ProtoPie can also be used for other types of apps like desktop and web apps, I want to teach you how to link this to the scroll container. To do that, we're going to add our first trigger. To add a trigger, you select an object you're targeting and click on Add Trigger, and in this case we're going to pick Chain. Scroll will be automatically selected as the value we want to chain, but you can use other values in other cases. Next, we need to add a response, so something happens when the trigger is activated. We are going to add a move response, and we're going to change the target of this response to the scroll indicator, or you can also do it like before first select the item and then add a response and it will be automatically targeted. Now, this move response will ask us for a range. First, we will have zeros at the top. We don't need an X since X axis is left to right, then we're moving things up and down, so we will only use Y. Here on the left we need to tell it what range of the scroll container we want to map to what range of movement of our scrollbar. To determine how far our scroll container is moving or how far the objects within it are moving, we will grab one of the groups. Here we can grab all of them, but I'm just going to go with one and look at the Y value, which is 736 right now, remember that. What we're going to do is just move this up to it's final position, which is it touching the bottom, that's what would happen if you would scroll all the way. Now look at the new value, which is 232, remember that. Now Control or Command Z to undo this. To move it back, we're going to go back to our move response, and what we'll do here is subtract these two, so 736 minus 232, and we will be left with 504 pixels. Now, we need to determine how far our scroll indicator is moving. To do that, we'll just grab it and move it all the way down. Just look at the Y value, copy it. Now, you can undo the move and go back to our move response and paste it in the Y value. Now our response is complete. If we go back into the preview, you can see that if we scroll, the scroll indicator will move accordingly, and it will be marked as exactly to the start and finish of the scroll container. Now, we also need to make it work the other way around, so moving the scroll bar actually scrolls to the container. To do that, we'll first need to make the scroll indicator be able to move by itself, which it can't right now, if we click on it and drag it, nothing happens. What we're going to do is select it, add a trigger, we will use drag, and as a response, we will have move. Direction will be up and down, and we will limit it to the container so it doesn't move outside this container. If we go back into our preview, you can see that it moves, but it's a bit hard to hit, so I'm going to show you one trick right now. Just select the scroll indicator and in the Properties panel, activate this property called Hit Area. We'll keep equal length for all sides, and let's do eight pixels. Now it has this area around it, and it will act like it's a bigger element and it will be easier to touch on a mobile phone. If we go back to our prototype, you can see that it is easier to navigate and it moves up and down, so we just need to map it to our scroll container. What we're going to do is we'll add the train trigger for scroll indicator. We'll be following the Y value since Y axis is up and down, and as a response, we will have scroll of our contacts list, which is a scrolling container. The range will start with two zeros, and for the ultraviolet it just flip around what we had before. If we go back into the preview, you'll see that moving the scroll indicator and the scroll bar will actually scroll our container and it will work the other way around, so everything works perfectly. Now we know how to use scrolling ProtoPie. In the next lesson, we'll talk about paging and ways you can use pages in your design. 9. Paging: We already have scrolling in a Prototype and now we will also add Paging. To do that, just select our Page container, scroll down in the properties and select "Paging". We'll leave the direction left or right and we will leave bands on and now go back up. We want the width to match the width of the screen. We will change that to 360, we want the width or height to match the visible area. If we go into our preview, you will see that our prototype now also has paging. Now you are probably guessing that this was too simple for me to call it a day and you're right. I'm going to teach you how to create more interactions from paging. First thing that we will do is make this orange tab indicator move along with the paging container. To do that we will select the "Pages Container", add a chain trigger. Then select a tab indicator and use move as a response. Now to determine the range, we will start at zero but this time I used the x value since we're moving left to right, we can skip the y-value. Now to determine the scroll distance or the position of our paging container, we will look at how I did this. It is 360 pixels wide and to get to the last page, you can move two times. So that will mean 360 times 2 or 720 and for our x-value we will do the same thing. As you can see up here, it is a 120 pixels wide, so we'll just do a 120 times 2. It can also move two times, and we will have 240. If we go back into our preview, you will see that indicator moves along with the pages. Next thing we will do is make it possible to change pages by tapping on this tab titles, by tapping on all favorite or groups. To do that, we will first select all and go down in the properties, activate the heat area, make it 16 pixels on all sides, so it's easy to hit when you preheat on a phone. Let us do that to favorites in groups so we don't forget it later. Let's go back to All add a trigger and we will be adding the tap trigger. This is the trigger that you will be using a lot of the time. It will probably be your most used trigger when prototyping. As a response let's select our pages and we will use the scroll response. For the first tab, it will scroll to zero. Now we will just select this interaction press control or Command C to copy it and then use Control or Command V to paste it two times. Now we will just change the targets. Do Favorites here and groups here, we will also change the scroll values. For the first one, we will do one full width of the screen or 360. For the second one will do 720. You might notice that now we have the timeline here before we have the value line representing x and y values. Now we have the timeline since this is our first interaction that has duration. Let us adjust that. To work on all three at the same time, first hold shift, then select the last one. You don't want to select the trigger but the response itself. Now for duration since this is a move that happens across the whole screen, we will use something like 0.3 seconds. For easing, we want to use standard material easing , which has a value of 0.420 and 0.21. To input that you will need to go in the first drop down here in easing and select Cubic Bezier. It happens so that the values we are re looking for are the default values here. So this is great news as every time you want to use standard design, you just select this option and the values you need will be right there. Now, if we go into our preview and we tap on our tabs, you will see that they indeed go to the pages they need to go to and the motion is smooth and natural. To make our tabs look in work exactly the way we think, there is one last thing we need to add. In a real app the tabs that aren't active have their titles shown with lower opacity. We are going to do that right here. We will start by selecting all three and reducing their opacity to seventy percent. Next, we have the great interactions that make them go to 100 percent and we are re going to start with all. We are going to add trigger and we are going to use something new called range. We will have it so that if the range is between 0 and 359 or going one less than 360, that happens. Also don't forget to change the target to pages and the value to scroll. If the scroll is between 0 and 359, we will have a response in change of opacity to 100. If we go back into the preview, you can see that it indeed is at 100. Even if we move away, it will stay at 100 percent because there is no other interaction to make it go back. We are going to create that right now. We can just use this one, copy it and paste it. We are going to change the range so if it's 359 or greater, the opacity, will go back to 70 percent. If we go back you can see that that indeed does happen. This works, we are going to just copy both: select both then copy and paste them two times. Now we're just going to adjust our targets. Change this one to Favorite and adjust the range for it from 360 to 719 on the right side. Here we have favorites. Change it here as well and here make the range, use this last function will true or both. Small and bigger at the same time use 359 and 719. Now for the last one, we will use between or we don't need to use between, we can just use greater than 720. Have it change the opacity of groups and the last one will be smaller than 719. Again, groups and let us go into our preview now our tabs look just like the real thing. Now we know how to use both scrolling and paging along with quite a few triggers and responses. In the next lesson, you will learn how to use a hamburger menu, which is a really common navigation pattern. 10. Hamburger menu: By now you know how to navigate on the screen using scrolling and paging. Now, I'm going to teach you how to introduce new elements to the screen. To start off, first make a side menu visible here on the Layers panel, and we will ungroup these by holding Control or Command-Shift and G. We will take this overlay and lower it's opacity down to zero, so we can later animate it back to 100 percent. Now, our trigger for starting this transition will be tapping this menu icon, the hamburger menu in the top-left. First, let's increase its Hit Area, since there is a lot of empty space around it, and let's add a tap trigger. Now, the response will be to move the side menu to the x value of zero. If you don't know, this position value is determined based on the origin point. As you can see, it's in the top left, right here, but you can move it, and it'll change the position you need to input, but since it's in the top left, we want it to move, so its top-left point is in the top left of the screen. That is the x value of zero. We will change the duration to 0.3, since this is pretty big move across pretty much all of the screen, and since here, we don't see where the transition starts or the object isn't visible when the transition start, we're only going to use this outdoor decelerate these in gas. It is called the Material design. We're going to go to Cubic Bezier and just change this first value to metro decelerate curve, and we will need one more interaction, and that is to change the opacity of the overlay to 100 percent, we'll also match the other stuff. If we go into preview, you'll see, but the menu does indeed appear. But right now we have no way of dismissing it, except restarting, so we're going to add that right now. Since when this menu is in place, the only thing that is visible except of this overlay, we're going to add a trigger to the overlay, a tap trigger to be more precise, and the response will be to move the side menu back to its original position. Let's check what it is. If we select this, it is minus 304 pixels. Let's go back to our Move and go to minus 304. Now you will keep the duration as this, because you want the exiting animation be shorter than entering. We want to put more emphasis on the object when it is entering the screen, since that is when the user is expected to interact with it, and when it is leaving the screen, it won't be accessible anymore. You want to make it shorter so it's less of a distraction. Since the transition ends off screen, the object will be off screen when the transition ends, we will be using accelerate, easing. Since we wanted to speed up as the users won't see where the object ends up. There is no point in easing it out. The values are 0.40 and then one and one, so just change one value and we have that all set. Now also, we need to make sure that our overlay disappears, we'll change its opacity to zero, match the easing and duration. If we go into the preview we'll see that it does indeed work and looks and feels great. Now, that is one way to close the side menu, but in an actual app, there is one more way to dismiss the side menu and that is by flinging it to the left where it came from. We're going to add that right now, we'll start by selecting overlay adding fling trigger, direction will be to the left, and we will just copy these responses and paste them. We also want this to work if you pull on the menu itself, so I'll copy these and just change the target to side menu. Now, if we go back to our preview, we'll see that if we pulled to the side, it will dismiss the menu. If we pull on the overlay or the menu, it doesn't matter, but it just feels a little bit more natural. You want to keep this in mind whenever you're designing an interaction looks for ways to make the interaction natural to the user. What is natural to the user is based on how things would behave in the real world. Pushing it back to the left, it feels natural if you had to pull it to the opposite side. If you would dismiss it to the right, that wouldn't look natural to the user. Those are some things to keep in mind when you're designing an interaction. Now, we have created all the interactions on this screen, and in the following lesson, we will learn how to move between different screens or scenes, as they're called in protoPie. 11. Scene Transitions: So far we have been creating interactions that happen on the same screen and now you will learn how to use triggers in the responses to move between different screens in Protopie. We're going to start by adding a new scene. To do that, go up in the scenes and click on "Add New Scene" and we need to import the design for this scene. Go to Adobe XD and this time we will import articles. Now, go back to our first scene and we're going to add a Tap Trigger to the Articles menu. Add Trigger, Tap, and the response that lets us go between scenes is called Jump. If we add it, we'll be asked to select which scene we want. We pick Scene 2. By the way, if you want, you can go to Manage scenes and rename them and delete them and so on. But we're not going to do that right now. You can pick Transition to be something like Fade. If we open the Preview, open the menu, click on "Articles" you can see that the screen changes. Now this is the quickest way to go between the scenes and the reason you would like to use scenes is can more easily organize your prototypes and so you don't have a bunch of layers on a same screen. You want to use jump for quick transitions. There are pretty standard like this one, but this doesn't offer you much control. You can make this look more like the real thing by making the menu go away first before changing the scene. To do that, just copy our outgoing responses, add them, and then just delay this by 0.25 and if we go back to our preview, open the Menu, go to Articles, it will act more like a real app. But as I said, keep in mind the jump is best for quick transitions. If you want more control, you can use the triggers and the responses we've talked about and we'll cover more on the following lessons. 12. Simple Sequence: We've scratched the surface of choreography by making multiple elements move together in harmony. But now we're going to go more in depth, and since we are using Google's material design, we're going to take some examples from their website and recreate them for the pie. We're going to start with the simple sequence example. Here we have multiple elements moving and changing color at the same time, and even though there are multiple elements, this is pretty simple to create as you will see. But there are some new things I want to teach you with this example so let's dive in. If you haven't done so yet, open the pie I provided. We'll start by analyzing the video again and see what exactly we need to do. First off, we can notice that all the elements that are moving move together. This means we can animate them using just one container. We can also notice that we have two groups of elements, those that go from purple to white, and those that go from white to purple, and we'll have to animate these separately. Lets go back into broader pie and start by making the main container move to make it easier for us to find the way we want to move it, we will set the origin to the bottom and we will add a trigger. It will be tapped on the container itself and the response will be to move y-value to 640, which is the very bottom of the screen. The easing will be material standardizing and we will match the duration to that in the example or about 0.28 seconds and if we go into the preview, and here's a quick tip to quickly bring the preview window to the front, just press Control or Command tab. This is useful as it lets you take your prototype often to make sure everything is working fine. So if we tap this, we can see it moves. That is fine. Let's go back and see what else we have to change. Now, we need to change the colors. There is response called color, and as you have guessed, it is used to change the color of an object. But there is a slight problem when importing from XD figma or sketch into ProtoPie, the files are imported as bitmaps and you can change the color of these bitmaps in ProtoPie and this might change in the future when you will be able to import vectors, but you don't have to wait for that as I'm going to teach you two different ways to solve this right now. First off, although you can't import vectors from XD, you can draw them in ProtoPie. I went ahead and replace elements with shapes and text, and now we can animate them. Let's start adding responses. Here in the main container, we're going to start with this main info bar, add a color response and change it to this purple. If you don't have this purple saved, grab the eyedropper here and let's sample the color from the floating action button. Now we'll add one more color transition. This time, we will target the text and the value will be go to white. We can copy this and paste it two more times and just change the target. Now let's select all of these to match the easing and duration to the other transition. Now let's just control tab to quickly preview the prototype and we can see that the color changes. Now all we have left is to change the color of the floating action button. Let's go back. Let's select the button and we can actually just copy this transition one more time and target the FAB shape. Make it go white. Now we want to make this, I can go purple, but here we have one more slight problem, this icon right here is a bitmap and there is no way to import it as a vector, and there is no way to draw this for the ProtoPie as a vector. But don't worry, this is where our solution number two comes in. What we will do is use two different versions of the same icon, one white, and one purple. I've placed them over each other. The purple one has an opacity of zero at start, and the white one has a capacity of 100 percent. What we're going to do is just animate their opacity. One will go to zero. Will match our [inaudible] is in duration. Let's copy this interaction. Target the purple icon, and make it go to 100 percent. Now, if we go into our preview, we can see that this works great, and if we reset it and even slow it down, you can see that it still looks great so we could use this method for the other elements as well and just he had them in two different colors and then just animate with opacities. What I wanted to teach you both ways and I wanted to show you that you can use both of these side-by-side in the same transition and as you can see here, even slowed down, it looks great, there are no troubles. This brings me to a quick tip I have for you and that is when working in your design software of XD or figma, you want to design a both the start and the end state of a transition, and then import them into ProtoPie and figure out how to transition between them. One useful trick is to import them as two separate scenes so you can jump between them to grab the values you need, and grab the colors and so on. Now, let's just create reverse transmission of this. We'll use the map as our depth area. We'll copy all the responses. First let's see how far we need to move this main container, the y-value is 8.24, so we will use that here. Color will just reversed, everywhere that it's purple will change to white. Here you can select multiple items at the same time. If they share a common value, it will be shown here. You can change all of them to purple, will animate this also back to purple, and on the opacity just change the values and if we go back to the preview, you can see that it works. We'll go back to full speed, and this works great. Now, if you remember what I told you in one of the previous lessons, you want to make these interactions feel natural. What natural is based on how things will behave in a real-world, so in this case, it would be natural if user is able to Fling up and down to bring up or dismiss this main element, so we are going to do exactly that. We are going to wrap map and use it as our target area, and we will use Fling up. We will copy the responses for bringing our main element up, then we'll add one more Fling trigger, this time down and we will copy all the responses for dismissing our main element. Now if we quickly go into the preview, you can try and see that the flinging up and down, pretty much everything on the screen will bring up or dismiss our container. Things like this only takes seconds, but can greatly improve the quality of your prototype. 13. Sharing Your Pies: Now that you know how to create a prototype, let me show you how you can share it. There are two main ways to do this depending on what you're trying to achieve. If you want to post the interaction you created on Dribbble, Behance, Instagram, or other social media, what you can do is record the interaction. It's really easy to do, you just go into the preview, click on this "Record" button, and then just interact with your prototype, and it will be recorded. When you're done, just click on "Stop", and it will ask you to pick a folder, and when you do it will convert it into an MP4 video. A bit later, I'm also going to teach you how to frame this video we just created within a Film Mockup, but first, let's learn the other way to share prototype, and that is to upload it to the Cloud. To do that, you just click on this "Upload" icon in the top right here at the corner, and as you can see it asks me if I want to save the changes first. I'll click on "Yes", and now it's uploading to the Cloud. Now we have a link where you can go to check it out. You can now send this link to other people to share it with them, and as you can see it also lets you open the prototype in the mobile app by scanning the QR code and it also lets you download it. Now you know both how to create and how to share your prototypes. 14. Bonus assignment: If you haven't posted a class project yet, you should do so. But to reward you for making it this far into the class, I'm going to show you how to make your class project even better. The basic version is to just grab a screenshot and post it along with the link to your prototype. But we're now going to go a step further. What we will do is record the interaction, which I showed you how to do in the previous video. We're going to take that video and put it into a foam mockup. If you don't know how to do this, I'm going to teach you in just a minute after we have everything already. You'll pose the thumbnail, the video, as well as a link to your prototype in the project section. Now, let me show you how to put the video for your interaction into a foam mockup. 15. Bonus: Using a Mockup: To start off, we need a mock-up, so let's find one. We will go on Google and let's go for iPhone 6, 7 or 8. They have the same screen resolution, so it doesn't matter which one we go for. Let's go for this first image. Go to the link, scroll down to download this. Once you do that, open it in Photoshop. Now, in case you don't know how to use mock-ups, I'm first going to show you how to use it with still images before we get into doing it with video. What do you need to do to put your design into mock-up, is double-click the smart object containing the screen. If you don't know what a smart object is, I'm going to put the Adobe's official definition on the screen, but basically, it's a layer that lets you edit the images while preserving the original data, and it lets you update the same data. You will find it in the Layers panel, and in most cases it's clearly named. In this one, it's called "Your screen, edit me". What you want to do is double-click on the timenail and it will open a new file. Now all you need to do is grab a design and drag it in. Click "Okay". Press "Control" or "Command" "S" to save this, and if we go back into our main file, you will see that it has been updated. You can go ahead and export this as you would export any other image at the Photoshop. To do it for video, it's pretty similar. Let's reset everything to how it was before and see what we need to do. First off, to work with video in Photoshop, we need to open the Timeline panel. To do that, you will go to Window timeline and we'll click on "Create Video Timeline." Now, we will open our smart object, and here, the timeline will already be opened, but it will be set to frame animation timeline and we want to change it to video timeline, so we'll click this little icon right here. Now we'll grab our video and drag it in. I'll hide these other layers and resize this to fit. Click on "Okay," and we can actually delete these other layers. We will save this, so "Control" or "Command" "S", and if we go back into our main file, it will be updated. Here in the layers panel, we'll delete this reflection group just to make this simpler and to also simplify it even further, we'll ungroup this, back this iPhone group. To do that, just hold "Control" "Shift" "G" or "Command" "G" if you're on a Mac, and do it again to angular pivoting. It will simplify things and all the elements will look the same in the timeline. What we want to do now is adjust the duration of our elements. First, we'll zoom out a bit and we'll select your screen layer. We will grab the right side of it and drag it. After a certain point, it won't let you drag it anymore, and this is because this video has it's specific length, and you can't go past it. What we need to do now is match the duration of our layer, so they don't disappear halfway through a video, and if we preview this section, you will see that they are not visible, but if we drag them and snap them in, you'll see them starting to appear. Just do this for all the elements or layers, and it will snap to the end, but since these are images, you can just drag them as far as you want, and this means you can match any length of a video that you may have. After we have matched our final layer, we are done, and to export this, we will go to "File", "Export", "Render video". Now just pick a name for it, select where you want to save it, and you can leave everything else as it is. Click on "Render". Just give it some time to export the video, and we're done. You can now post this video online to show off what you have made, and I encourage you to post it in the project's gallery down below. You now know how to use Photoshop mock-ups with video, and this works with pretty much any mock-up you will find online, so I encourage you to try out different things. 16. Final thoughts: If you've made it to the end of this class, I hope that you've enjoyed it and that you found it useful. If you would like to learn more about motion and prototyping, I'm going to leave links to some useful articles down in the product description. To perfect your skills, I encourage you to complete the assignment I gave you, and I encourage you to keep practicing. If you would like to learn more about design in general, consider watching my other classes and following me. Thanks for watching. I look forward to seeing your projects, and until the next time. Bye.