UI Design in Adobe XD - Complete App UI Design | Jenish Dhanani | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

UI Design in Adobe XD - Complete App UI Design

teacher avatar Jenish Dhanani, UI/UX Designer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (1h 21m)
    • 1. Introduction to UI Design Course

      0:39
    • 2. What is UI Design? Explanation of User Interface.

      3:05
    • 3. Introduction of Adobe XD - UI Design Tool

      9:33
    • 4. UI Designing - Part 1

      11:34
    • 5. UI Designing - Part 2

      14:14
    • 6. UI Designing - Part 3

      9:45
    • 7. UI Designing - Part 4

      16:59
    • 8. Prototyping and Mockup

      11:33
    • 9. Freebies for UI Design

      3:57
  • --
  • 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.

53

Students

--

Projects

About This Class

Are you ready to dive into the world of UI/UX design?

This course will help you a lot and will give speed to your designing flow.

In this course, We will learn Adobe XD (a UI designing tool) at first. Then we will start from the very beginning to complete the app UI and mockup also.

What we will learn?

- Tips and Tricks to save time

- Build full App UI

- Working with fonts, colors, images, and icons in UI

- set UI in the mockup

- prototyping of UI

- At the end of the course you will have complete UI to show

Meet Your Teacher

Teacher Profile Image

Jenish Dhanani

UI/UX Designer

Teacher

I am an intermediate-level UI/UX & graphic designer skilled with Adobe Creative Suite. I possess a wide range of abilities that combine innovative art and design principles.

My aim is to design as per requirements or even better that users can have the best app or web user experience.

I welcome the opportunity that how my skills can be the best service to your company. I appreciate your time and consideration.

 

Design Portfolio Links:

Behance: https://www.behance.net/jenishdhanani

Dribbble: https://dribbble.com/Jenish_Dhanani

 

If you like my work:

Buy me a coffee: https://www.buymeacoffee.com/jenishdhanani

See full profile

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.

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.

Transcripts

1. Introduction to UI Design Course: I guess I'm Janice And this is UUIDs encodes n0. In this course, we will learn introduction of what is UAVs in and what is a process of UUIDs and like wireframing and all, you need to know prior dissenting XPS for this course, you're designing tools like Adobe actually stigma and others revealed isn't one complete ship from start to end, reframing, designing, prototyping and mockup, and some free Ms. Also, saga is disingenuous and I will get two guys in Australia. 2. What is UI Design? Explanation of User Interface.: I guess what is UUIDs? And so as the name suggests, user interface. So what we see you on our mobile screens, websites and other laptop screens also. So what we see as a user interaction. Third, consider under user interface. For example, let me open Chrome for UI design examples and give you a brief idea. What is u Edison? So let me just open the Chrome. Yeah. This is a great website for your design inspiration and all. This is dribble. So as I said, mobile screening interaction, this is your great work ahead. This is where I've said to you, I decided, wow, this gives an idea about what, what is the topic. You, I didn't use the full grief, not in written by design. This design is great. Uid then comes in. Ui Keats also. We can design your kids also for you. I Air panel. So let me just open this. Yeah. This is all so great innovation. I think this is a creator in cinema 4D, your blender. Yeah, this is great. So now in UID then there is a transfer of 3D illustration. This is 3D illustration. This is also a trend. You can put it into your APY website. You a, this will be, look good, very good. So the, I think, uh, you, you brief idea about what is USD. So this is the UID is anything where we convert our idea into app or website. If you think about the Fourier put this UI will justify that. Simple. Yeah, one thing is, how do you easy? They are to a redefined by one of our example of 3D efficient. This illustration looks good in this website. Great, great. Over. This is a mock-up. We will see them mock-up also. Welcome to represent our UI. Mm, great way, like best two. I hope guys. Some idea about what is user interface. So we're going to explore it in our next video. So take care. 3. Introduction of Adobe XD - UI Design Tool: Welcome back guys. So for you it is and we will use Adobe actually. So it is free also and purchasing Also. You can download it by clicking this, you can download any solid. So I have already installed this. I will open the Adobe actually, this is the Adobe actually dashboard. So here you can choose the various sizes of iPhone and ten are and all Google Pixel Also, if you are designing web UI, so you can choose this size also. And now new feature in net of SDG sorts in Twitter, Facebook post, Instagram poetry you can design all sorted. And if you don't want any, any of these ten you can customize. You can enter your size customer. So I will go with this one. Before that, we further. What if you want to learn this aid of equity in deeply? Here there's some tutorials you, and you can check out this one also. So we will create first to our first-year way out from my n naught by first. So we've been selecting which one, okay, iPhone ten, u h. Here near screen is open and this is going to work with okay. For first name, first sale the document. Year on by clicking these on, by clicking this, you can sell to a local document like one machine, Mac or PC or anything. Like little images. So the, this document, meal UA. So okay, if you want to rename this screen, if you want to rename this screen, just double-click on these. You can rename like I will give you home. O. In. There are lots of screens, like home screens, sidebar screen for rating Meno screens that lots of, you can say activity also, home activity. So we will see the brief, we will see the brief about this layout and all. This is your working area. This is tools and these are the layers. If you create this square and these debt layer will be shown here, ok? This is rectangular and all you can also around, okay, shortcut. By pressing V, you can directly go to the arrow, okay? If you want around these square, does tap and hold, tip and trick, right? Okay. Circle, triangle, line, end polygon also, yeah. Wow, Photoshop, Illustrator thing is also a year, right? Okay, text. You can add texture also like i1 to submit button Submit, right? For the stacks, I can change the color also, bled blue, red, border, nine, not on the border. Shared also, you can view the shadow if plague measure. Yeah, you can see here shadow. Okay. Begun onblur. Yeah, we will see this, this wizard is amazing guys. This can give Apple Fu, glass frosted effect. These are the shortcuts. Like if, if I want to use one color it many times, then I related the red colored in these, like I want to use this red color in my UA many times, then I will simply present plus button. Yeah, taste this property will be here. If I get if I add some open city law, If I do open city load, then it will show different color. So this property will be shown here. And I can use it anytime. Like if I click on this, I want to start this color click. You can rename it. Also double-click and rename it like I will lose the red, yellow, red. You can see, okay, over you can delete, also delete, delete and edit, and all. You can explore by yourself. Okay? These are the layers. Layers, right? No need to explain. These are the free plugins. If you want to convert this UI design into f. So you can do it by plugins or development him. Also. This actually to flutter plug-in converts all UI into flutter obligations. Flutter obligations are working on Android and iOS both. So that is a pretty, pretty impressive these portion is remaining. So let me just so give the ovary. This is alignment tools like center, horizontal, center, vertical center. Repeat agreed, we, we repeated maze. You will repeat the things like these, horizontal or vertical. This will using cards. We have seen in many apps that are leased. So cards, right? So we will use this gradient, OK, just ungroup discarded for four. Now, this is with x coordinate, y coordinate, and reflect horizontal and vertical reflected also the degree like I want to 90 degree. Okay. These older some scrolling portion. Okay. Responsive XYZ menu law roto, default. It is auto. Opacity, Sherpa city. This is darken. Multiply. These are the blend modes like Photoshop. If you have used Photoshop, this is going to be very easy to write. This is the corner radius. If I increase the corner radius, this will be increased. If I want to change a one particular corner, then you can see here, this is fairly color. I want to fill it with black. I don't want to border then uncheck shadow, box blur and object blur. Box blur we will see. And this is your object Blub. Yeah. This is unfocused, i think, right? Let me just give you the UX or your prototype, right? The copy and paste. And I will just okay, I will click this button and this activity will be opened, right? So go to the prototype tab. Click on this. If we assume that this is what and this looks very ugly. Drag and to the next activity where you want to go. After connecting, you will see some properties like Tab key always. Generally we use temp and read. For a transition. There are lots of transition. We will see auto, auto animate like hero effect in flutter. Okay, is out in, we will see these in brief. Also. You can see the videos also Adobe Pro versus video for prototyping moles. So we will play this prototype, how these works. If I click on this, the second activity will conduct PyCon this year. But from this activity we're going to go out the back activity. So let's fix it. Clear conduit and go to the first activity on the tip or to animate. Start. Okay? Click on this, click on this, click on this, click on this right. So you can share with our team also. You can share with their team by new link and generating sharing the link. So guys, this is brief about the some made-up dashboards and all. So I guess in next video. 4. UI Designing - Part 1: Welcome back guys. So we will create a traveling epi UI, right? So we will first visit some UI for inspiration purpose. So here you can see some examples, right? In this. This is one ship. This is one cell segment and this is one. And this bottom nucleation rate in bottom Nagin and there are some icons. The cycles we will see how to download from Google guidance. Who will material DO tire, right? Okay. So this is some of we can say inspirations on this clique. This will open the second activity, right back button, like button. If you like the place, then this will save into this activity, okay? T-shirt total phi activities, I think. Ok, this is inspiration. This is second inspiration. I have downloaded some dribbles so you can visit there also. You can simply sell their traveling FUN. You will see these results. So this is also good, but this is a hotel booking and no, I want these type of UI like you can get the information about places, not all attention on. Ok, we can considered this layout also, like this is good. Okay? Okay, this one is also good, but this is again Nortel. They can convert it. But to see the perfection color combination, these, these are color combination are great like whiten propulsion loop. Okay, so this is our next two-way. This is also good credit. And getting the information players there said, oh, yeah, great. So these are the US samples. What do we recreate wreck. So I wish you pause the video and see the UI and create your own UI in your mind or on the airport, right? So pause the video and see you. Okay. I hope you are designing some USB ribs I'd designs, right? So for this UI we need some icons like Home icon, position icon, user icon, so vivid. How will we get? Just open the Chrome and search material. Lot io slash resource, place a constraint. Or simply such a material dot i is simply this is the Google UI guidelines select. You can see icons. I request you to go, go throughout this. This is great. Or click on the icon and icon will appear, which I gone. You want, like, I want a Home icon on my home. Okay. Outline. If you want outline around it, if you want to. If you do not want to, sharp edges red, this will give corner to turn gray and black and sharp, sharp edges. Round outline field. At this time, I want round, click on the download button and I can simply will be downloaded. Go to download version two. Okay. Just drag and drop to the yeah, actually, here is the download. Like this is essential for metric. You can zoom any, any, any height, any wheat. For the UI, we need some colors, red color pellets. So I will create or you can just simply search that color will, Adobe color will reduce their cubicle or we'll click on the first link. And the color will, will appear. Now, thanks. Yeah. You can just click and drag. You can find the different color palettes, red. These give automatically color pillars like this and this, this, and this kind of combination and this core will be co-pay to Adobe actually like if I want to color these into blue, just pasted color-coding these control the, yeah, here it is, right? So this color will, will be helpful, right? So pause the video and create your color palette for you. I read, I hope for you, created your color palette, right? So I created the scalability and I've downloaded these icons from material DO tire, you can download it. I also create a shadow on the status bar for OUA. You can simply create these by these icons and group them and make a component l so you, you can also not Component then aids, okay? Yeah, there is known it but I have created this one. Okay. So my team will be blue, like main color is blue, right? So there is no standards for UUIDs and what do you think then design it? If I want to create a Cards for the places like these card, one card, then second guardian, like horizontal scrolling user can see it. Places of traveling, right? So if i one, if we knew the year air HDR image, unlike if I drove, just create with me. It will be easier for you to understand. Create 21. We will remove the water and give the different color for the background data we can identify it occur. I want this to this and this corner to be radius. So like 16 at 6000, little bit more. So 4040. Yeah, there's look nice. We will create some space from right and left. So we can easily create our UI from the left, 20, from the right, 20. Real, we will create these. Okay? We will create our UAV between these two lines, red, there's low. We look amazing. So we learned our header image. Just copy and paste to create again a rectangle. Okay? Okay, so we will change the color for the identified, okay. Okay, the sand it comeback. So right-click and arrange. Send back. Right-click arranged sand bag. I have downloaded some stock images for leg exomic Paris, Greece and all. So I review Greece, duty, iceland, okay. Just drag and drop on the ship. The image will take the shape of the yeah, you can see this will be responsive according to share. Okay. So this is our Status Bar is not visible. This is dark, so we will give it to two white color. So user can see, okay, here, I think user profile, photo, username, greetings and such. What in this area we, when we create this much okay. Little bit round ship. Okay. Demoed, awarded and background blur. This give this blurring effect, right? First increase the brightness and amount. Will do the shadow to shadow. Okay? This will yield some shadowing or blurring effect. We will use the entity's search icon. Give it to the white color. Aligned vertical. Let me give you the profile image. I will just say the search bar and profile picture degrees the opposite of such gaps. So we will work on this one in the next video. 5. UI Designing - Part 2: Friends. So in the previous one, we have created this. So we will create the bottom side of this one. We will create a year categories in this video. So just copy that text. No need to organ recreate the text. Just created black. And write the category. Bold it. Let me just quickly fix this. Now we will create a category Slayton Populars and art and culture festivals. So we created, so we, we create subtext for the ochre 14, not so bold. First medium. So popular. Okay, I have created this categories, so you can send the color red. We will send the color for the categories who are not selected. C6, C6, which are disabled. We will select a see foresee for the new color. Yeah. Ok. This is selected so we will give our theme color blue. Yeah. It's look grid. But with this image over, Tim is not looking better. So according the image will change everything. Yeah, this look grid. So this is our new history in color. You can change your theme anytime. Okay? So for indicator that this category selected, I will just put the round shape. User can easily find that this category selected theses are category, we have great care. Third category. So if TO popular is selected some cards or some places will be shown here. It will create the cards. So simply created at tendrils. Yeah. Okay. So remove the border and 4024 before rounded radius, Corner Radius is 24. I will send the color that you can see it properly. So I haven't just resize this rectangle, okay? So we will drop the image on top of debt is, so I will drop the image of Paris on top of that rectangle, right? So this gives a beautiful image. The user can roughly idea that display this place will let seems like this and all right. Okay, or top radius is 24th and dysphoria. Remove the border, will go. We will give the year darkened shadow, right? So we want fair defect, right? This, this area will be dark and this will lack capacity, will be 0. So linear gradient, we will use linear gradient. So I want this black and this will be blair calls for, but opposite, it will be 0. Here. You can see here. Okay? But I want this talk to don't radius 400, sweetly. So here we have some fair defect. Okay? So we will name here The Paris and the place name and review here. So we will just write here. Oh, okay, we need a white texts because background is black. Ferris assembly, right? The various Because I have no idea what to write here. You can write a as per your requirements and all. I will resize this to switch team. Click this enclave again to rep the area. Okay, for the indicate the place we hold icon colocation controversy because we will use that also in future. White. Yeah, let's look fine. But we need to align that properly. Just collision bit, okay? Vertical. Both are in vertical direction here. First little bit, 2020. This look great, but little by little, bottoms-up. Not too much space here. Okay. Who? Teleco stuff. So they will create radius. Radius for the when to consider. Research time-like 0 to phi estimate, I give 4.4415. Okay. How many people they will this so many people, so 1010. Remember, reveals. We will decrease the size to 12 degrees the opposite year you can download Adobe shooting from here also in year also decreases opacity to 75%, okay, at that school. And generally we will change the font like not a medial view. We want thin, like regular. School. Rapid, rapid. Ok. This is aligned with the parish texts. Oh, there's look cool. We have stars also asked us and also I will simply copy this. By the way, I am using the arrow keys for the positioning that shift plus arrow, you can fastly centered. Okay. Ok. 4.5 here is of please. Oh, okay. Okay. Let's resize it. Colored changes to white. Not oh, no. Tests look great. So we will this change the opacity to cell D5. Okay? Okay, this look good. But we need to group that. Because every time we come to this type of error, you can get there written select their ten recession all subgroup that tetralogy. Yeah. This looks good, very good. Okay. Looks good, right? So we will just copy this and can see control. We will change the image to the Santorini, Greece. Okay. I guess a beginner, I will copy that. Okay. Okay guys, we have created this and we will create two now bottom navigation rate. So select the Rectangle. And Create a bottom navigation. No border, background blur. Background blur is not looking too much cool. So what we will do, my idea was to create a box for the Waterman irrigation but doesn't look cooler. So I will just simply traditional bottom navigation. This is it. This was not my idea. Sorry. So I found this one to 2222. Yeah, tears Luke five. Okay. Shared o minus three. Just look good here. Minus 34. Tests look good. If I change it to white. And now we really how Home icon. And yeah, you can just simply vertical, horizontal, 30-year over icon T. So would it be better or this? Okay, in a Khan will we consider here for the Profile, User Profile. And the fourth, explore more exploiting, more surrender. We will also new. Okay, let's see it in the center of location is also there. So this is our home screen. We're designed these onscreen. And just, I helped created some changes in water irrigation. Just create one indicator to indicate to the user, that is Home Screen grit. And this color to blue again, which end the theme color to blue. Okay. We will create two PSU way next video. So stay tuned. Voted. 6. UI Designing - Part 3: And you come back to this. So in this video, we recreate location newer and explore your search their location. So simply copy and paste. Okay, for the new location of this are the whites. So we can't seated. For the mRNA we will to remainder two white, really Chen in the future. So the syndicate will goes here. Simply. Ok, on group did Fu Chen discovered two, it is CNDs to slug. Great. Okay. We, we are in map. So we have some maps. For the map we need to create a container. We have already known it to create really control C, control Shift and left TRB record, press and send it to beck. That's a shortcut. Drop map on top of debt rate. Okay. This location feature will enable you to what the places to travel nearby you like a Google, right? Google features. Just zoom it for the container that user can see. We have our map is so double-tap to edit the photo. I want to locate x2 here. So I will just read intro. Oh, sorry. Forgot to remove the borders. Control, Control-C, drag-and-drop. Okay. Control V. So we have image and these funnels here. And should not rounded border 0. Ok, this look file. So we will add the techs plus c And we Tana. Nature park and z2. Okay. So you can detail by anything you can loan it. Similar to regular not regular, medium to medium. I drank to center it with dead to flow there. So phi o. So we will send this color to black complex. That's no good, but we need cred, searched Control-C and a lot of work in white or black, or probably working in weight, but not. So we will send that color to this 12. I think I've fervor nor don't forget. Okay. When it to chain these color also and this color also edited what we write. Find travelling, place nearby you. Let's write it. You can write anything that you want. Ok. Legal opposite. Oh, it'll be downs it. This look great. And this is maybe you explore. You. Just pause the video and think about what, what can be there in X4, XOR that traveling place. There will be searched and there will be some results in cards. Thinkable. Just pause the video. I hope you guys think about it. So we re going further. So double-click and to edit, we will find the Explorer. So explore. Traveling less a traveling. Just write. You can write anything. A temporary, I am writing this X4, OK. User Explorer, User relax, flood some places like if you use the right to user rate p, right, first-order page ten, according to PV held reserves like before Paris. And according to the relative rate G then Greece and older. So, right. So guys, I agree, I see these as fluorine anyway. You can see the name and description about the place, right? So I have created this, and if the user is such, P for P tend to perish will be come out to 430 and Chris, okay, the sample at a search result we came out in this year, North. So this is the cards such cars rate, okay. Location explored. And in the next video we will see the like, like user sale the location. Then this will come out in this and profile. We have forgotten the also the user click on this parish ten, new, new UI will be come out, then screen will come up. We are remaining with the three screens, like like user profile and the click event, like the Paris clinic, then new screen will be appear red. So we will see the three screens in the next video. So stay tuned for that. 7. UI Designing - Part 4: Welcome back guys. So we'll create selectivity C And we put in m and rename this one, has a cell location, location, location. Such sale locations. In this ooh. I've been showing you one shortcut. We just deleted. Select this carla New Yorker, and click wonder repent grid. Live under a particular card. Like this. As earlier, we copy paste. Now this grid will change automatically. So we created this list token, just sand bed controllership ten left. So renamed to 10 second Porto spent just drag and drop. The remission on that image. Changed and the change and the change. Ok. Greece. And all. You can change it. Collection is true if the S1 is blue, okay? Okay. Remember this. This will help you a lot. Or even create a button that the user can select, can Sarawak. Until the location. I will simply create one. Circle. Circular butter. Orange here, is in bed or right-click. And bring different order. Let me just recesses. This looks good. All position will be selected because all leg by user. Just copied. Firstly, we need to create a one mosfet where user will unselect this and this item will be removed. So we will create control c and t still really like memory Did Ansel. As per the requirement. We will create another for the profile, user profile that we just created, this blue. And this one is True. Grit. Assembler deliberative script. We normally do. Title is profile. Profile, right? Okay, if user want to logout them, VL logo there, icon or not. So we are able to download the logo, logo type and just simply go to Chrome and material delta. We will simply search for logo here, but I want only downloaded donor. When you complete the project. We had the profile data then sample n, We will arrange logo. But then the user can easily identified as a profile, profile, as user profile picture, User Name, Address. Okay, we can enter the three user travel in the article guilders shared or you can give shadow. But I didn't want to share that because I think you can give that is not only that you follow my UA as per your designing, you can create your own you, I just, I'm good given the information that this type of a URL can be met. Okay, so let me remove this high username is here, so no need to boil detail anymore. Decrease the size of a red would have been. And center. How did understand again, we heard number five, richer profile, name and address. We will learn. Just I don't want to address an address. Has podiatrist, I just write down message in M N container. Decrease the size by four cuts. And tanzer color channels like and unlike. Lighter than black, because user name is dark and location will be all sorted out, then it will create conflict. The user can, can not see bought together two languages. Okay. Let me see. And what is under the center it little bit hoped to Saigon is little bit weaker, less gill to smaller, smaller head. This looks Garrett Hall. Now, we will show user easterly or lack of where the user is, travel and on. So we will create this kind of diagram. For that. You can create any color. Light blue will also be look good. Because of my UAS team is black and blue. That's why I'm telling this one combination of ligand wag. Okay? So here, here the car will be shorter. User is a novelties and this, I will just copy this and paste it here. And he says it. I will simply write issue, right? They say they're 18. To boy. We better. Okay. We do not need stars like username already visited. So we need just dead. He or she visited. So 90 to June. First, I'm taking a random number, going 1019 of it. Just taking random numbers here. So we will change the size, size to 12. Okay, will this will indicate that it just we love letter repeated grid. Okay. We will simply click OK. Click on this. Control shift, left rotate. Okay. Remember the shortcuts image? I have taken just three images for the example was only okay. When you give the URL to the client, you short hell. Fire minimum five images. This is for only your understanding purpose. Use three. Okay. We are creating like an profile. So we, we, we left with the one when the user recreate on the profile of the new activity. Should open. This as auntie Chen, these pictures to Greece. Greece used blurred effect for the year. Degrees of redness because kids look good. I will cooperate there. We will change the location. Just a line with the description here. Like you can description which category this island is. Category's targeting people review. You can drag here people, some comments like these places. And this is good for them all. So your task, your task is to design this portion. This portion. Your task is to design this portion. You your task is to reason this portion. Okay. We'll forward to air that bed button anywhere you want. It is just a bed. So we have these n, this 3367 screens in the US. In the next video, previously the prototype. And after that, we will mockup this in US, wins. First treading water. 8. Prototyping and Mockup: Hi friends. So in this video we will continue with the prototyping rate. Let me just remove this length shorter. Ok. Click on the prototype there. Ok. And now within corporate entities, if the user will click on this curtain, users would open this or this activity, right? And if the user clicks on the bed button, then it should go to the onscreen. Okay. Ungroup this. I'm going to click people, click on location, then go to location. If go to Explore. And then explore page. If they click on the like, ten, go to the leg. If they click on the profile and Gurgaon broker, if they're leap onto unlike, unlike the location or the location dentally CA1 cell location. Okay? So this is prototyping and all pitch rate. So let me just quickly prototype this. This whole page will be linked together. Like if I click on the explore, explore page for the open. If I click this like ten, like page should open language. If profile page and pages open, the profile. Profile page will be open. One moment. This local will be okay, let me just quickly fix this. Ok. So let this one. Okay, our UI looks good. So we will go to the GPS location. Okay, good. We will go on. We're not going to okay. I am not given the low vision API will let fluidly go home. Okay. Okay. Then I want to exploit these fetish. Click on this. Okay, back to the home profile. I want to know what to say. Oh, I want to answer these Ansel tend to be remote. You can change the animations so you can explore it by yourself, transitions and animations here. So this is prototyping and we'll set the mockup. You have mock-ups and A short break. So if you Nortel Photoshop, then you can check the Adobe sites. If you want to. Get free Photoshop, free. So you can start to get into PCM, get data from it, and you download it from it so you can check out the mockup over us. We are created you and we will mock up in our Photoshop break. So here it is us. We will obtain rectangle. Just draw. On the way. Draw the rectangle on the US. Ok. I want to set our UI within this rectangular read. Don't be overflow on, on the control c. Press Control-C for the copy of the rectangle. Select everything in the one you, Eric, not every right-click. And Moscowitz shared Moscowitz ship creates a mask with within the rectangle. On the second day, we will also perform the mass Christian Mosque, which separate how we will export this. You select control, a shortcut control, control. Control. Design. We have shadows, Android, et cetera, JPG, PNG, all foreign material. Change very own to sell the image, I want to serve the imagined through o folder. Select, export, images, exporter, export. This also can probably export. Simple. Here we have done with our, we are done with Allah actually working. Okay? What do we see in actually with the Sino-US, the proper table or you, we export audio. And to finalize all work, reward with photoshop. Created on Photoshop. Really create a new size, 3 thousand by 2 thousand. Okay. So put it in the affordance of red. Focus, select one layer. This is our one year, this is our second year. Now how to present our UI. So we will create a mockup. So right-click on this Convert to Smart Object. We cannot write our U2 Smart Object. So we, we need to call our ship. So right-click. Go. Draw the circle. Daughter Rectangle, press Control T. And now all the old, the shift and depth and read to the end points. Hold Shift. Okay? The descender rectangle, we know need strokes. Ok. We need to corner radius is 40, not 40. Just 60. Looks good. Now, really, to just put it below the hour you erect. Now, press older and click on the line. Where is my cursor here you can see, click here, you can see, okay, concurrency. We need to convert our secondary ulcers and right-click on auto Smart Object W. What is going on? Okay. Remove the real Corner Radius answer. So we will do this shared or drop. The drop shadow. Clearly should give. Ok, Firstly, I operate changer or the ground, the ground gradient. This look good. So we'll send, we will send the color blue. Okay, this is good. So via Django background colors. So we will just resize this control t old. Okay? Now second, second 1, ok. we will arrange in this position. One is stroke and other one is at the bottom. This looks pretty good. Okay. We are done with our mockup. So you will export this export, export as you can export as PNG, cetera accepted you export as PNG. Export. Export. I want to add four to our US export exporter. You can sell this fellow answer on your computer or on my computer and onto CO2 smoke. Ok. You can see we have design or mockup. We have created our UI design, our model. This is UUIDs. And so in the next video you'll see some freebies, 3DS, lake Harberger free illustration in all. So stay tuned for that. 9. Freebies for UI Design: Hey guys. So TCS last video, so this is on Flavius leg, three mock-ups for the UA kids. And also you can see here Professional and is actually grew. So this has lot software resources and UAE gives, I usually take their inspiration from a y2k. From here. This has lots of new neologisms. Trend is here. Neoliberalism is the two shadows like appointees, white children, Water Music, lecture. You can implement all say Turk invented the reference from x liberalism. Second one is freebies. Freebies you are here you can find free illustration rate, fenestration and mockup. 53a cons, three acres, 14 moles. And all. For Taiwanese. You are here. This side is mostly used for more cups. You then download the molecules from here. These amazing mockups. Firstly, this is no sponsor. This work is Greg saw. I assure that this review or the result has for you, is for your choice. D says realism. Good luck. These icons, I've currently use essentially icons. Our fourth hour forties, 3p, non-entertainment bowties. This is a great, great means loss of two. Now, I will such illustration right here. You can, you can see there is a, this, this crown elder paid and free. You can take the advantage of this second one. Lunch second-order is a con federico has icon as icon style like iOS, iOS 14 hours, 13. This has icon. We can customize ora con leche. I want says bigger. I want stroke says VTS increase, or I want gender color. You can write anything and when you click on an icon, it will simply download in S resurrect. Could we can download Orleans infile? Blushed largely is our golden car. Clearly. If you want to design, you are like the cell perfect. He should refer this material components, material guide, deadlines or law here. I'll do these in every UN emission and navigation and all are here. So you should refer this one also. So this, this is your adn course. I hope you like it. Stay creative.