UX/UI Design: Design Beautiful Messaging App with Adobe XD | Stevdza - San | Skillshare

UX/UI Design: Design Beautiful Messaging App with Adobe XD

Stevdza - San, Android Developer & UX/UI Designer

UX/UI Design: Design Beautiful Messaging App with Adobe XD

Stevdza - San, Android Developer & UX/UI Designer

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

      2:00
    • 2. Adobe XD

      3:56
    • 3. Free Online Resources

      7:25
    • 4. Adobe XD Interface

      10:30
    • 5. Shortcuts

      5:58
    • 6. Designing Intro Screens

      10:45
    • 7. Designing Welcome Screen

      7:49
    • 8. Designing Sign In Screen

      6:34
    • 9. Designing Sign Up Screen

      5:41
    • 10. Designing Dashboard Screen

      11:44
    • 11. Designing Requests Screen

      8:53
    • 12. Designing Messages Screen

      7:44
    • 13. Designing Friends Screen

      6:01
    • 14. Designing Chat Screen

      13:15
    • 15. Prototype

      8:24
    • 16. What Next

      1:59
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

186

Students

--

Projects

About This Class

In this course, you will learn how to design mobile applications in Adobe XD. We are going to design Messaging App. We are going to design eleven screens using all the resources which I have provided you in this course.

Generally I will introduce you into the world of application designers, and with this course you will follow step by step video guides in order  to create simple, beautiful and engaging mobile application design. I'm going to reveal you all the nessesery tools and resources which will help you get started your career as an application designer or freelancer.

I will show you not just how to design an application, but how to give a life to your application by creating a prototype with Adobe Xd as well.

Then you'll learn the best way to share your prototype with your friends, clients and family on social media so they can leave a feedback on your own project design.

And at the end of this course I will provide you with useful information on how to start making money with your knowledge you have aquired through my course.

Meet Your Teacher

Teacher Profile Image

Stevdza - San

Android Developer & UX/UI Designer

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Introduction: Hello, guys. And welcome to my course. In this course, you will learn how to design mobile applications in Adobe X'd. We're going to design messaging application. We're going to design 11 screens. He was in all the resource is which I have provided you in this course. Generally, I will introduce you into the world off application designers, and with this course, you will follow step by step guides. In order to create simple and beautiful mobile application design, I'm going to reveal all the necessary tools and the resources which will help you get started your career as an application designer or freelancer. I will show you know, just how to design an application. But how to give it the life and create the prototype with Adobe's Day as well. Then you will learn the best way to share your prototype with friends, clients and family as well in on social media, so they can leave feedback on your own product design. And at the end of the scores, I will provide you with useful information. When I helped to start making money with your knowledge who had already acquired through my course, any scores, you will learn all the adobe exit tools he was in every day's work, you will learn shortcuts, and it will save your time a lot. You will learn how to design seaport, clean and beautiful applications, how to create an interactive design or prototype that you can share online and how to use knowledge you acquired through the scores to make money on the Internet. This course is for anyone who wants to learn UX design Anyone who wants toe learn you. I design anyone who wants to learn more about Adobe Exited generally, anyone who wants to become mobile application designer for Adobe illustrator and or photo shop users for those who want to improve their skills. So what are you waiting for and all in my course today and start building and improving your skills? 2. Adobe XD: Welcome Back toe. Second video First chapter in this video, I'm going to talk a little bit about one amazing tool named Adobe Eggs deep. I will introduce it to you and show you the biggest advantages off hearing it in your pocket when it comes to designing websites and mobile applications when it comes to designing websites or mobile applications. Up until a few years back at the most popular tool, which have bean, adobe Photo shop and then the new product appeared on the market. So it become great alternative toe before the shop and that product name is sketched, you might hurt the sketch. The biggest downside of sketch is that it is only available for Mac and not the windows. So why would you use a Toby? Actually, when there are already tools out there? Uh, well, don't be eggs. They will soon become the great thing, the next big thing, and it will soon become the best for you X and your Y design Adobe existence for ah Adobe Experience Design, and it was launched in February 2016 months after months, Adobe X'd released many operators by reading users feedback in order to make this tool to perfection. Adobe Exit is especially built for you ex in New I design. Its user interface is designed with suppressed. Adobe's D does not share too many options like you, Chevron. Ah, don't before to shop, for example. And that's one off many things. Why I personally love working with Adobe's, but still with the lower number off tools, you can do amazing things. Basically, there are no you elements that cannot be designed and implemented with adobe's. Literally. I know that whatever I come up with, I will be able to transfer the design from my mind to an art bore off at a busy you want. You have trouble finding different tools because all tools are right in front of your eyes . The big city is available for a window. So s and the great news is that Adobe X'd is now free so you don't have to risk infecting your PC by searching. Busy on a different pirate websites to download it, you just need toe shit over toe. It'll be official website and download it with one click. That's pretty much easy. The next big plus off Adobe X'd is its speed Ah, other basically is so fast that you will never have to wait to import or export files, just as you will never hear toe wait. Or Cheval agday. Well, you work on your project that always the allows you to create prototypes. Also, that means when you are done designing an application, for example, you can do a prototype and check out live how, with your application work. Then you can share the prototype by creating simple You are l from Adobe exit directly which one click as well. And then you could share your prototype where l on Social Media's with your friends or clients or basically anywhere s O. That was a little introduction about so busy. I hope you gained a little bit off information about this product and seeing the next video . 3. Free Online Resources: Welcome back toe. 1/3 video off the first chapter in this video, As you could guess from the title I'm going to show you an online resource, is that every designer must have in pocket. I'm going to show you 11 websites where you can find for free, beautiful, radiant colors, beautiful color combinations, color palettes, free background images, icons, vectors, illustrations and bunch of other stuff. Um, so the first website I'm going to show you is called my color dot space. And, as we can guess from the from their main quote, never waste hours on finding the perfect color pilot again. This website will help you find the most beautiful core pellets, and the the biggest advantages off this website is that you can actually enter your favorite color code click, generate and get so many great car combinations, which is then you can use in your product design. I use this website on a daily basis, and it's it's very good in order to find the perfect color palette for for the project. The next website is named the Web radiance dot com on this website also gives you a lot off beautiful, radiant combinations on those greedy INTs are well presented to users in the perfect circles and Bill O each circle you confined color codes. You also have an option to copy the CSS code off those ingredients as well. And that's why this website is named Web radiance. But nevertheless you can use those colors in every design product off yours. Does it matter if you're working on a website landing page template or some IOS or android application design? Okay. Next, the website is named. Do a Tone that shape factory in DOT CEO, and this is very unusual website in which I fell in love at the first visit. Basically, you can choose to colors and immediately applied them on wallpapers. You can create the most beautiful images he was in this website. Also, you have an option toe search wallpapers by typing in the top right corner field, or you can upload your own image and apply those cars as well. On the upload button you can find on the top right corner just beside search field. Next website is named the color pod, not calm. This website is also a good choice for finding the right color palette for your product. You have a different color. Categories like monochromatic, compliment, complimentary and a locus. Warm, cold, warm, cool and neutral colors. Um, next week you have a website named andro dot CEO, one of the best websites out there for finding rector illustrations for different specter of products. All files you download here are in ah, dot s would reform it, which means you can edit every piece off their design. They even have an option off choosing your favorite color and applied directly on illustrations on the website so you don't have to download and change color manually by yourself. Personally, I use a lot of their illustrations, and people find them attractive when you are designing, introduction or welcome screens in your application. Next, we have a website named the Endless Icahn's dot com, a website for icons. As you could guess, you could find beautiful icons for your product. You also have, ah, search option to find specific icon off your choice. They even have a set off icons download. So if your design theme is, let's say Christmas hell Wayne Sport technology or something else, we can find it here and doll of the whole set for off icons for free. Next, we have another website for icons named the material dot io slash to slash icons. This website is owned by Google, and it's especially built for android developers and designers. You can find many icons, which are used by millions off android applications. What this I'd make special is an option to Donald and icons in different sizes in white or black color, with opportunity to download it for your Androids to your product. Eso. If you are an android developer, then you know you need the same icon in different sizes to satisfy every skin resolution out there. And you can also have an option to download icons for IOS IOS developers as well. Next, we have ah website named free pick dot com. This is, ah, well known website where you can find thousands of different kind of resource is from icons , backgrounds, Web templates you why kids more cups, logos, textures about designs, illustrations and more. Theis website has everything, literally everything you could think off. There are free stuffs, but there are also premium resources, which requires you to pay a little bit. But even that's okay because you can get everything there. Okay, so the next we have a website named the pixels dot com. This is a photography website you can find here the most beautiful world papers on the Internet, You know, big resolutions as well. Remember to get credits if you some off those for this. And the last website I'm going to show you is named the Inspires With. This is also a photography website like pixels. You could find the most beautiful images here, and you could choose the different categories or search image by tank or off your choice. So I hope you hair bookmark all those websites I showed you now because those are very valuable resource is which will come in handy for sure. And that was all for this video. See in the next one. 4. Adobe XD Interface: Hello, guys. And welcome through the first video of the second chapter in this chapter, I'm going to show you a little bit about that obviously environment in its interface. But before that, you need to down on the Adobe Eggs Day. You can down that by killing over to Google and just clicking the diverse link. It will never get you a toe adobe, official website, and with one click, you can get the biggest day for free, which is awesome again. And I will not down on this file at this application because I already have it. So when you open it, the your cereal, white screen or window and you have a few templates to choose from on the right side of your recent files, then you kill you like a three sources, and even you can begin the Pretoria. But you will not need that because I will show you around. So we're going to choose the android template you control even in iPhone 67 or eight or even five. So when you click this template, it will open your string like that. As you can see, this is a very simple interface with an art board on the center. If you want to change this arbor name, we can just double click on the name and a So you can see this is a very, very simple interface with not too many options. So on the top on the left side, we have many options. We have a new open option, open recent files. We can get you, I kids. So if you don't know what that is, I'm going to show you right now. So let's say we want to down on the Google Google material um sheet file. So it's down on those confidence for Adobe in city. And when Donald is finished, you just need to open that file, which have already downloaded. And it will open a new window with the bunch off you y elements for a material design. Eso As you can see, we should have ah, contact list here. Or let's say we have ah, different buttons. Different design buttons. Aled. Those elements, titles, icons, phones in many more so you can copy one of those elements from here and paste it toe your own art board. Um, you can download this file and check by yourself everything you need and everything you want to learn, of course, but now I won't be showing this in details. You can dollar did that by yourself and check it out. So there are a bunch of stuff you can copy to your existing product. Let's say we want to copy this. You just right click on this element that basic to your design product. As you can see, it fits perfectly to our our board because it's on android template. Anyway, we're going toe close this window now because we will not need it. So next we could say save as option export option So even we can export the selected items . As you can see when we select, we will. Deception Selected will appear next week hearing import option, which is that it was to import the different kinds of factors images, icons and so on. Um, then we should have a shelf screen fear. Next we have toolbox. Just below this menu on this toolbox is Ah, not okay. So when you click on prototype, you will get this simple animation on how to use prototype. It's pretty simple, but we really was protecting our fourth or last chapter for this course. The first stool is a selectable which will help you select you elements. As you put Yes, next tool is directing a tool. You can change colors or do anything with that. If you want to create perfect rectangle unit toe, hold down the shift Next door is a lip store again. If you want to create perfect circle unit toe, hold down shift like that and, uh, the next tool is lying. Toe it. Applies are the same is for rape, stool and circle. If you want to create the straight line, you need to call downshift. Next tool is bent. You might know pen from the adobe illustrator if you have used so far, so next tool is for text. You already know that, and this is truly my seventh noticed. This is a tool for creating new art boards. You can use that or you can even copy the existing our board, which will be shown in some of the next tutorials. And the last tool on this tool box is on. The toolbar is zone toe, which will help you zoom in and zoom out on the canvas. So next on the top right corner with here allying tools so we can align our objects. For example, if want to align, those rectangles will create the one more rectangle for the purpose of editorial and the Let's say we want toe allowing them at the top. We just click this and all those directing us will align at the top. So if we played distribute horizontally, that means all those space between elements will be the same. Next. If we click line center, they really aligned with the element who is on the center, of course, and if you click lying at the bottom, those elements will be a lying at the bottom, of course. So with one click you can dio a decent job next. If we distribute them vertically than the space between them, vertically will be the same again. We can land them in the right and so on. So the next thing that still I'm going to show you the repeat greed, so you need to select your element and click repeat greed and the with the drag and dragging the mouse. You can create those perfectly aligned the elements. So next thing I'm going to show you is that you can even change the color of this element, which is so create one circle and create another one. So if you click this ad, I can here then it means those two elements will merge and you will get one element is sent off to. Then when we click Intersect, then, uh, and those, um, it's will be like that, for example. And this last one, we'll get you the element like that. So the next thing we care a bestie opus to convey lower down like that Okay, it's pretty easy. We have, ah, again the border and feel cooler. You can change that by typing color code or choosing from the color palettes, or you share even a color picker. So if you want to paint your your object with the same car off the other object, you can just click like that and you'll get the same quality as, well, Pretty, pretty amazing stuff again. You can even add colors to your color palette so we can access them easily like that. And now Okay, let's change this store to blow like that. It is. We have also shadow options so we can create the shadow on our when our circle, as you can see, there is a shadow down, up and we can increase those shadows. We can increase the X Well, we can increase the why I was showing. Now, now we're increasing the while and the third. The option is for boldness. So you don't see it the moment. Maybe, But when we zoom in, as you can see, our shadow is transforming. Okay, Now I'm going to show you a blower option. So we're going to create two circles and we're going toe paint this below her. As you can see, we feel created a boor object just with checking one trade box. It's pretty easy. It's amazing. I know. And with big round blue, you have three options the truth from and you can make your blueness by yourself. As you can see, it kind of looks like that pretty amazing tool. I know. And that was pretty much it. Okay, so the thing about layers if you were worked with before the shop in the Adobe Illustrator , then you must know how wears are important and the you can switch layers by. It doesn't reckon dropping your options toe lock and change visibility to your elements as well through your layers. Uh, so that was pretty much it for this interface. I showed you allow the tools. You you will use your design and the think fortune is with your CIA and the next one. 5. Shortcuts: Hello, guys. And welcome toe. Second video off the second chapter in this video, I'm going to show you the most used in the most useful shortcuts in Adobe is day, which will help you save your time while you're working on your product design. So the first shortcut that I'm going to show you is circuit for moving on the campus from one art board to the other. Um, you just need to hold space and, ah, drag with your mouse the next. The shortage is for there for ah selectable, which is a V ah. Next will be a rectangle are are is a short cut. So if you wish to create the perfect rectangle, you would need toe hold shift and move your mouse. Next is a leap stool. Also, if you wish to create a perfect circle, you would need toe hold shift while you are creating one like this, and, uh, and if you wish to create the circle from center, then you would need toe press down all and shift like I just did. And there you go. It's pretty simple. Um, I know it's a just a circle, but with few circles, you could make a different kind of publics. Next tour is line the shortcut for Linus. L um So if you was to create a straight line Ah, let's say 45 or 90 degree you will need to hold shift while you create one like that. So next, if you wish toe under the the droving, then you need to hold down control plus Z. And if you if you wish to undo the undo, then you only toe hold down control shift and press that or c whatever you want to call it . Next is bent all historical for pencil is p um you might be familiar with dependable from Adobe Illustrator on its A very useful tool. Next cricket for text is simple T And, uh, next week you have ah shortcut for ah art board, which is a if used to create the New Arbor. You just press a and click somewhere on the campus and next command is for Zoom. You just need to press Z and mouse. Click left mouse, click toe, zoom in. And if you wish to zoom out, unit toe press, I'll plus Zet and left click. Of course, you can also zoom in and zoom out with old and the mouse wheel scrolling the mouse wheel up and down. Uh, so the next command is Ah for ah aligning. I will show you by creating one rectangle. And so we're going to move these writing rectangle horizontally. As you can see, we're moving it right horizontally without having to worry about moving it. Ah, a little up and down. You can also do this vertically. You just press on, hold, shift and drag this don't. And as you can see, we're moving this rectangle vertically so on. This is very useful command for aligning your you weigh elements on the screen and next, If you wish to duplicate rectangle or any other object, just select that rectangle and hold out and drag this, uh, this rectangle latest. So, uh, if you wish toe duplicate that object perfectly vertically or horizontally arrested toe hold all 10 shift and regularly this for horizontally. You know, it's like I interested and it's perfect. So the final commands or shortcuts are for a group, so we should run toe, group toe or multiply elements. You just presage e or control Jeep and the if you wish to one group, then you need toe hold down shift Andry toe on Group D on its. So those are pretty useful shortcuts, that personal use in every day's work. And it helps me a lot with time. And that was it. Those shortcuts are very wistful. Like I just said, I use them in every day's work and they helped me a lot. So that was all in this current radio, um, seeing the next one. 6. Designing Intro Screens: show and welcome back toe first video of the third chapter in this chapter. We're going to start with the design. We're going to create interest screens. So first, open up Adobe's Thean True's Android Mobile template. Um, and then we are going to change our board name. So will it say interest Rain number one, because we're going to have three interest rains. But before that, we're going to add the colors toe our project because those colors will be used all the time during this course. And I like toe create the circles for for colors because it looked like a color palette, of course, and we're going to create a circle for each color. So next color code is like Bo on those color codes, and all those product files will be will be available for you to download the in the course . And we went 12 now green color. And, of course, add those callers in our color palette by clicking plus like that so we can easily, um, color some element whenever we need. Next caller is color red and the yellow. But of course we went with the white color, too, because there were going to you was, That's cooler, pretty much so. Now what we're going to do, we're going to train the name of this, our board, as I said Toe Interesting Number one and Next Roto Product Resource folder and the Dragon Drop Status Bar, which will fit perfectly to our android, the template. And now let's create one rectangle, which really represent background color, well paying this rectangle in dark blue. And the next thing we went toe open again. Our product Resource folder and Goto Interest, Green's father and the We're going to add one image for the first screen. This will be, let's say, welcoming screen welcoming image. We'll address this image of the center and there's you concede the laptop. We're going to fix those borders a little bit. It should look something like this. I think that's pretty OK, so now that we shall fix that, uh, we're going toe, put that at the center and we're going to lower down a little bit s Oh, that's pretty much of the position of the image. Next, we're going to create the application name on this application. Name will be called treated, and we're going to change its color and, uh, and front will be a little bold. I also included the in Project Resource Father. All those funds were used in this product as well as other other stuff like icons, backgrounds and all those we need In order to make this project eso the this subtitle will be, let's say, treaties number one, mystery and application when it comes to security and privacy and that we do care So we're going to change this colored white and we're going to do is find a little light 14 dp and we're going toe said it just below this title treaty, which is Ah, front letter Baldauf 20 dp and ah, next what we are going to do? We're going to ah, set next. So this will be like button, uh, to change to other ah interest screen to second in the screen. We're going to set the this next text toe Let the right front with, uh as I saw 18 dp And next we're going to create new are bold Just by holding out shift and dragging this whole our boat, we're going to rename it toe interest rain too. We're going to delay DC material and post other one. And of course, we're going to change this toe. Your privacy's our job. Um, we're going to change color toe white except the privacy privacy world will be green color like this. And of course, now we're going to add one more text or button. We're going to rename its toe back and, uh, next and back buttons should be 15 the p from bottom bottom and the left and right screen. As you can see, those hours 50 15 v p. And now we share fitting the peak from a bottle and left. And it should look something like this to lower down this next button A little bit, of course. So if you want to check how many, how much are you far from from skin. You just hold out like this, hold out and you will see how many DP are on the left, right in, button in topside. So it should look something like that. And of course, we're going to change the subtitle text off this second screen. You don't have toe worry about getting exposed. Let's say this is just the simple text you can write. Whatever you want Ah, with your application and that's on you. And now that we should have a subtitle, we're going to include our second screen second image for the second interest screen, which is also included in the Project Resource folder. Just decrease the size off this image I should be. The size of the first is the size of the first image. Something like that. And, of course, in the center of the screen, so perfect. And now we're going to create 1/3 into a screen. We're also going to copy the first or the second as you wish. You just hold down, out and shift and more. This our board. Okay, now we're going to change toe intra screen three, and we're going to replace next text to done. And we're going to set that fund from light toe bold. So that means when user clicks down, duplication will not show interest rates anymore because interest rates are supposed to show on Lee only when you was the first time he's told the application. And let's change this image. And of course, the title will be security on Word on will be green color like that on the center and the subject subtitle will be, Let's say Start Mystery Inc now or Whatever you want or start Mr In your Friend. So we're going to set it on center work quickly, and the the final touch will be, of course, the third image. Just drag and drop it like we did with previous to, and we're going to modify this image a little bit. Double click on the one element of this image, which is the right side off this field, and we want to change that capacity toe, let's say 20% and now it should look something like that. So that's it. We care successively created the three interest rains, which looks school simply about clean, and that was it for this video seeing the next one. 7. Designing Welcome Screen: Welcome back, toe. A second video off third chapter in this chapter were continue. We're continuing from the last time we already created the three intra screens, and now we're going to create the welcome screen. So open up at all the eggs deep and, uh, open your existing product so drastically opening the right bottom side and open your application or product. So, as we can see, we have already created three screens, three interest greens, and now we're going toe copy one our board by holding Alton shift like death, and we're going to move this our board, uh, the bottom just below below those three screens. Okay, so we're going to change the name of this, our board in the end. But now we're going to remove all those elements and we're going toe import. No, we're going to rename first toe welcome screen, and then we're going toe import the extra body, which is located in the resource product for them in the U Y. Elements followed, So just drag and drop it here. It's a simple a rectangle with shadow applied nothing special, but I wanted to include that in product resource directory. Okay, so it looks it should look something like that. And, uh, we should se 20 p off little light fund with white collar. Of course, this will be on the extra bar. You just hold all to see how many far, uh, is a welcome text. So it should stay like that for now. And we should now include the background. Also also open your product resource directory and go toe background folder and just drag and drop this background here because this thing's playground is a little bit a little bit bigger. We're going to resize it holding shift and we're going toe center this begun image to our hardboard. And then, um, we need to be careful when working with layers. So background should be at the bottom and the status bar above the background, of course. And the extra bar as well. Um, this will be a d overlay this rectangle, and now we're going to change the on the opacity off this overlay rectangle do. Well, it's a 70% and it should look something like that. So the next thing we're going to do is include the our application name toe our welcome screen. It should be 28 dp with regular Leto leg regular fund and we can set the green collar instead of white, and that will be the title off the screen. So we're going to wear the subtitle as well. But before that, we're going to lock down our big round. So when we're selecting or all elements on the arbor we don't need toe include the big around as well. So our subtitle will be your security is our priority and that is the main supplier. Subtitle off our application We're going to change the text size and UM, Fund to Light Front will be led to light off 16 dp and the women to create two buttons for ah, logging and, uh, for creating new account. The first button will be a purple color, and the second will be, ah, blue collar with, of course radios. A za can see. You can address this button radios for each corner, or you can use the same value for for all corners like I just did. So we're going to add ah, corners will be to four dp like that, and we're going toe change color to purple and then duplicate this rectangle just by pressing down, out and shift. And this will be a blue collar eso. Now we're going to create the text. You can create the logging text or signing as you wish I will put signing. I just love it more, and we're going to increase this text size to, let's say, 20 dp at the center, and we're going to copy this text and change the changes toe create account and, of course, center this text as well. So now we're going to move those buttons a little bit. You can group those elements if you want, or by pressing shortcut control DRI, that's on you and just lowered down a little. So our welcome screen should look something like that. It's a pretty simple but yet, ah, beautiful you must have read. And the that was role for this video seeing the next one 8. Designing Sign In Screen: You know, guys in the working toward video off the third chapter in this video, we're going toe design signing screen. So we're going to continue from the last time, Of course. So open up your existing projects, and then we're going to copy this previous our board, which is welcome screen. Just hold on shift and old and drag. Next, we're going to rename this welcome text toe signing, and then we're going to open open a project resource folder and we're going toe. Add one icon for ah, uh, for back indicator, which is back arrow or left a room. It should be moderate on the left, it's be 15 dp and margin on the right Should be also 50 deep. Eat as well. Hold old to see the margins so much it's will appear if you call dog um 2015 like that. Okay, so next what we're going to do, we're going to train this chatty battle colors from green to white and we're going to, of course, deal. It is create account button because we don't need it. And our subtitle color should be purple like the button. Next, we're going to create the signing taste, which will be a little bit above our signing for and it would be margin less Margin should be again 15 db like that. And then we're going to create one rectangle for ah, I put for We're going to need the two performs for email, address and password. We're going to train this rectangle corners toe 40 and quality purple, of course, except we're going to change this. It's a bested toe, 20% and we're going to copy this and fulfill again margin between those toe people feel should be around eight dp and next women to create the texts for those people. Fields one these email address in seconds. Password, um, sighs off. This text should be 50 and next we went toe icons for your name and password. Just load project results file, and they're them. As you can see, I have added those icons on this outdoor directly, but that's not a good practice at all. So when you are dropping dragging those items, be sure to drop them on the empty canvas and not the artwork like that. So first, change its color toe Dwight and then place them on the left side off those texts, which would be a margin from the left and right off. Those icons should be around eight or six. Um, but again, I think maybe eight it's a little better. We'll see. Yes, A shouldn't be or six six Nanto set it to six. It's better. And then we're going to grow up those elements so we can move them on the or board easier like that. And we're going to add one little directing for child box. This will be remember me to books this little directing or should he have ah for ah, the P Radius as well as those Ah, those input fields in the button. So next we would create one fixed Remember me, which will be 14 defeat and then we're going to move this button. A little higher margin on top from this button should be 21 like it is from first people field toe signing text. And that's pretty much it we have successfully created signing screen. Except you just forgot to add the one the one I could indicator for hiding and showing the password. So we're going to do it now. Get on toe our product resource folder and add a little This little icon, which is named Heated. So we're going toe over its size, decrease its size a little bit and the we're going to set it up on the right side of the field like that. It would be around six 6.5 B on the right. That's it. We should now completed this screen. Thanks for watching and seeing next video. 9. Designing Sign Up Screen: Hello, guys. And they're welcome. Tow fourth video off the stern chapter in this video. We're going toe. Continue from the previous story, of course. And we're going to create the sign up screen. So first, open up your project and we're going to copy the signing our board by holding shift and old and dragging this. But before that, we're going toe change. Put feel the capacity from 22 15 it was better. And then we're going to copy this work like that. First thing we're going to do is change the name of this Alberto signing screen or ah, sorry. Sign up, screen. We're going to train to text signing toe sign up and then check the margin is 16. Okay, Next we're going to change the subtitle Color toe, blue button, blue as well. And those into fields color as well to go. And then we're going to remove. Remember me and this little try box and, of course, changed the name of the button to create account. So now we're going to lower down this button a little bit and those input fields as well, and we're going to create the to more fields. One for a user name and the one for repeating the password. Because when you are a sign up, it's a good practice to I had two fields for a password. Do a bit margin between those fields should be the same. So keep that way. Eight. Dp Next we're going toe train this on this icon in the text so we're going to remove this email icon at the first name. Far feel input, and we're going to add one new icon for it was her name women to change its collar to white and that put it right in the place and the quarters. Next, we're going to change the text from email address. Toe the user name. I'm just checking how many? How much spaces between icon in the text. It should be around eight dp eight or six. That's on you. It could be six. Aziz. Well, so then we're going to change the password to repeat password Just like that and a T end. We need to put this button a little bit higher, and we're going to group all those all those eminence as well. The shortcut is controlled G. In the end, we're going to treat this text above, signed up for from signing toe sign up or great account, so change it to a sign up or even better new account. It should be around 60 V P. Margin from from the left side on just more like this. Let's check out the home May spaces between Okay, 16. It's good. And that was it. We share successfully created, sign up for or sign up screen if you want. Thanks for watching and seeing the next video. 10. Designing Dashboard Screen: Hello, guys, and welcome to the fifth video off the tractor. In this chapter, As the title says, we're going to create the dashboard screen. So open up for your existing project and then we're going to copy 11 artwork, which we already have, and we're going to set it up down below a little bit. So this this screen will be for our board for experiment for dashboards, and we're going to remove existing elements like signing button, create button and those toe fixed. So for title and subtitle Next we're going toe unloved this background so so we can remove it and we're going to remove that over as well. So change the text from a welcome toe. There's board and just move it a little bit with right side. Next, we're going to add three more icons, one for many, second for notifications and third for search. So for us, we're going to add a menu and we went toe move it on the left side off their poor text margin from a left modern off. This icon shouldn't be around for the sea. Let's say 15. We'll see okay and right margin off the cycle should be 15 as well or 16. Next, we're going to where? The notification icon. We're going toe paint and paint it white as well. Search icon And on the right side, off this extra bar would be notification icon and just beside Unless I should be search icon. So we're going to create the one little circle and painted blue color. This will be an indicator off. How many notifications? Uh, seven being read. So we're going to add one number inside so that do you know how many instigations you are hearing to read? We're going to increase this. Increase this number a little bit and whole the control DRI toe group it and it should look something like that. Okay, Next, we're going to create one rectangle for ah, navigation. Drover, we went toe Add one more rectangle besides way will rename this navigation drawer and one rectangle above it. Next, we went toward one rectangle which will represent in a black correlate with 20% off, bested like that. Eso where would create one ellipse on the perfect circle and then we're going toe Add the one icon for lets a user increase its size a little bit. And okay, so we're going to where? The two more texts here on top of this navigation. Drover, One for user name and the second for status. The status default status will be Hi there. I'm using Charity will change phone toe. Let the light off 14 dp as well as the user. And next, what we're going to do, we're going to create one little circle, which will be an indicator off users activity. It will show you a few stories online like that in some of the next videos. We're going to create more, um, more of those indicators, like online, away busy and offline. But for now, we're just going toe do with online. So the top and the right margin off this online text will be eight dp and then we're going to have the one more icon for quote, this will be an indicator that will be placed next to the on the status which will be indicator off its usage. And, uh, this should be Should they look something like that? I guess it's fine that way. Eso next. We're goingto the this navigation drawer items or 90 options as you You can call it the the way you want. So those text would be, let's say, 20 20 dp size sp sized. The first option will be named edit Profile and the margin between them should be 20 p second. These friend requests that will be messages next, friends or friendlies. So copy again. And well, I went with the name these text identifications copy again. Just hold down a shift in old while you were dragging this text. Eso we have now settings and the log out We're going to add the two more options invite a friend and the last option will be helped. Okay, So margins between all those for those texts will be 20 dp except for those two with the bottom, because those toe options said the bottom are not main options. Next, we're going to select all those icons for those options which will be placed on the left side off the text, and we're going to change its color toe dark blue. And now we're going to place them one by one. So first we're going to move those attacks a little bit so we can share space for placing them as well. Okay, the first cycle for a profile is this. Spend the left margin off the cycle should be fitting like we did before with I constant everything. Next, friend, request we're going to add one more One more little plus toe this icon and we're goingto grow those two elements by controlled by holding down Control DRI. Okay, um next his icon for for messages again, we're going toe. Three more circles toe this cycle so it can The looks better. I guess we'll see Andras selected all those elements and the group them again and move them besides text messages. Okay, next week. Ever friends. I couldn't just like that next weekend Modifications. We know what I couldn't should look like settings. This icon should be increased a little bit because it's a little bit smaller. I guess we're to increase it just a little bit. Okay, that's that's perfect. Next, we should long out I can't. And finally, we're going to move those decks a little bit on the left side again. Margin from those texts and icons should be 15 dp and those two likens for invite a friend and help options, and we're going to add one line, which will be done blue color, and we're going to lower down the passage 20%. So this line will separate the main options from the from those two options on the bottom. And it looks cool, I must admit, so less touch will be, let's say, a notification indicator for friend requests and notifications. So those indicators are you are already know we're going to add one rent of number two, this circle, which will be an indicator off. How many friend requests we already have that we haven't seen already. We'll set it to four. This is just an example, okay? And we're goingto co operatives this circle down below toe on the right side of notifications. And we're changing to sound because we have already because we already have a seven modifications about and will be to change the name of this Alberto Terrible street. And that's pretty much it for the dead aboard. Thanks for watching and seeing the next video 11. Designing Requests Screen: Hello, guys, and welcome toe. Six video of the third chapter in this video. We're going to create a request screen. But before we do that, we're going to modify that their boss train a little bit. We're going toe decrease the size off those options, toe. Let's say 16 and we're going to move them a little bit. Margins between those texts for options that will be 25 not 20 life before we're just going toe, move those icons a little bit on the center of this text, and it should know something like that. It's pretty better, I guess. Um, okay, with toe move this indicators, Aziz. Well, and finally, we're going to corporatists are both and start designing our request screen. So for us there removed those elements. You are elements off navigation, Drover, that we don't need just said like them by according shift or with the select all and delete them all. It said this and this user name. I big toe copy this extra bar now, or we're going to create a new one. Do as you wish, and we're going to decrease its height a little bit. So in this little rectangle. We're going to play ST Abbs or three texts, which will represent steps. The first is for requests, second messages and third friends. So now we're going to increase its phone 20. But that's just temporary. We're We're going to change its size a little bit lately. Later. Um, now, the second text will be centers messages in turn, friends. Eso. Now we are going through a red one line or, uh, rectangle with small height. We're going to change its quality toe blue, and that will be in indicator on, um, it will be an indicator and show us one or each stop the activity. Okay, so we went with one more rectangle, which will represent card or box, and it's left and right. Margins should be five. And the top margin should be around the then and 11. We're going to remove its border and just place a shadow. Okay, Shadow should be x zero. Why three and the beetle two wives should be sorry. Why two and the B two next living to switch the colors like that off this little icon and put it that way. So next we're going to create two texts, one for user name. This will be the user who is sending us request. Let's say, uh, Omar 91 we're going to change its squalor toe dark blue front to regular on the size off 16 or 18 and women to copy this text again and say former anyone wants to, uh, as us friends. And this will be the subtitle off text size 16. Of course, the opacity off this text should be around 60%. So nice. We're going to add two rectangles on those directing us will represent two buttons eso won will be for accepting. And the second will be for denying this this rendered quest. So I will lower down decrease the size of this subtitle to 14 and the We're going to add those toe right things. I would just find the right size for for them. Okay, just a little bit and it should be fired. Okay. Those buttons radios should before is your mind guest. The first button will be blue in the second. Purple first is for a setting. As I said, size will be 16 and the fund will be regular letter or regular. Now we're going to increase the height off this button just a little bit. Okay, which would be fine like that. So this button will be a said the lighter regular fund, and we're going to copy this text and change it through the night. So those are two options that users cannot share. And we're going to read this little time indicator which would leave 20 off size of 20 sp with front light light. Eso this ah time indicator with which shows us when the user, if you send it us a friend request. So we just write it five years ago, let's say and again, we're went with the this little line indicator. Okay, so we're going to copy this this whole box again, and we're going to address the rename this user name and time indicator. So margins between those toe boxes should be a 16 and will be changed from five days to yesterday. Let's say margins from those for time indicators should be six on top in the right or eight . As you wish. So we could change the user name to object. There's just an example. And we're going to create one more this this box. Okay, we're going to change toe, Um, 14. 50 which is two PM if you haven't known. And again we're going to train this user name to, let's say, Freeman it and smell it just for the chorus purpose and our request screen should look like that on just simple, with few informations on Who is the user who sending this request. And we should lower down those three texts toe 18 to size of the 18 SP and margin between those two. Text should be 15 and we're going to move this line or a rectangle is a little bit just like that. I think that Okay, we're going to lower it down and it should look something like that, I think, for watching and seeing the next video. 12. Designing Messages Screen: Hello, guys. And welcome toe the seventh video off Tour chapter in this really working to create messages swing. So we're going to continue. From the last time in the last video, we have created the request screen, and now we're going to create the messages screen. So you need to copy this previous our board does by holding on dragging down this decide, but with shifting all play, of course, change the name of the Salberg on. Then we're going to remove those those you elements that we don't need except this one, because this one we will need We're going to switch the place of this line indicator to messages now so that you know, you're on messages. Step and then we're going to quit one line. The top margin of this line should be 80 and this line will be the rule. Color will change. It's a past it toe. Let's say 20% in this line will represent at least the item. Let's say so. We're going to lower down its size of this this user name icon, and the place is in the center of this list item books and then on, uh, left in the the left modern off this I contribute 15 as well, and we're going to copy this using let's say Omar is sending us a message. Or we could have a conversation with Omar already. Eso We're going to add one more subtitle like that, and this cycle will represent the last message in our conversation. So we will just have this surround on texting. That's better Hill Day. I won. I was wondering if you would like and the three dots, it means that this message is longer than then then this. So it's a okay, we'll put it like that. Next thing we're going to add the one circle for ah activity indicator. It will be green color eso It will represent this user's activity. It means the Omar is currently off currently online. So we're going toe. Move it on the center of this text like that, and we're going to add time indicator. Let's say october 3rd, 2000 and 80 um, fun should be eight or nine and the right thing top margin should be, let's say, five or six dipping like that. Okay, so we're going to copy this again once again and just uh, just change a few things, Okay? We need to corporatists as well. And now I think we should lower down or decrease the size of those activity indicators a little bit. But before that and tow chain, this green color toe dark blue because of the color represents activity offline authority. It means that this user is offline. So we're just tape. I don't miss Celia. Just an example. And we're going to decrease the size off. Okay, We're going to frustrate this this times status, which will represent When was the last time we had a conversation with this user and the This activity indicators should be that size. I guess. So we're going to copy this this little circle and again changed its color. Toad are blue and we're corporate is one one more time or we'll copy one more time. Toby. Exactly. I was going to change this time status as well. Just, uh, to look ordinary now that we have ah changed that we can Assad changing those user names and the two more activity indicators. So time status should be Should he have margins on the right. In top off. Let's say six. The B or SP. So I have had the red and yellow indicators read. The indicators shows that the user is busy and the yellow that he's away. Okay, we'll continue this Susan name as well like that. So this message of streams should look like that. We would have those activity indicators, user names, the last message we shared with the user. And finally, we're going to add one x of one floating button with the with the right in the bottom margins off 15. So we're going to remove his border and change color toe blue again. We're going to add the shadow and we're going toe. Add one more sign, which is Plus that means when we click this fourth button weaken, start writing a new message to our friends just like that. Eso eso next, what we're going to do, we're going toe increase the size of this notification indicator a little bit so we can see it more clearly, and we're going to group those elements now. The notification and the corporate on the previous are born as well. They should be the same size, of course. Just hold on old and wreck this. I could really the previous one and add new like that. I just thought that we should change this medication indicator so we can see it more clearly. Yes. Okay, so thanks for watching and seeing the next video. 13. Designing Friends Screen: Hello, guys and welcome toe the eight video of the third chapter in this video. We're going to design a friend's screen, but before we do that, we're going toe. Make a few modifications in the previous screens we're going toe. Add this floating button from our last screen toe, our previous screen as well. Like that, and I will remove those three lines three blue lines. But you don't need to remove them them. I just did it by myself. Off my This is my personal choice. I think it should look like that without those alliance. So next we're going to copy the previous I'll board to rename this our boat, and we're going to remove those those elements that we don't need at the moment. And OK, it should be on 15 on DP off margin on the left side, and we're going to add the one more character A. Which would be blue color and bald fun. Uh, let's say 20 or 22 as you wish. Eso those friends off hours will be sorted from ABC Toe Zet s Oh, we're going to create a few users starting with a weather. Let's say 1st 1 will be named Adam 92. We're going to change the color of this of this text toe, dark room and the we're going to change the font and its size. Okay. No, uh, left margin of this text should be 24. And we're going to copy this this contact or friends? Uh, okay. So margin between those users should be 21 environmental there. Just change name, Let's say aqua or this Adams guy or something. I don't know. It doesn't matter. This addressed, for example, purpose. And Alabama 01 lets it. Okay, so now that we should have created few imaginary friends, we're going to copy those elements we care already created and create one and create contacts for Ah, letter B. Let's say okay, the margin from a letter will be 16 or 15 on the top in the left side. Just so you know. And okay, now we're going to change this a Toby. So it means our friends started with the big user name left will be. Was the name with will be listed down below. So the 1st 1 will be called. It's a baby Mars. I know pretty greater names. Yeah, next one will be burning. And the 3rd 1 will be Briana. Let's say Brianna four. Okay, so our friend list should be a simple is that we don't think toe add any more off you elements. We just need to read. One will align indicator, and this line will be colored with blue size of four or five. And this line, it will be an indicator off. How many friends you have are that we should have ah, many friends down on the list, Okay. And the last thing we should add on this friend's screen is one rectangle eso we're going toe move this floating button about this rectangle. So does goto layers and move it like that. And this, uh, this right angle will be a placeholder for ah, place water for text off How many total friends we share. So we will say, for example, 126 friends and we're going to switch this line from messages to friends so that, you know, you are on the friends step at the moment, and that's pretty much it. Yeah, we'll change the screen name France screen and our contents or friends Screen should look like that it's pretty simple, but yet useful and clear. Simplicity is the key. Always. So that was it for this tutorial. Thank for watching in the sea in the next video. 14. Designing Chat Screen: Hello, guys. And working toe the ninth video off the third chapter. This is the last video in this chapter and the last spring we will be designing. So before we start designing new screen, we're going to modify the previous one. We're going to move this text to the center and the that. Then we're went toe. Remove those three extra bars or we can make them transparent, as you wish It can always better. You must have. Really? And then we're going to copy one outboard and move it on the left side. So next we're going to copy one a notification icon from the previous screen, and we really was the same. That same likening our new chet screen. So we're going toe unload this background and dilated margin. Right margin should be around 10. Davy and this icon should be centered with text allying with Dex. Um oh, sure. This is Ah, margin off, then. That's working. So, uh, next what we're going to do, we're going to dilate all those elements that we don't need, and they're pretty much all so the next thing we're going to do women toe import Ah, texture So open up a product resource file and in textures for the real serious file. Just drag and drop it. Here we will put it the at the center of this screen, and we were going to increase its size to the bottom hold down shift and joy this this texture toe fill the screen like that. Okay, eso we're going toe put this this texture at the bottom off the layers. So it should be below this overlay like that and the we should look this structure so we cannot move it and increased the opposite to 70% of this overlay. Okay, And now we share beautiful overlay. We'll change the name of this signing toe. Omar 91. Let's say we're treating with this user at the moment and we're going to copy. Copy this activity indicator, which is all I, uh, indicator. We're going to copy it here, and we're going to move it on that side off the user name like that margin should be right . Margin should be around eight dp. And next we will need to add a few more icons for microphone for emotions or smileys and for attachment. So the first list changed those those course. But before that, we're going toe change the color of this one line to blow. We're going to decrease its size a little bit later, but okay, it should work like that. So now changed the smiley caller toe blow and we're going toe said it on the left side of the screen left the bottom side and we went to say, a type of message. So this will be and input field for user toe. And he put a feel for user to type of message and that those two icons will be placed on the right side microphone. I could should be white collar, and it will be placing this circle, which would be blow color. We're just the center of this. My front. Okay. And, uh, we're margin for this smiley face with the 50% of less site and OK, and I will give center it correct. So we're going to group this two elements by holding control DRI attachment. I could should be white color and should be placed or aligned with those two elements on the left, so use a real corruption toe. Um, text a friend with voice. He will hear option toe attacked, premature or any other file endures. Of course. Smiley faces. The next thing we're going to do, we're going to copy this user name, Michael from our last screen. We're going to just the, um, change color to purple, for example. And we went to create the one rectangle which will represent Chet screen Trek message from from users. So the thing is, we're going toe change this rectangle radius, But not all radius is just one, just three. So you'll see now. Okay, lets places they're willing to remove the border and change the color toe blow late later. But now we're going to add three. Three radius is toe 20 or 30. We'll see. Okay, so 1st 2nd and fourth radios should be, uh, 30 pixels for now. But later we will changed 20. Okay, so now that we have created this will chet cette image, let's say we'll switch your past it toe 40 40% for now. And, uh oh, and we're going to copy this check screen again. Margin on the right, on the left and right for those screens will be 65 and again, we're going to change those a radius is Ah, but the first, this purple tread screen, let's say, will be around 70% of bestie and the other would be off 20. So this purple jet, the screen is for Ah, for Omar and the blue is for us. And now we're going to start typing. Let's say shallow there, John, how are you? Just adjust the random text. You you can write whatever you want. This is just for design purposes. Let's say I was under. If you could borrow me your bicycle. I was planning to go fishing, Let's say and this tests will be moved in center. So this message is Omar sending to us and we're going to respond to this message? Um, that's a K O. Mara. Haven't seen you a while. Sure, I will give it to you. You don't even need to ask. That's just an example. So this is a simple conversation between two users. And of course, we'll center this text well, next we're going to move this first. First, the message and the last side. We're going to wear this. We'll profile picture in the kettle. So instead, those ah, those that icon should be a profile picture off, Omar, but this is just an example. Eso We're going to move it a little bit lower, and we're going to copy it one more time because we're going to add more conversations hearing this screen. Okay, We're going to just, ah, lowered the height of this current message screen and, of course, slow down. This same it's too. So for text. So let's say thank you. Thank you, man. I really appreciate it or I or a real appreciate. So we'll put it on center again. Um, we will add one more margins between those. Those messages screens should be the same. 80 18. So we're going to move this a little bit, Okay, that's going to write. And we're going to say, you know him starting all the time. Okay, that's addressing example again. Um, so next thing we're going to do is increase the size of this master screen a little bit, so the message can being cited, and we went with the again. I will respond. Margin on top should be ating. Let's say okay, it should be the same size, okay, like that. And we will write with say something like you can get it now if you want. Okay, so we're going to center this text as well. And the last text will be from Omar. And we will, right, Will do things again. And that's the end of this conversation for now. So this is how our jetstream should look like it's not too colorful, but yet simple and pretty modern. I must say, before we do that, before we finish this video, we're going to change. Those radius is from 30 to 20 for all those tread screens for all those bigger screens, those other screens will be 30. Or we can change them 20 as well. We'll see. Okay, they could be changed toe 20 as well. It's It kind of looks better again, and that's it. Um, and we can now finished our chat application. Our ratification should look like that. All strings are done, and the in the my 2nd 4th chapter, we're going toe prototype this application and I will show you how it should work. Thank for watching and seeing the last chapter 15. Prototype: Hello, guys. And welcome to the first video of the fourth chapter. This is the final chapter off this course and the in this video I'm going to show you How can we prototype our existing application? So open up per project. And, uh, now we share all 123456789 10 11. We have 11 screens created in the scores, and now we're going toe make our application a life. So if you want to do that, we need to go to prototype section and the first thing we need to do We need to click on this next button and drag on our second stream, which means that when we click next, we will get the second string. We could even a transition animation skier. We will leave. That is, it is Well, just the click slide left. Because we're sliding to our next next screen and we will use out. Okay, so that's it. You just click on the campus again and on the back button on the second string, we will choose again. Just this king slide right on the our next will choose the same, but just changed this this to a slide left and don't third screen back. We'll do the same as we're doing is we did in the previous screens. Easy and out left. Okay, uh, so now we're going to add the done to our welcome street, and we're going to say, Let's say, slide down. We're going to train this a little bit. And when you want, review your prototype uselessly display button and you will get one window. So when click next, as there is a slowly sliding from one to the other screen, the third and again those are working. When we think done, then we'll welcome screen will appear from above. It's pretty beautiful animation, I must admit. So we're now we're going to continue on signing button. We will add the now, let's say, slight left animation and the next on the bag button. We're going toe slide the right animation on the create account we're going toe. Connect that with our sign up Spring and slight left an emission. Of course, On the big button off the sign up screen will say slide right and emission and in our signing screen on sign in button, we're going to connect that with our dashboard three animation should be, Let's say what it should be like, Let's say slide up or Ah, Bush, Bush up, Let's say push up and the now on our dashboard when click Friend requests we're going to make animation. Slight laughed. Let's say, Well, just make animation for that board, too. Go back if you want. Uh, no messages on the messages screen slide left and the dashboard, Of course, to go back slide right. And on our friends cream, we're going to add slide left like that on the quiet Beck slide, right? And the hour Chet will get from Omar to our chest. So on that measure should be slight about or, yes, slide out. Let's say might be good. We'll see. So now, uh, we will preview our application again by holding the play button clicking play button. So as you can see you here next, back next next, we could go back again next. When it clicked down, we'll get our welcome screen when click signing will get signing screen. When we go back, when quick create account will get sign up screen, we'll go back again. Click signing and blow again and we'll get dashboard simply Friend requests. You'll get requests. Music messages will get messages. Strange. When we click, friends will get friends screen and we'll go back toe messages screen. So when it like Omar, our conversation will appear and that's it. Way forgot where? The back animation. So when we click back button on our tres screen, we will make in an animation toe the messages screen like that. Okay, let's say slide up, for example. And now you also came an option to share your prototype with your friends or social media or anyone else on your client. So you need to click that button on the right top corner. You need to enter this, your title, your prototype title. You can even ah require password eso your link with the private you know, whether add a little bit stronger past putting on to create this link. So I'm going to create the strong password. I would just start something random, and then the create public link button will be visible, so we need to wait a little bit until this until other beings, the finish is creating this public link, and then we could share this public liquid, our friends, social media and show or plans or and show them our product design. We can click this little icon to copy to copy the link once we're copied. Once we copy link, we can open the Web browser in the space that link. Click enter, and it will prompt us to enter the password. In orderto see our prototype, which is awesome. It is secured. I just had the passport click view and the It will show us our prototype with option to comment our design. So when you share it with your friends, they can comment your prototype and those comments will be public, and they can even see or prototype how helping you design your project and common debt. So this is very, very useful option. So that was it for the scores we have successfully created or designed our application and prototype it. I hope you enjoyed in my course, and you can learn a bunch of stuff about application design and about the dough base de I might create the one more ah video to show you what you can do with this. On this knowledge, you gather the through my course and the that's pretty much it. Ah, thank you for enrolling in my course again and good luck 16. What Next: Hello, guys. Eso I have decided to make one more video in order to show you what can you do as an application designer and how much money you can make with with your skills by designing applications. So the first website I'm going to show you is ah graphic a river dot net A z can see I have opened one Ah ah one ah application design. So this user is setting this application design for $7 it's not much, but ah, she had Ah, As you can see, 56 sales, so do the math. You know, it's not It's not small amount of money. The next website is 19 I designed. This is the best website for ah in ah, application designer. As you can see, when we select the application design category, we see that some of the contests were awarded with more than $1000. So as you can see this Ah ah, this card is here is ah for 2000 and 60 almost $70. So one user made on this amount of money on the day work or or you know ah, you can see you can make a lot of money on this website, and it's pretty useful. I recommend you use this site, create account and start. Start designing your applications in submitting your designs to your clients and next you give up work and the freelance. Those are, um, two Web sites where you can ah can post your post your product designs and make money with them. So that was a pretty short video again. Think for watching thing for buying my course and good luck.