Mobile App Design: Simple Interactions & Animations for Every App

1. Introduction: If you want to innovate something new in your life, it should take this. I'm Johny Vino. I'm Interaction Designer, and Motion Designer, and Prototype and Visual Designer. Oftentimes, my designs are unconventional, new, and fully specialized in doing humanized design. Today, we are going to learn how can we create the idea in your head to actual live mobile prototype, which is filled with lot of emotions, personality, and a unique identity in the design. To take this class, you don't need to be actually UX/UI designer right now. You can be anyone like a graphic designer, visual designer or engineers, or you just have an idea in your mind and you want to make that idea into live product. Today, I'm going to create an app for teenagers. I'm going to show you what is the way it's currently designed, and how can we improve it. We are going to show how we are going to improve the visual design of the app. Third, we are going to actually prototype using principles to make sure how we can add this micro interaction element and personality to the app. You can follow along by downloading a sketch file in this design course. You can also apply all the thinking I'm going to teach, and apply those principles too in your own ideas like project. I came to design because it looks beautiful and I make something beautiful, but I want to stay in design because I can make big changes in the world. Interaction is just a really cool medium. I'm excited to see what you are going to come up with. Let's get started. 2. Humanizing App Design: Today class, we are going to cover how can we add personality and emotion in app design. It is super important in app design nowadays because app design are changing everyone's life, how the interact with the world. The most important thing in app is every day, there are hundreds of apps people are releasing in App Store. Most successful app, we always have a question how this app is so successful because they added this level of emotion and feeling to the app. So today, we are going to cover that. How can you do that feeling in any app are doing? How can you add the personality of small micro-interactions touching the app? Because I'm from a small village of community of small people, everything happens mostly human to human communication like ordering food, like posting a message, everything is so human. But when I move to a tech world, everything is so digital. So I have a passion of how can be bring that human element I had in my past to the digital world. So that back in my place or people in a village or anywhere in the world can use your app, not only have people in a tech City. I started doing design by myself, but I had no idea where to start because in my area there is no design schools. So I started making apps, all ideas. Everyday I got some ideas so I started making my ideas into real prototype. I posted online every day for like pass two years. A lot of people said, "Oh, this looks unique. Your ideas are so unique." I'm like, "Because I don't learn design, because I don't know rules. I just do whatever I think." So since you are starting as a beginner, you are already out of the box. Don't get scared. You are already far good than the people really experienced because all the ideas you're going to come right now is going to be super unique. So just be confident and learn from this class. How can the idea you have bring it to the world and share to the world regularly of what you're doing. We are going to learn those by creating an actual walk-through of the product of the idea you have right now and how can we create that into a walk-through. Walk-through is super important to any project because when you say an idea to someone, it will be like, that's cool. But they can't understand how it feels actually when they're using it. So by clearing walk-through, you're going to give someone a real action in the mobile where they can just click and feel, this feels really nice, I would really love to have this app. Most of the time when you'll be working on the different stakeholders like engineers, like managers, marketing team, they don't have any idea what designs you are making. They can only make decisions when they actually see when something moves. For example, there is a difference between a storyboard and an actual movie. When you watch a movie, you get the feeling. It's not just like a concept. Creating an app into real product takes like six months, but walk-through you can do it in one day. So that's why walk through is super important to communicate what feeling you are trying to communicate so people can actually make decision based on that. During this class, we are going to create a diet app especially for teenagers and kids. We'll be starting from a basic sketch file that I'm going to provide. You can download from our resources. From that, I'm going to show you how we can improve that into next level of visual design. Then we are going to test that product using InVision, then I'm going to show you how can you add micro-interaction element of aha moment in the app. Then finally, I'm going to teach you how you can communicate your ideas into a client, into the world or to engineers. My thought was, how can we quickly grab this information from our mind and make that idea into live product? So I come up with this idea of the two hour quick process of coming up with the idea, creating and design and making to prototype. We'll be using sketch which is for actually UI design, and we're also going to use InVision to test our prototype. Visually, how is the font hierarchy, what host the colors works, and after that we're going to use principle software where we create animation, micro interaction and make things actually move. Finally, I'm going to teach you some tips and tricks in Keynote. How you can actually put all your videos in Keynote to present to people. All these softwares I mentioned right now are available for free trial for a one month or 15 days. So you don't need to worry. You just go to those website and download the softwares. So the next step, we are going to see what great apps actually look like. 3. Great Apps IRL: In this class, let's look at what are the great apps we use every day in our life and what makes them actually great, and what give them a sense of memorable app experience. So let's just start by just looking at what are the iPhone features we have right now that we literally everyday we use. For example, the Control Center where we make brightness changes, on changes and everything. Let's just swipe down, that interaction itself, you feel the difference. It just swiped down, it's so natural. It's not just that since I'm recording the screen, it's actually showing me a dot of like how actually I'm recording the screen. If we improve the brightness, you can see how they are changing the brightness there. In fact, something like sound, they're actually muting it. There are so many details involved in that sound. Super interesting one is like the touch, which is here. You can actually see like the touch is giving by bar by bar and my flashlight is increasing. So all these things they capture from the real world and they put that experience on the mobile, and that's why everyone feels like iPhone is super easy to use because they use this tiny human experience that they do it indirectly that people don't realize. Let's look at another app. This year they featured as like Apple Best App Award, just a simple pencil app. The cool thing they made is this bar, where you can like quickly change the nip. See, like this. In the past, when we were in the school days, we actually changed the nips in our phone like in a pencil. So they use this like changing pencil like a human experience into like real details, when they put so much effort on. Making these color changes. So this is what I'm saying aboard like this app feels great and we don't understand why it feels great, it's actually they involve human experience we had before. Let's look at another app which I made and published in App Store. So just a simple BMI calculator that you can check your BMI, where you can just quickly swipe down instead of giving like a drop-down menu where you can just "Oh, what is the height of my weight?" You can just swipe down. It's super interesting and you can enter the weight or gender you want. I added like a little touch of like eating like we played this game. So I just like in the wall that principle, I scroll down and so actually give you the result. Although, this like a really like a help tab, it's not boring like anyone can use it and it's fine to use. Finally, we can look at another app I really admire, it's like a time page. So I just downloaded it right now. So it's just giving me an, oh, nice to meet you. The words they're using, is it still feels like a human speaking to you. So just they're asking what colors you want, what colors you like. You can pick the color you want. That's what I've done. You can see all your calendar, it just looks fine. It does not feel like an ordinary calendar, it feels super smart. One really cool feature I like about this app is like how they're making a setting which is super interesting. Let's click on smart alerts. Like if we click on rains, they're actually showing like alerts, you want a notification when it's raining. If we want like what is the time to leave and what type of car you're using, all of this are like human elements like you're going to walk or you are going to take a car. So these are like really tiny elements, but these tiny elements make this app super unique, no one can make this and anyone can remember clearly this is from that time lapse app. So that's what we're going to see in our class today, how you can create app like this. These apps are not just like giving you the functionality, these apps are memorable because it's beautiful, it's stunning, and at the same time, it is timeless. That's what's really important while you are making a design. Are you making a design which is trendy or timeless? Now, we've seen some example of all great apps are made in a live product. Let's get started using a sketch and create our own design. 4. Preparing Your Concept: So the first step of making a great apps is not making complex interaction. The first step is you need to learn the basics. I call this like a grammar of English. If you want to speak English, you need to learn the basics of grammar, then only you can break and create something new. If you don't do follow those rules, it will take really big time to setup the basic layout. But if you know the rules, you can get started and be creative. Companies like Google and Apple, soon they have so many devices and they also [inaudible]. They already created all these basic rules. What is a minimum size you need to use? What colors are really accessible to everyone? For different countries, which colors actually should? What is the navigation element you need too? All these are accessible if you go to like Material Design, you're going to find all these resources and it's freely available and they also provide you lot of like examples like what you can do, what you can't do. So first start there. Then, you can apply those into your design. So let's start making in our own idea. Yesterday I was talking to my sister. She said, "If you train the kids in the early age to do the fitness, there'll be more healthier on the future." So I thought of making a concept of interaction design which encourage kids to actually interact and do fitness. Let's start with writing down what are the features or like the things we need to do to give recommendation of exercise to kids. So the basic things we need to know is like what gender they are. Later, we need height, we need what weight they are in currently, and we can also ask them, what is your desired weight? We can ask some questions like, what are the lifestyle? What are the food they eat? Finally, shows like a screen which is processing all the information and then showing your home screen with the result, these are recommended exercise for you. So you need to write down basically all the features quickly. Whatever it's coming to your mind or you can talk to your friend or the users who you are targeting, you can ask the kids what information they need and you can fill all this information in a paper to start. Sometimes, initially, when I started designing, I got stuck with I need to capture all the features and I put together a whole thing, but you're going to do it roughly. What is the main thing we need? Usually pick five main things we need for this app or four main things. So that your interaction would be more focused and simple instead of gathering all the information at the first time. So now let's start bringing all the sketches speed or the features we made here into actually into sketch. Sketches app which helps you to quickly visualize your design. It's super simple to use. Anyone like a big nerd, or anyone can start using the app. So you're already made a basic file or showing you what are the things we discussed, we need a gender, we need a height, and we need a weight, and we need a desired weight. They want to achieve for example if they are in 80 laps, they want to go to 60 laps. So these are the information basic things we need. After they entered all this information, we are going to recommend them with the results. I made lot of intentional mistake in this specific [inaudible] because those are the things most of the beginners do. When I'm a beginner, I made all the mistakes. So I just want to let you know these mistakes are super common and you can easily avoid those things. So super common mistake everyone do. It's not a big deal, but if you work in a company and you're presenting a design, and I would do like a spelling mistake of making things. It is super simple, but it's really big. That's the first one I would say. Then a second one I would say knowing a typography like a hierarchy style. That's super important. For example, the current screen. You see all of the screens, almost look the same. So there is no proper hierarchy, which one is first, which is more important. So I'm going to just quickly clean up this thing. So I always as I said here before some website like human-computer guidelines like Apple, they made a clear guideline of what is heading size you can use, what is a paragraph size you can use. For example, 16 is super tiny for headings. So you can use 34 or like if you want to have 32, those are the sizes it shows immediately this is heading. So the secondary level it's like a paragraph. Now, I meant entering a different font styles like, for example, this a heading and this figure subtext. But differentiate really clearly. If you're looked at like Google Material Design dado is really intentionally, really good. Is like to separate this type of tiny headings, they use full cap. So you can select all the layers and go Text and there is a function to call like Transformation. If we click Uppercase, it done. So now you can quickly see there is a clear differentiation between the heading and the option you want. The third common mistake a lot of people do. Like you're going immediately find holes like a beginner designer or someone like for expedience is like a spacing. For example 35, I have 35 spacing here and I have like a 13 space here and like a 43. That is a trick which is super easy to learn. It's like eight grid system. So for example, when you want to maintain a spacing between element, you can randomly place items. You're going to give like a multiples of eight. For example I want this to be like 16 and this to be like 16. So you're going to make a constant like spacing, and third thing is the sizing. For example, a lot of designers when we start designing, we don't have any idea of like what is this button's size to be and we just draw a button. The minimum size for a button is like 44 pixel. So currently, the height is saying 39, but that's pretty okay but that's actually small when you're actually using a finger thumb print. You can't actually click those buttons. So you have to make sure your minimum is 44 height. So I used to use like 48 as minimum size so that button and be like super easy to click, and as I said, when you're designing you are caring for someone, when they're just walking on the road and they want to fill the form, you have to make sure that it's easily clickable. If it's super tiny, they can click. Quickly we are going to walk through like, as I said, we can use the same heading style here. Quickly copy style and paste here. So when you are aligning make sure this fonts also aligned in a right angle. The spacing is clearly correct. It's eight multiple system and outside. So also there is a question like what is the outside space, you need to give. You usually have the minimum size here to give both sides as extinct extent. Final thing I want to say is like colors. So I love playing colors. You can just use random colors because colors mean different things for people. So for this one, I don't even need colors because whenever you are going to use colors, you're giving attention to that specific part. You want them to click on it, and currently I don't want anyone to click on the 10 minutes. So you are going to just make it a color which is not that important and it's a secondary level of color, that's why I used gray. As you've seen like all the colors I use is not pure black. I use like a bluish field. This appeared black. If I use bluish black, it's more actually convenient to the eyes. So these are like tiny little secrets like lot of apps apply in the product. You can color dye. I'm going to share these files with you. They'll be in your resource folder. You can download and you can play around and make sure all the fonts SSR. The spacing, the font faces you maintain are perfectly aligned. The next lesson I'm going to teach you that this class is all about after you have learned the basic, next level is like how can we make it more personal like human element in the whole application. 5. Testing Your Design: So we applied all the basic rules. Now, we are going to quickly check up how the font hierarchy is working on, the color is working on a device, or the buttons being made is clickable or not. So we can do that quickly using InVision. So I have an InVision integrated using app called Craft. You can download for free. When you download, there'll be option called uploading your design. You just need to select all the option you need to do, you need to enter the name. If you click publish, there'll be a sound playing, and that's it. Now, all your designs you made right now, the wireframes you made, it will come to the mobile. You need to always checked your device. Due to some people do some user testing what they think but they are clicking ask some questions like, "Could you able to select this option? What do you think?" So you can quickly know all this details by showing into the device. So how you have to work or you found problems like the time and the colors are super tiny. So what you can quickly do is, you can go to the sketch again, and quickly change the font. Then, you know it how to use 10. So I want to quickly mention a quick tip up you're to use a font, a minimum of 14. You have to start with 14, then 16, 18, 24, 36. Those are basic hierarchy of font you need to use. So I'm going to go ahead and put 14 here. Here also, I'm going to apply the same styles. So I'm just going to right-click and copy that style I'm going to paste here. When we make icon, don't make icon in random shapes. If you want to make icon, make sure the height is like 24. That is also for icon style, that is making a sharp like 24, 48, 96. Those are the sizes they usually use. Now, they use a font sizes here. Since it's a wireframe, I'm not maintaining that space before, but you are going to apply all the spacing I taught you before. So now, we made all the changes. We can quickly click on this Artboard and click on publish. That's it. Again, it got a sound. If you refresh the screen again, it's here. Now, we quickly made all the changes. The font is pretty big, and I can be able to see the icons. So this is how you are going to constantly iterate by seeing the mobile is super important. Because most of the time when we start as a design, we'll be working on a big monitors or laptop. Then if you further go to check on the mobile, because that's where users are going to use a product. So now, you may have a question that how many times I have to iterate. If you keep on iterating, you have to iterate throughout the year. So you are to stop at one point and actually launch the product. Then, only there will be lot of users will be using your product and give reviews or feedback. Try to iterate like five times. It's not a number, but five times make a really big iteration. Then, you have to move on to the next one. The next step is the most important step I'm going to teach you is, how can we humanize that. How can we make this more attractive which is how'd you use it. Specifically, we iterate up for both for kids. So how can we customize the design for them? 6. Adding Personality: Now, let's do the fun stuff. We've done all the basic stuff like spacing. Now, we're going to create that human element, and the emotions, and the feelings in the app. Let's brainstorm how we can actually think about these ideas. Because thinking is super important, I'm going to teach you how you can explore and think this type of human element in your app. So I'm going to sketch different ideas. What are the different ways we can gather this information other than just like in forms? Like, just into the height. So initially what I did is, literally I Googled some of the kid's height measurement, weight measurement instrument. So I got this inspiration here. There is a small kid they're standing near a height measurement and this one is showing a person they're putting, like you remember in the old day, they put a scale on your head to measure or your height in your home. I downloaded a bunch of inspiration from Google. Then what I did is, I just brainstorm like, okay, we can have a slider, which quickly shows up and down, you can slide to enter the value, or like left and right slider to give a values. Then I thought up, why can we use the whole screen for a value then I put the scale on the right and the details on the left. So finally, I draw this character is just literally like took from combined this bolt in majors I took, like there's a scale on some guy's head and there is a markings on the wall. So I put the markings on the wall on the right and there is a small kid with a scale on his head. So you can bring some lot of different ideas, but the way it had been drawn is just think, what are the different and innovative way you can show this information and just more interesting to the specific target audience. So this is how I measure height and weight I'd say you follow the same principle. I just Google some of the weight scales kids are using. I found this fascinating old-style of round weight scale. Now, although it's so digital this is so cool to see how it moves. So I took that inspiration into a normal scale and also added a weight scale. But kids can have a character. It's actually like if you increase the weight the kid's character will grow and like smaller. Finally, for the home screen I did a small tuck such in okay, based on all your data we have this recommendations for you. Let's make a final screen. This is all you have to brainstorm ideas quickly and sketch them in a paper and show to people. Okay, these are different ideas I have and you ask them to pick which idea is more interesting. So that you can quickly make decision instead of making everything on a screen because it takes time when you make something in a sketch. So I always mentioned sketching other than working on a laptop because when you sketch your mind is not in a digital world, you are completely out of the digital world. When you actually sketch using your hand, the way the brain works is completely different. Because when you're on a computer you try to get a lot of inspiration. Oh I can use this app instead of [inaudible] but when you're sketching it's all from your brain. So you are super focused. I want to give a tip that when you are sketching, just no one cares about how it visually looks. You are just mapping the idea. So just quickly sketch whatever it's come to your mind and understanding to you or the designers you are working with. So after sketching everything, we are going to just transform all ideas we have into a sketch-up. I arrange the screens based on every step. If you want to make a walk-through you need to make sure all your odd boards are at different state. For example, I know without animation what I'm going to do. For example, if I click on male here it's going to be here. Then if I click on next, there's going to be height and there's going to be this bar. If I slide this bar, it's going to be 169. If I click next, it's going to ask for weight, and if I change the weight, the shape of the person is going to change. So you have to make sure you are arranging all your animation into a different separate odd board so that it's easy to make the walk-through. Otherwise it'll be really hard for you to make a walk through. You can do everything in a single screen although it will be super hard. For example, this also I know my animation is going to work in this way. I'm going to swipe down and it's going to be click on the player and again it's going to play the whole activity. So each and every thing had to be a separate specific layer so that it's super simple for you to do in principle. Now all the screens are ready, and I'll be sharing the sketch file also in the resource folder so you can download, and from that you can keep on following me on how I'm importing all the design into principle and actually creating the walk-through we talked about. How can you create that walk-through which is more interesting to share? 7. Creating Simple Transitions: Now, let's look at how can we import this design into Principle and start making animation. First I'll just like having a artboard numbers, it will be super helpful. So I'm using quick plug-in called Sketch Number Artboard. We go there and click on rows and have a number stile of one to three. Okay. Then you have like 11 screens right now. So it'd be super easy when you are importing everything into Principle so you known which screen you are connecting to next. Let's open Principle. I mostly use Principle, it's a software which help you to create prototype really quickly. One advantage of using principle is you can import the Principal file into iPhone so that you can easily do testing. It feels like a real lab when you export a Principal file. So now we are in Principle, the thing we need to do is just click on import and you have to select the document. This is the only document we have selected right now. So now I'm using sketch and I'm going to select 3x so that my quality of my design is really high. Then I'm going to click on Import page. So it's going to render all the page you design in a sketch into the Principle. Boom. All the screens are here write now. So after importing to principle, the basic step you need to do and the trick a lot of bigness or a lot of people who don't use animation they don't know that, you just need to select the artboard, you can select here or you can even select here, don't select a rectangle. For example, if I click here, it's selecting a rectangle. You should select the artboard, and you're going to click here and click Tab. You're going to do repeatedly for all the artboards. So now I connected, if you see in the top, it's a timeline. The count on the top there will be a small window come below, it's called timeline. Now we're not going to touch that but you can see all the arrows are connected. It means if you click this, it will go to here. If you click this, it'll go to next. So we just made a click-through prototype. I just need to test that if you click here, it's going here. It is going here and I'm just clicking. I'm just clicking and animations are automatically happening. So the problem here right now is Principle's based on layers. For example, if I click here, this black round is going there because these both have a same name. So that's like auto animation but the one problem here is sometimes the names are not correctly mentioned. So the things we don't want, it start animating, some things we don't even want like for example this one. It's randomly animating. That's where the trick come. You need to make sure nothing is randomly animating. So the trick is you are going to copy this whole layer. You have to go to the second artboard and cut everything, command X and command V, and command X and command V. What it will actually do is it'll rename all the names, automatically pick up cut and paste. So for example, if I click now, there is no animation because there is no common name because Principle renamed it when you cut and paste. Let's try here. See, there is some animation happening. It's because maybe this girl's dress is similar to the guys dress name. See, she have a path three, path three, and he have path three as a dress. So what you are literally going to do is, again, you are going to cut all the layer and paste here and cut and paste here. So now if you click trough, there is no animation happening. Sometimes we think like, oh, why not use just auto animation? But the auto animation you can't control. As you've seen previously, the auto animate move randomly. So when you do auto animate, you can't control it because you need to control which to animate, which can't be animated. Then only you can create your design, because mission is not going to make design for you, you are going to make animation which you want. So fast just copy paste all of this stuff to make sure nothing is auto animating. So I'm going to teach you what other things we can do to make it really fun, not just like if I click here it will go there. So to make it most smoother, what I'm going to quickly do is I'm going to copy paste these groups. So I selected these both groups. I'm going to copy and paste it in a previous artboard, and I'm going to move it a little bit to the right-hand side. So you can do that using this tool called the X. When you hover over the x, there will be like a arrow. So you just need to like swipe here. So technically what we are meaning it's like this illustration's going to come from left to right. Because in this screen, it's on the right and the previous screen you put the illustration on the left. So I will just show the demo what's happening. If I click here, see, it is coming from left to right because you had the illustration at the left. If you move the illustration to the right, it's going to come from right. So that's it. If you want like, oh, I want from down, you can use y. Don't change it manually, don't move down manually. You need to make sure you're using y, using these arrows, because it's super perfect. So I moved from down. Now I'm going to test it. See, it's coming from down. So those are really basic, if you know that you can do anything. So I'm going to make it literally from down but not so down. But still it is blocking my screen, so what you can do is actually just move down below that layer so that it doesn't have the symbol here. To even make it really smoother, what the trick is is the numbers. So this is called timeline. When you click on this arrow, this is like a timeline, it shows zero seconds, one second, two second. So this animation is happening in, if we click on this, 0.3 milliseconds. So it's happening too really fast. To make it smoother, the trick is you need to click this arrow. That is the arrow. I already have a lot of animation to me, I have a default animation called 140. For this class we can create a new animation. So you have to click on spring. So you can see the script, spring is like too much charm, if you want linear, Easy In, there are so many default option. But I'm going to teach you my secret of how can we make it more smoother. So in order to reduce the tension so that it feels this shape, I usually do 100 or 120. So this is super important, if you don't do that, that's what makes that final top-notch touch of making it super smooth. Also, most important thing you should always make animation graph. If you're making one prototype, all have to feel the same animation. You can't be like one is super spring, one is super smooth. You have to make sure all the animation looks same. So you're going to apply the same thing to here, 100. If you are going to use the same type, you can actually add this. If you click on plus you can add Skillshare. So I added a layer so I don't need to again and again change this graph, it's automatically changed. So when I click, see, it's super smooth. So these are the basic animation steps you need to do. So I'm going to just make this guy come from right to left because the male is from right to left. So I'm going to paste here, and I'm going to move a little bit here. So as you see, I'm not touching any numbers manually, you just need a play with the arrow. I want the opacity, opacity means insulator to be zero. See? I just want the opacity to be super zero. Then when it goes here, it becomes automatically 100. So you don't need to worry about what will happen here, you just need to worry about what opacity you want. So I made it to zero and when I click male, it feels like it's coming from zero to 100. So now if I selected the gender, it's perfectly working. As we expected, super smooth and feels like a real app. Now what we're going to do is we selected this male and we can name it as a male because we know we are going to use this person through out the app. So we can name this as a male and I'm going to name male for all the artboards. Why it's super important is it automatically animate. Now it's automatic animation is going to work in the way you wanted because you are defining he's male, the name of the thing. So now you see the magic. After you finish the gender, you are going to click next and see the guy automatically animate because you named the layer same. This is male and the next screen this group name is also male. If you click that, see, it's not smooth but you can see the difference. It's actually this person is moving there, there, there. See? This is where automatic is good because we named it properly, it's not automatically happening. 8. Customizing Animations: So now we know what character we need to maintain through different artboards. So now what I want to do is, we select the gender, now we are going to select a height. Height, what I'm going to is select, when I click here, it's clear to the guy hair to grow. To grow means the hair to grow a little bit taller. So what's happening here is when I click here, the person is in a different alignment so that it's moving from left to right, that's not smooth. So what I'm going to do is I'm going to delete here. I'm going to copy this person, I'm going to paste the male here. So you see, if I go from 65 to 69, nothing changes. But we are going to do manually. So that's where I'm going to teach you the scale option. Scale is nothing but development do it like 1.1 and make sure to select the both layer and aligned to the bottoms, not aligned to the bottom. Make sure these are of the same height so it does not move that much. So now if I swipe to 699, see, there is a smooth transition. We finish the height, now we are going to do the weight. Now it's a little bit complex part because weight is in a circular style, it's not like linear, linear is pretty easy. So what we are going to do is we have to do this manually. That's little bit annoying but you have to do that manually. For example 160, you have to make sure this 160, here also 160. See in the previous one, it changed to 162 because we renamed it. Now we are going to make sure all the name are same. Remove this number. Why we are having same number? I'm just trying to telling you if you have a same number, it actually animate. I'll show you example. If click here, this 160 is actually moving from here to here. I see here something is automatically moving, some man's head. So whenever that happen, just copy that man because that man is the only problem. I'm going to cut, paste, cut, paste. So now I rename the name properly, for example, 140. I'm going to do it 140. So I'm going to quickly rename it to make sure both have same name, for example. Two hundred is actually 200 in the next artboard so that it animate property. But for some numbers, we are introducing new. For example when you scroll, we're actually introducing 210 and 220. So what we're going to do that is we're going to copy that layer and paste here, and move it down to make sure it's continuing the round. So now everything is perfect. If you just slide, it feels like it's sliding round. If we enter all the weight, height, and what we want to be a kid, not we. Let the kid enter all the details and the kid finally want at least reward exercise they can do. So instead of directly land to a home screen, make it, you can make something interesting. So I'm going to add a new artboard in between. To show quickly, you can click on insert and I'm going to insert artboard. Quickly make a quick animation, I'm going to do some an animation here. So I'm going to copy this whole to center. So it become rectangle because you had to adjust the radius. This is another thing. Radius is the thing which you use to do this. So I added this layer additionally to show we're actually calculating a rate. Show little bit engagement. So what I'm going to actually do here is I want one another layer here, like a loading bar. So how can you do that? That sometimes we get a question. We are doing something and in-between, we got some new idea and we're like, "How can I add that?" So that's a trick we can do easily. So what I will do is like I go here. For example, I'm going to do a loading like a bar. So you can draw a circle. So if you already know sketch or if you're like beginner, you can learn lots of this tiny stuff like how can we make a loading bar online. On Skillshare, there are a lot of course where they teach you how to make the shapes. I'm not going to do that now but I'm quickly saying if you use scissors, you can cut down this shape to look like a loading bar. I'm going to increase the width. Until you are having a smooth shape, I'm going to add this rounded corner. I'm going to have like a white color. So for example, you may be wondering what's happening actually? So we enter all the data and I'm going to click next. It's going to be this screen. So now we break that connection and we are connecting this screen. Think like the artboards, think like principle animation is simple, like you're arranging a bunch of cards in the table and you're just connecting different cards. From this card, go here. That's what I compared with like movie making, its like a story boarding. But if you connect a storyboard, it become a movie. That's the secret of principle. Now, I click here, it came and loading is nothing is happening. So that's where this principle is super smart. It's like you can create components. Components is call like creating animation inside animation. So what that mean is like this is like a loading bar, I want it to be like rotate. So I select that layer, create component, you find it on the top. Click there and I'm going to duplicate the artboard. So you're going to select the artboard and click on command D or like copy, paste to duplicate the artboard. So this is the loading bar. When I click on this artboard, this side to go here, that's it. But there is nothing animation happening because we don't did anything. What we are going to do is when I click this, it's going to go here. Also, it's going to change the angle. There is another functionality here. So I already taught you a lot of thing; X Y, changing opacity, increasing the scale, radius. Final thing, super nice thing is angle. So I'm going to do like angle of like 360, something like that. When I click on this, you'll see there is like a quick rotation happening. Instead of 360, if grid 3,600 it's going to continuously rotate. See, it's continuous rotating but it's super fast. So on that time what you can do is like, as I said, if you want to change the time length. It's like movie editing. If you go here and there is a timeline and you can expand the timeline. I'm just pin zooming here using like a Mac touch bar. If you pin zoom, this time will expand and contract. In the time when I'm going to adjust to like three seconds. So it will be a little bit slower. So this animation will happen slower, see? Little bit slower. So we can have it ordered on. So what's the thing is like this complete animation is separate animation inside the artboard. When I click on here, it should animate because it's not automatically animating. See, the problem is the rotation is happening only when clicked because I made tap. So what you are going to do is instead of tap, you're going to delete that arrow and click that artboard. There's a function called auto. It automatically start rotating, that's it. So when I click here, and when I click again on this is all going to come. So if I go to recommendation, recommendation I want to be little bit more dramatic when it's coming or when it's made. So what I'm actually going to do is I am going to select group everything so that I can animate it. Whenever you want to make the whole thing to move, you have to group it. Sad thing when I tap here, these are to be instead of directly coming, I want to be like left and right like the way we did before. I want to be like come from here, see? I want card to be like one-by-one instead of coming everything in the same time. That's how the world physics work. Like if you throw three balls. So it'll be like go one-by-one based on the velocity. So you're going to use those physics you learnt in a school, you now are used. So you're going to use those things here. So what first thing is coming first? So first thing is coming first. Second thing I want to be a little bit time delay. So I'm going to just move. This time that is actually like delay. This is going to start first, this is going to start second. This green one, this guy here is going to be lost. Some additional thing is happening which we don't needed, see? This group, we don't even know who is this. So we are going to just click on it and remove animation. Click. See the smoothness of the thing. So you are going to just come up with the prototype super quickly and click on male, next, height, and weight and decide weight and it's loading, and it's giving another cell. It's done. 9. Adding Surprising Details: So how can we make it more interesting using shapes, colors? That's why I come up with this little concept of how can we start the activity in stuff like boring play button? This just it is functionally good but it's not that interesting. So I'm going to add that aha moment up like adding tiny micro reaction here. So how can you do that? Select a specific layer for example, the arrow. I'm going to show, swipe down. So you select the specific arrows and click on, Create component. As I did before, you can actually duplicate this arrow. You're going to move this arrow a little down. Because as I said before, you move something down. From this arrow to that screen, the arrow is going to move down. So the secret part is what we are going to do. The funny thing is we are going to say, from this arrow go here automatically. From this one, we are going to say, go back automatically. I can show you here see those tiny details. This tiny details, if you start noticing it, you can notice in all apps, like a Lift or Uber or Google, G-mail every software have this tiny, tiny thing which grabs our attention, that they want you to give the focus. So what I'm going to do is, if I want to start with activity so I'm going to just swipe down this card. So initially, we just did it tap to do a testing. But after that, there are so many interesting functionalities are there. One interesting thing I really love is Drag Begin. So the Drag Begin feature is, when you drag down. So I'm going to say a Drag Begins, and the Drag Begins of this specific like a card. Drag means, dragging and this card had to be smaller, when the drag begins. So that's what I said, while you are talking to someone you're saying and a drag, it had to be smaller. You can see like when I need some tiny interaction on single screen, it's called a micro-interaction. Those things we create, we don't create between screens. We create inside the screen. Like this arrow, this arrow is inside the screen where they're is tiny thing. Now what I'm going to do is, inside the screen, I want this to be larger and bigger. So I select this Group, group everything, Create Component and I'm going to Auto. As I said before, I am going to scale down and scale up. As I said, from bigger thing to smaller thing and smaller to bigger. So it will just be like going back and forth see. To give more urgent thing. It's saying swipe down to start. So I'm going to swipe down. It starts blinking, it gives me a direction of you need to start right now. So when I did that, nothing is happening because we don't connect the next screen. But this one worked perfectly. I click, this one is working perfectly. If you don't follow these tricks and tips, it will be really take long time. Since we followed all the trick and we know, I spent a lot of years figuring out all these mistakes. I told you everything, so it's super easy for you. Once you start playing with it, it's super easy. Now we can quickly give a shot of the whole walk through super quickly. I'm going to do, Start. Then I'm going to select a male gender, and then height, then I am going to select the weight 180 lbs. Beside weight it is like 160, and it's loading and giving me different exercise. Now, if I swipe down and the activity already started and I want to close it, that's it. You already had a concept and you made your concept really beautifully, made on really short time. Now we created the whole video of the app. The next step is the most important thing. It's sharing your design and getting real feedback from a real user. 10. Sharing Your App Design: So finally, we made it. We made a app which we had an idea and just in our head, we just made into live motion moving videos. So now is the most important part. You're going to share your design with people and super open about. Feedback, receiving feedback is super important. Design is not just making a final iteration, this is going to have like 10 iteration. So you're going to be like super open and ask question like so many ways, like why they like, what they feel. You are going to ask a lot of like feeling question, and you are going to just up show them, instead of telling them, well, how does beautiful design looks. You have to frame a question in the way that they can give you a lot of critics, and another second point that's super important is like, we made lot of assumption while we make design. For example, I said, kids really love seeing illustration, kids really love seeing those type of scale. You need to track down all the assumption, what are the assumption you made for yourself. Then while you are testing your product, you need to make sure all the assumptions are right or wrong. So you're going to continuously learn, okay, I made this assumption but kids don't even like it. They don't like illustration at all, they just want a drop down. So having the open thoughts it's makes you as a designer would be make you better. Instead of just pushing over, this design I made, you need to develop it. Again, telling you like open to feedback is super important if you are a designer. If you don't open to feedback, and if someone says this design is bad, you want to accept that and ask like why you think it's bad, like what specific thing is bad? So if you ask so many question, there'll be like pointing out things. So don't, however, like look for like random like vague feedback. This colors look nice. Like you have to ask why this look nice. The good thing about principle is like, once we made the animation, we can actually record it in computer itself. So there's a record button here, there's like a small video button and you click on it, and I'm going to be like click and I'm going to select Male, and then next and I'm going to select the height, next and I'm going to select the weight, and I'm going to select the desired weight I want. Next, and it's loading continuously, and it's giving you the result and I'm going to slide down and start. After the activity is done, I'm done. So this is literally, the cool thing about this like they sport into the video, so you can share anywhere, sign window, puts a name. I'm going to click Save. In the meantime, it's exporting, I'm going to show you in Photoshop, that while you are presenting online, you have to make sure how your design is going to look like in different devices. If you're designing for iPhone X, I'm going to show like quick mobile mockup, where you can put your video inside. So if you have Adobe CC, you can actually put a video into the Photoshop pile. So I already made a mockup, you can download online, find a mockup. Then what you're going to do is you're going to click on Command-O, it's like opening new file, and I'm going to open like a video we right now made. Next just like super simple, you are just going to click and drag here like this, and your video is already in. In Photoshop, if you want to shrink the video it's super big, and I'm going to quickly click Command-T to transform it and I'm going to shrink it, and I'm going to aligning into the mobile size. So I align properly, so everything is perfect, the video is perfectly aligned, and I have a layer which you can mask to the iPhone shape, like a notch. So I right-click on the video. So you need to ungroup first because you cannot put the group. So I'm going to ungroup. Shift-Command-G to ungroup it, so that the video will become like a layer, if you can slide and see the videos running see. Now what you're going to do is right-click on it, Create Clipping Mask, that's it. See it, it feels like a real mobile, like your videos in a real mobile. As you see the videos too long, all the below layers you need to make sure it is also matching the video length. So I matched everything, you see everything is perfectly working, the video is running, you're done, and now you're going to click on these three dots. If you click on Render Video, it's going to render the video. I already set the Skillshare and set Skillshare with mockup. So it's like really cool that you can also upload your MP4 into like Skillshare. So if you just follow what I said just right now, you can put on your own mockup or you can select your own devices, and just put inside and upload on the Skillshare resources. Second thing I want to share is like sharing ideas with clients. So this one, it's like a demo, like a slide I made, and I'm going to show the prototype we made right now. The cool thing about Keynote is you just need to go there and copy this video, just copy, and go to Keynote and just paste it, and just resize a bit. Another secret thing I'd learned recently is like if we click on object list, is going to show like a layer, like a sketch, and you are going to drag down that video down. I'm going to attach this Keynote file so you can use that, like the above mobile I have it's like a mockup. So you can use that mockup. So the way you have to present with clients or any one is I'm going to click auto startup movie. So when you're presenting with a client, you can just say, "Oh, this a video I made," You have to say like, "Well, what is the problem we are trying to solve? How might we encourage children and teenagers to sign up for the fitness app they're seeing for the first time?" So that's the problem we have. We can make this using three design principle. It can be cute, fun, and exciting. Then you are going to show like, oh, this is Version 1 concept I have, the survey, we have like a cute illustration, and then you are going to show. This is the Version 2, and this is the final version. This version we research with this many user, they all like it, and we preferred this version. That's how we are to present your work, when you're talking to clients, when you're starting as a beginner to sign up. The third one has like, now you're actually assuming you're working in a company as full-time role. Third one is like how you are going to communicate with developers about like what prototype you made and just asking them what are the technical constraints they have. How much time this type of interaction going to take, and also you can ask them to test, because developers are like they're different designers but you can ask their feedback of what they are thinking. The principal is super powerful in that. So you just need to go to principal file and just right click on it, and if we click on Share, Airdrop, it automatically show my mobile, and in my mobile I already have a principal app I downloaded from App Store. So now I'm going to click on it, and it automatically send it immediately I open my prototype in my phone, and this looks exactly like app. No one can differentiate this is an app or this is like a prototype. So now what we're going to do is like give this prototype to my engineer, he's going to just click-through what I'm clicking here. For example, here I'll ask him to like, you're going to fill your profile detail. So I'm just going to like throw open question, and he's just going to click wherever he wants to click. You just need to silently watch what's happening. You are going to ask them to continuously tell what they're thinking in their mind like, "Oh, I thought this is going to be here but it's behave like this." After you like iterate on so much, you now know, like the rhythm you've created, the music you've created, and you can feel the difference of how you are making difference in people's lives, and making them happy, making any process seamless for anyone to use. Obviously, it will be different experience, since it is a kids app, we went for like more illustration way, if it's Center Price hub, we are going to try something different, but you're still going to give you a personal touch. That's super important. If you can actually follow the way I teach to you, you find that you can do it using your own ideas. 11. Final Thoughts: Congrats, finally made it after the learned how to come up with an idea, how to make your idea into like a wire frame, how to make a clearly visually unique. Also we learned how to add that personal and emotional touch to the app. Most importantly, you'll learn how to get feedback from people and keep iterating on it. I hope you learned a lot of things and a lot of new things through this video series, I believe you are going to keep on experimenting and going to share a lot of new crazy, innovative ideas through all around the world who are watching this video. Don't forget to post all your designs, and like any designs you make in a project gallery. Thanks again for taking this class. I'm super excited and curious to see what you are going to make. 12. Explore More Classes on Skillshare: