Adobe XD Tutorial | Login/Signup Page | Basic Course of UI/UX Design

[Music] Electronics me is somebody welcoming you to my new UI design you drilling XD so today I'll show you how to make a sign-up page with a gradient color and to the icons and other stuffs so this one is another basic tutorials of eggs to design or Adobe XD so let's get started if you're new in my channel please do subscribe and hit the billikin for the new notifications if I open up XD it will show you this type of window and from there here is some Templers about iPhones and Android mobiles and you have that as an front to give their customized size I didn't wait for the another Mobile's like any kind of mobiles I'm taking here the iPhone X template and you are getting an output like that now for that I'll draw something like the login or other stuffs before that you have to download some icons from flat icons here is icons and if you download the is visa file you have that as a phone to change out the colors and other stuffs and this one has been the Facebook and another one is user so this kind of user so here you must have to download the SVG format just because of the editing purpose so after going here I'll go to the circle taking beak circle like this and turn off the border then giving in that recognizing color like this okay fine and making it bigger like this and now I'll give gradient color from the color palette linear gradient and then I'll make this one a little bit smaller and making it from here pick up color which is the warm color like this you it could be like that and other pole I'll choose different types of color like this so you can take this type of color okay that's good and then again another copy of this circle by pressing alt or option button and send it into last layer and after that you can make the opposite down and you can place it like this so you can select these two things and just like that you can make it zoom and you can make over here the AG corner or AG wolfram there's good and now I'll mask that out so how to do that taking rectangle according to the iPhone X size and like that turn off the border and then select all the particles and shapes that means the rectangle and circles from here go to the object options mask with the shape you are getting the mask like that now user icon another icon I will import go to the file options and go to the import options I already downloaded some is visi icons this one is user I'm inputting that thing's this one is black is a ship and hold it making this smaller like this and from fill color I will make it white like that and the alignment not in a middle from the top to bottom good for this so here you have that assumption if you download the is visi file you have the reception to change the part by part of your icon so this one is the main advantage and if you download the PNG sometimes you can't change the color and hit defend or separate particles okay after that go to the line tool and drawing some lines four or five lines the border color will be white and then just go to this line and press the order often button and drag it one when you are getting some a pink line or pink portion that means this one is totally aligned and same space between three lines so this one is the option and hold it free okay that's it first name last name email ID and password four things will add over here I'm making it a little bit upper side let's get making it zoom I'm going to the text tool and here evening and that is the light font I'll choose and color will be wide like this font size it will that skit and list over here and here first one is kept nice and pace alter option button and just dragging okay there skate and write down last name and after that again order option button and just in this portion you're getting also the pink line the same space between three lines and here email address email address and then and just go to over here so this one is super - okay simply I have done that things and now I'll make a button so go to the rectangle tool making button like this and placing it in a middle making it round turn off the water that's good and write down something like sign up that's good and giving 14 or the font size and the color will be a little bit hashtag that's good and select these two things and making it middle sending it into the downside here the rectangle just you have to make or place it in a down side of the text so here here this one I have to make this one more darker okay that's good I'm giving the drop shadow from here and this portion and you can give the drop shadow if you need select the round drop shadow like this okay it'll give you another feel for that there's kit and now I'll import two icon one is a face book and another one is googled for the file and import options from here to things I will import those are big one I'm giving here only 20 PT test it and this one as well don't forget to lock up over here and then only 20 BT so you are getting same size for that and just taking it here that's good make the alignment this you can make group to things and in the middle and then I'll bring those things into little bit down set and same font size I'll take this one and sign up with I'll add that word and place it in a middle change the color okay there's fine and here some little bit button over there so taking another circle like this and then turn off the boarder leave the fill color on in the linear gradient and this portion I will choose color from here color picker just this color and the downward and pick color from in this portion that's good here was a little bit a plus sign how to make that plus sign this one line like this white border and in a middle after that control C and control V and next line I will make it 90 degree angle that's good and selecting these two things making it group and select the circle made them into middle and they're skipped and now our page is almost ready if you want to make copy selective zone giving the name sign up that's good and place the order often button and drag it and elected now you can change the color how to change color select double click in this mask you can select the circle or the feel options you can change color from here like this curve of color there's it and the second circle you can select from here and color pick from here the color picker like this this pool has will the color picker will be like this dar skit and this one as well making him soon select this one and the portion of the upper side pick the color or you can change more properly so select over here the upper said color will be like this there's fit and again press alt or option button you can make copy that's good TT and same process and change color so it could be pink or red green that's good so easily you can change the color of the signup page you signup one two and three you can make easily Disturb sign on page which is creative and modern type so hope that you learn a lot from this video if you did please thumbs up and share your friend and if you have any kind of question query or eco space to comment on my video comment section and stay safe stayed home don't go outside and keep a senior pair as well until the next video bye emissary sending outputted by [Music] you [Music]

Channel: Asm Arif

Views: 452,049

Rating: 4.8985562 out of 5

Keywords: Adobe XD Tutorial, adobe xd, ui design, ux design, Login/Signup Page, Basic Course of UI/UX Design, adobe xd wireframe tutorial, adobe xd advanced tutorial, adobe xd tutorial 2020, adobe xd templates, adobe xd tutorial, adobe xd tutorial web design, adobe xd tutorial mac, adobe xd tutorial prototype, adobe xd tutorial in hindi, asm arif, arif, login screen, xd app design, adobe xd projects, login screen ui, adobe xd tutorial beginner, xd 2020, login page ui mobile, ui/ux

Id: PVcUFCT0J0Q

Length: 12min 16sec (736 seconds)

Published: Tue Jun 09 2020