Create an animated emotion world with Invision Studio | Nicole Wolf | Skillshare

Create an animated emotion world with Invision Studio

Nicole Wolf

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (36m)
    • 1. Intro

      1:28
    • 2. Introduction

      7:52
    • 3. Creating the design

      8:53
    • 4. Introduction animations

      7:55
    • 5. Animation on Emotion World

      10:10
13 students are watching this class

About This Class

In this Class, I will show you how to create an animated emotion World for an Online Shop. No experience necessary. I’ll show you how to use the tools of InvisionStudio, creating multiple elements and how to change all by one. You will learn what is important on the first Page of an Online Shop and also what is not necessary. This class is for anyone who is interested in UI Design, especially for a User-friendly E-Commerce Design.

What You’ll learn

  • Working with InvisionStudio. Because InvisionStudio is, in my opinion, the best choice to create a presentation of what your design will look like. With the help of these step-by-step instructions, you can quickly learn how to create the best presentations for your design.  It is important to have an overview of which programs bring you to success.
  • Starting to build a UI Design  You’ll learn exactly how to start designing a UI Design. In this step, I’ll show you how to create a header of a Page and also how to create icons. I will go step-by-step and explain detailed what I’m doing and how you can work with it. The skills you will learn in this class are important because it will help you to become a good UI Designer.
  • Emotion World + Content of the first view of the Page After finishing the Header + Icons We will have a look at what is important on the first view of the Page. We will discuss what your customer need. 

  • Creating an animation with InvisionStudio
    I will introduce you how to animate in Invision Studio. Step by Step I will show you how you can add animations to your designs. Also, I will give you some tips on how to make cool fade effects.

847a9abe

6e048523

Transcripts

1. Intro: Hi and welcome to muscular share class. My name is Nick Evolve. I am 21 years old. I live together with my small cat picture in Paderborn, Germany. I am working at eight miles. We are specialized on online shops. We are working with the e commerce system shop there And yet in our agency it's everything around. Just initial in my agency. I am working as a front end developer. And you I designer with my team. Together we are focused on how to design an online shop and also how to develop these in my cars. I will introduce you the basics off envisioned studio and how you create a friend. You I design You don't need any experience. We will be focused on practical workflow and I will show you how to apply it on your daily work. If you will design an emotional world for your online shop also, I show you how you can any made your emotion world In the first part we were being focused on the design and I can Then I will show you how to set up a project and its structure at the end off this cause you will be able to create and full design with animations on envisioned studio, so stay tuned and let's get started. 2. Introduction: Hi and welcome to the first lesson off my class. In this first part, I like to show you envision studios, interface and some shortcuts. We start now by explaining the welcome screen. So here is the welcome screen you have here. The version here is your last project. Or you can add some off the cloud you have here some devices which you want to use like the make. No, it's the size off you're off to make. Here we have. The resource is where you can love from studio support or give feedback. And here you have the tutorials where you can No. And here you can open your studio are also important. Your sketch fire. In the next part, we will be open the device I make. But now we just open the determiner animations. We just open the animation tutorial. And now you see, here are two art boards and some groups off the art boards. You have here the introduction in for how you can at the animation. But now we just only look on the how to at the animation. And then we go to a blank in with and I will show you how to work with InVision Studio. We select the Group one off the Airport one and click on the Thunder and at the animation Toe Art book. Then we just use the trigger, swipe right and emotion and now we save it and that's it. This is the animation. And here we can on the play button located. So, as you can see, here is the first are part. And when I swept right you see how the animation will work. Though this is the first introduction, how you can use animations But I will show you in detail in the next lessons how you can add any nations. All right now, back to the Blanken was where I will show you some introductions. How to use invasion studio. We can start with ending re tingle pretty easy. You just only select air and Kendrick it. How big he want can also edit the re tangle with this layers and also other shapes like to circle or with some Bader radios under right side. You can see what you can do with the with your layers, like for example, putting it in the middle in the center off your your art board. Then you can feel the Conners. Just leave them. You consider the colors you can add some border or shadow or in a shelter. And here you all, So have the interactions for the animations. All right, then you can at some others. Um, then we can ads. That's put it here. Then we can add some text. You can just select it here, Or are you just press TV? And then you can Oh, I contact something like, Yeah, let's type something better. Pizza is the best. Nice. So, yeah, you can see here it's fixed. InVision studio. You have two sizes you can use out Oh, so it's not responsive or use fixed. Then it's a responsive on the size you want them. That's pretty cool. Now we can. The size are the line. Haith way can make bold changed the upper city. It's like you can do everything very simple basics for you to understand how and regime is working. It's the same us you work in sketch or in 60. Okay, it's Let's get on. You see on the left, the Ark part and the pages you can at some different pages. For example, if you're in the flow and you have more pages, like about us or the one page check out and then you can switch to another page. And here you have the outboard off the selected page. Now you can and you can't The art brought So, for example, this would be my front side, my Yemeni, my emotion world. And then we go on with the listing off. The shock is pretty easy. Toe adds more outboards. You can switch from both, and the coolest thing off this outwards are that you can add animations, but I will show it to you in the next list. Now show you how you can at the group you select. So just make command G. And now it's a group. You're also in the group. You also can mark everything and to another group, and you go for another and another. And if you want to change names, you can just double click on the name and name it like Peter, and then you can do enter at any to enter and the group has changed. But if you want to change every group, you can double click on it and then go with tap like pizza to our pizza tree. I hope you understand what I want to say to him. So if you're finished with our renames, you just put in the enter end. It's safe. These are the basics. How you can add some re tangles, how you put in element. Now I will show you home me implement pictures and we size them, right? All right. I just delete everything in the Ark Park because I make now the big returnable and show you how to implement a picture. Just direct a picture in this file. And as you can see, the picture is really big and don't fit in the upward. You just can drag it down. And now it's on the right side. But you can also what I would do through a mask on the re tangle like this. Another picture fits in the mask so you can no record in decisis you want, and you can now directed position like you want. And it's perfect to your sighs. No, I just copy and paste of our boat. So you have a leather run and when you want another picture, are the size is the same as the picture you have here. You can just go on fills and drink and select the other picture. You won't like this. And as you can see, a science is now the same us the first picture. And now you can. If you want a record like you, I would do it. And all right, guys, I hope with this small introduction to envision, I could show you how you can use. Envision. And now let's get started. And the next lesson we will be creating the header and the slider. See you in the next lesson by 3. Creating the design: we'll come back to my class. Everyone, We will be now creating thes design. We will be starting with the header. I will tell you why I choose this design. We will be creating the slider headline with the products. And at the end, we will be creating the animation off this design. So let's get started. I create now and you side and create the getter for the outboard. You can choose 12 columns, but I also like to use the grid because that you can do better. The the spaces between the elements. I start now with the local under left side. Yeah, I start with logo used. The fund, family, summer hearts and, yeah, waas A little bit bigger, I think. Like this. Uh Yep. So And put it in the top like this. Then we will creating navigation here. I have using the light fund off quicksand and of fund sighs off. Yeah, it. Then there will be putting it in the underground that everything is on the line. All right, then. I made the shop navigation. I already prepared some I can what is also really cool in in vision, you have to shape off your I can if it's ah, As for G, I can So I can now make group off it and resize it like I want a little bit more space between the navigation like this having after I make the shopping card. Not so you can see my design, the quantity, and this will be Yeah, this will be like that. Okay, That's what small they I think like that. And, yeah, put it in the middle off the I can and we will be adding the other icann's like the user I can. They're also make a group off it. Name it Hughes er, and you size it to Desai's like to shopping card. Okay, I think it's a little bit bigger. So I decide that again yet? Like that? No, I applied to search. I can also group ID and name it. Um then resize it to the size you need us. Look that it's in the right grit. So it looks similar to the others like this. And the header off the page is ready. I tried to make the header many mill because when the Kozma comes on the emotional world, the first wing he sees is the big slider. We want to concentrate us under eye catcher and this is the big product picture from the customers so the customers can see what he's selling. Am creating the big sliders. I already shown you how I imply images. I first I dropped a read. No, I think on this size. And I saw now that I forgot one I can under on the right side menu is Miss IFOR's group it . Then we can resize it. All right then, Back to the re tango. I think this size waas already good and I concentrate on making it a little bit more left side because on the right side will be here the title and the product. First I create the group off the shop navigation in college navigation and then also a group off the main navigation. And now we can ask, make another group in college header and we applied image with the Phil and dragged in the election. And now you can see it's then we create the bottom off the slider so we can navigate our customers through the other images. Like this. Yeah, Then we need the color. I already parade them here. Now I can only select re tangle and used the color I want. We also need the background color and there should be this color. Now we need the the arrows began directed errors in the design and resize it with the size you want. Group them and call them arrow and we flip it and make the color off the shapes white and copy the arrow and flip it again. No, we create navigation off the off the slider. Make it a little bit bigger so the customer can see it also fill it wide. Then we have another retailer with this color naked under the one All right that we can group off and call it a delegation one. And then create another navigation. Yeah, like this. And under right side. There was also a small scrolled down. All right, two sliders, no red. And now we will be creating on the left side. Does text and make decides to the biggest Like this, I think and also create the the sublime Get back to your roots. All right, there again Life size and two should be little but smaller And also not And I was normal. Yeah, this looks good. Then we create the active navigation the customer will see on which pages. Now I implement the first product picture picture. I already prepared them, slip it again and resize it like like this. All right? Yes, like this. Then we create We will be creating under right side The big headline calling it drill. Also irritated and slivered. Now we add another sublime on the right side. Justin example, which takes you can use There were the other Jews picture and then make it a little bit bigger. So I think like this. Yeah, this is the design. Now, as you can see, we have a big slider for the customer. We have the navigation. We have two products. Have some detailed descriptions. We have the big tied to and also the products India. In the next lesson, we will be creating animations to this design. So see you the next lesson by 4. Introduction animations: Hi and welcome back to my class In this lesson, we will be looking at the animations. I already pro bread a design for you. What we will create together. As you can see, I totaled the trigger on the title. So if the customer clicks on everyone, he will see the animation. Let's take a look at it. You can always see the preview off your animation when you click on the play button on the right top here. All right. Now, when I click on everyone, you can see the title Fates to the center. Off the page and smile detail text faded from the button off the page. Now we will be creating this animation. I just lied everything off the art, but because we will now together design it and yeah, I choose the device iPhone X. I start with creating re tunggal like this and fill it with ah, hex code F seven. Then I create another re tangle, something design options which we can also any mate on there. I put the hex code off the car. Oh, I used in the preview like this A. It's a little bit smaller. Now let's get started with text here. I will create a text block with Hello. Then we choose the size. I would choose 25 pixels and the color will be not black, but ah, a little bit darker like this. And as we know, this is no responsive. And I put it in the center. And yet then they make another another text block with everyone. And here I choose the fund family quicks and and make them bald. All right, then I make it a little bit bigger. Yeah, like this, I think. All right. Also in the center, off the page, like this. And yeah, okay. To make the cool look off the the background image in the text, we go on fills and there you can choose between Phil guardians on. Then you can also drink your picture here. I would do it Now you just drag it down. And now you see it's there in the tutorial, I choose the mo tile and scale it a little bit down so we can read title again, then another text. Have a great day. Oh, I hope you will all have a great day now. We just scale it down on everything. 18 pixels are enough and also center. It arrived. Texas No finished. I put everything in the group and call it title. Then we will create the description on the bottom, line it to the left, make a little bit more space. Right is now the first design, and now I will show you how we can make the animation replicate. The art poured into 2nd 1 All right, we created the design, and now we will be creating the animation. First. Important information. Envision studio work with our ports for animations. So you can't just only have one outboard and make their any animal. This won't be working. I just resize the title so that you can see how the animation will be. Working title. And now I have triggered the title to the second Art Board. And now when I click on the play button and click on the trigger, everyone you see the fun size will be resized. And this is basically how the animations in studio work. And if you change something on the second art board, the first Art board will animated to the 2nd 1 What is also important? You need to have the same group names so that he knows that this both is together and he can change the resize to the 2nd 1 All right, let's get started with the real animation. So in my review the the title box, Waas and the Centers. So we center it in the second This waas little bit higher and smaller and this title wasn't there. So you have to said it here and do the opposite e off. No. So if we trigger, then it comes from the bottom to the top and say it's with Upper City in. Then we changed the titles. This one Waas all so a little bit smaller, I think yet and I'll show you another creek tip from me. You can add better animations. You create re tangle and fill it with nothing. And then you will add it to the sublime and create another mask to this tight like this. Now you at another title which will be on the second Arch board and we have to make it is able. And when we click on everyone, it will be changed. Uh, both masks on the other out. Bert, let's make group off this I will call it Subtitle and deprecate IDs toe the another that we can leave this and changed the great. Have a great day to the top and you're cool Make it in the center off the layer and go under animation and added the timeline so we can make Lubin Look, Howard will Look, let's make it a little bit longer so you can see it. It's not that perfect at all now, But in the first part the upper city off the your cool has also to be at zero. And here the second also on zero. So let's have and not a look at it. All right, this looks better now, so yet that it This is how animations work You see how they fade in the second are part You see how the text iss faded in cool And yeah, I think you have to play around with the animations to get into animation In the next part we will be creating the animation for the emotional world and see you in the next lesson by 5. Animation on Emotion World: everyone and welcome back to musculature class. And this last lesson we will be creating the animations to this design. I will show you some tips for you. Connect more life in your design, how to make your design look quality high and expensive. How the customer connect with this design. And yet I think let's get started. First we will be creating the slider. So if the customer clicks on this ladder, he gets to another picture and everything around the design will be changing. And yet, first you have for yourself to make sure what you want to present hate what you want to any made what will be the eye catcher. What can the customer bring out off the socks like Chairman would say. And yeah, I think first and started with any mating these products, we can at a trigger that if the Kozma clicks on next slider, these products faded. We couldn't make them like this, and in the another they will be faded. Let's take a look at it if we want toe triggered slider. So So if the cosmic clicks on the picture, he go goes to the other outboard by clicking it Then we added the timeline to see if it's work. And yet, as you can see now, the products will be fading. Then we want to change the picture and the titles. Arrival wants to create the animation on the title box. We will be creating another mess like to re tangle without any color and make mask. And we need another title. Brutality shot. Make it little bit bigger. Not a mask has to be bigger. Now we have to replicate this part and put it in the on the other board like this so we can delete the first title and now put on the top off this and put it on opposite to zero. And now we able now military shutter. Also, we put it in the bottom. So if the customer goes on the toggle, this comes from from the button and to a will be go to the top. So there will be a small slide effects to make a capacity zero and drew l normal us. It should be all right now we can change the the timeline again. And look how the animation will be working. There is no fate in because we changed the title, right? Not to the right name. We have to make it as the same name as we copied. So envision Studio can link them both, and nose is the same element. And then he can faded it and, as you can see, can loop it now again and make it a little a little bit smaller. And now you can see the animation well is going to the top and the second comes from the bottom. All right, now we can change the image slider, fill with another picture And now we can take a look on the animation. Yeah, the picture is only fading in, so it already looks cool, But we can make it a little bit better to make the picture. Also animating we need do both fills Indian paste the re tender and I will call it second slide. And also we need the seconds lied on the first Art board. Now we can resize the picture and make it not to the to the left side and changed capacity to zero and under first re tangle We Yes, we need to make it there And then we resized this to this size from the right also change toe opacity. And now we can take a look at it. All right. Nothing changed because I think we need toe link. Lay us. Okay, Now I delete the an emotion and at it again because if you change something, it could be that he don't make the trigger. So no, take a look. And yet, as you can see, it's making little bits who are, as you can see, it fades now out yet does look really good. The one point what is a little bit now when we when we changed the cut, the pictures. You see, the second image is fading with the text, so it looks a little bit like a mistake. So we fix them now. So to make the animation on this lighter, better need to make re tangle again and mask like this. We create the mask. We have to make the re tangle of a little bit smaller like this, I think on undersized also. Yeah, and going to copy it and paste it on this. Now we can take another look at the animation and now you can see how the animation is only in the re tangle, but we forgot to fill it out so we don't see. We don't want to see the color. And now again, and now it's fading. Great. All right now we created the animation for the text. You have to text lines and one Mex sick and also here to text lines and one mask. Now let's take a look at it new now trigger the text change. All right, Now let's make let's make this tiny animation a little bit soft or this we go on and just copy it to second. Pace it to the first, and then we copied the first. Is it also Tudor first? Now we can just make it a little bit on the bottom and the opposite id zero and the second also a little bit under bottom and also our past zero. Now we can look at it and they changed. Are we creating another re tangle and not a mask for the bulls? Now does no copying pace to re tangle to the first outboard and and now put the one the first sign also on the bottom. All right, guys, we are finished now. The animation we can look at it. If we click now on Slider Reloaded and watch it again, we can upload. Know our project on envision studio And there we can also and else appropriate the presentation. Congratulations for ending this class. I hope your knowledge and workflow provided. Thanks for watching this cost by.