Press "Enter" to skip to content

Login Screen UI Design with Adobe XD

Login Screen UI Design with Adobe XD

pLogin Screen UI Design with Adobe XDp phello guys and welcome to my new article in this article were going to design two screens and in some of my next articles were going to prototype or animate this current design so stay tuned I have already chose the colors with this design and the colors are already ready in my color palette so first were going to create one simple rectangle and were going to set the radius to 42 all right so now the second thing we need to do we are going to create a new shape with this image in the background so lets move it the right way alright lets set opacity 100 and select those two items and click mask with shape and we will get great background derived from our background image so I will now set this element on top of our mask group and I will name it a gradient so this will be a gradient overlay for our application screen so we are going to use a linear green gradient with yellow and orange color so lets move this a little bit like that and below as well alright set opacity to 90 okay now now that we have our background created we will start with the text so lets say our app is called meet up and well say font size 242 font to SF Pro display bold okay so were going to Center this text on the screen and below that were going to add one line white color as well five size okay just below our text here okay now at the second text will be join our community of ten plus millions people all around the world or something like that okay this text will be with a different font so were going to use font open sans with a decreased font size lets say 17 or 16 okay open sans I will say light okay center vertical okay and for now it will stay just below this this white line so the next thing were going to create a button so create a rectangle here with will be 234 and height will be 34 or sorry 64 okay so use the radius and yellow color like we so Im going to change the top left radius for this button so it will take a new look a modern look so lets add a shadow as well okay and now we need to set the text for this button which will be login of course so this is our first screen this is a welcome screen lets say and were going to create a second screen as well which will be a login screen with two fields for input okay and as I said on the beginning of this article Im going to create another article tutorial for animating this design it will be amazing prototype or animation so stay tuned and follow my channel ok so I have created this text here with 20 side and lets mirror this button and lets close this field color just at the border with size of two maybe okay and this second button will be called register so a user can register here as well lets change this text color to yellow okay so I will group this text in this rectangle into one button and Ill do the same for a login button as well its important to group elements and rename those elements to proper name because were going to need that in our prototype when we are animating our design so well name it the register button button and the login button will say login BTN okay now we need to move those two elements a little bit down okay somewhere bottom our margin should be around 50 and top margin from our login button to our subtext should be 50 VP as well okay it sure looks something like that okay now that we have our welcome screen ready we are going to create another screen and for for our login so user can type username password okay just drag here and copy this this screen and were going to delete delete some elements from here and instead we are going to write another text here which will say login to your account okay just lets increase the font size and add a regular font to this text the font is open sense as well so lets remove this register button because we are not going to need it instead we are going to set the back arrow on lab on top left corner here but were going to do that later alright now lets create two fields which will be with lets say 282 and height 54 so set the radius to all the angles Center this element vertically you can add shadow its optional and lets copy another another field which will be for password so okay just a shadow and now that we have that okay lets close there close those two elements together a little bit and lets move this login to your account text right there okay it looks fine so next thing well know were going to create the Remember Me option as well were going to decrease the font size to 16 maybe okay and create a simple rectangle with the radius supplied with should be maybe 56 and height maybe 30 I dont know well check it out so remove this this border and just add green fill color ok lets create a circle here which will represent that remember my option is active currently active the user has option to activate or deactivate this option of course lets group those two elements and say remember me so it will be easier for us to create animation in the next article okay and now were going to create forgot password text right below this login button here just lets Center vertically here and change the font size to 14 its better okay now lets set some text here to make this design alive and I will add just a random email address here dont worry about it Ill change the color from white to to black so we can see it clearly okay maybe we can increase the font size and font style as well from light to regular okay font size could be 16 all right it was good and now for password we will just create a few circles which will represent hidden password of course okay now its copy this Circle now select two of them and copy now select four of them and copy again and lets copy one more time those four circles and we have our passwords so lets select all those circles and group them in in one container which will be named password for example it will be easier for us to navigate those elements afterwards so okay left margin should be thirty and were going to move those elements a little bit lets adjust the space between them so it will be great user experience okay lets move those two on the right a little bit lets group all those elements now and move them on the bottom like this maybe okay and the last thing we need to do is create a back arrow so users have an option to go back to our welcome screen and maybe click a register button instead of login so Im just going to use a pen tool here nothing special okay I will change the color and of those of those lines and Ill set size to 3 but I think it will be good enough if I set the size to 1 or 2 2 so lets group those those two elements here so it will be easier for us to drag it drag it I think we should decrease the size a little bit maybe okay just on the left side it will be a little bit sorry its its pretty small so I cannot move it that easily but dont worry Im gonna man manage it how much somehow ok for now it will stay this way and there we go we have a successfully created or design the two screens for our animation in the next article so in the next article were going to animate the first screen and a second and but only if I have enough time if I dont then I will split that part with animation to two articles so we can create an animation for one screen in one article and the animation for the second screen in the second article so thanks for watching guys please like this article if you find it helpful and of course subscribe to my channel if you want to see more of those articles like this thank you for watching again and see the next articlep

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *