Login Screen UI Design in Adobe XD | HU Shahir | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
3 Lessons (33m)
    • 1. Introduction

      0:36
    • 2. Requirments Final

      6:29
    • 3. Designing in XD

      25:51

About This Class

cfdca8bc

UI Design is one of the important phases of creating Mobile Application, Web, and other product in these days.More and more new tools are coming out to help designers, design well and easy and Adobe XD(Experience Design) is one those applications that developed by Adobe Inc.

In this class, we are going to use Adobe XD to design a very nice and trendy login screen of a Mobile Application according to pre-designed wireframe which you can download it.In the process of designing you can learn different tips and tricks for designing UI in Adobe XD especially starter peoples.

All of the assets for this class is available for download in the class project area.

Let's get started:)

Transcripts

1. Introduction: Hey, guys. Achieved from Polly in motion and welcome to this shark class in this class and using Adobe 60 our experience design to design a very modern a very trendy logging ey screen like this . So this glasses a beginner level class. If you don't have any experience off using Adobe 60 or if you're new, this glass is a perfect choice for you guys. And you can learn some of the tools of that'll be 60 by creating this kind of project. So you guys in the class? 2. Requirments Final: so before starring our designing process, let's talk about what we need in this particular project. I mean that which phone you were going to use. Which color, pal AIDS, which Softwares and all of these things so softer? You may know that because it's in the title of class. The first thing that we gonna talk about is Arabic. Spring is designed the software itself. Maybe you don't have any experience in adult experience. Design at up 60 in a sharp from, Ah, it'll be expiring is design. Just call it X T because it's the sharp fall. And if you don't have and experience in, that'll be X t. So I have class that I just point out all the things about X'd. It is a good idea to have a look on that class. You can just search my class have experienced Sign you It is Are you are, you know, exciting with Arabic STI. If you don't have any experience, you can fall along with me in this. In this class, I just plan out all the things out of 60. It's not a complex software like photo shop are Toby after? If it it's it's It's very simple. It has a very clear and easy user interviews that you can just Maar straight in a short time. So the 1st 1 is Arabic. So if you don't have an install it at a week at a B x D, you can just down the trial version of that from adobe dot com. It's just a just a trial version for 30 days and just sign up. If you don't have any at will be account, sign up and then download out of weeks Tien and install it on Windows and Mac The'keeper's Prince between X T and escaped. Maybe most of the guys are using s cage. The key different here is that s cages just available on Mac OS 10 path on Micro s Bad X'd is available on both platforms for vendors, user and for Mac users. So it's It has been a long time that most of the venues user just ask escape version for Windows, this cage application for windows, but they don't care about that on. The cool thing is that XY is just similar and even better than S Cage, and it's getting better by update. And it has a strong opted for itself against Adobe, and it's clear that I don't me just release better updates and it's getting better. It's in early stage of development. So so that was the thing that I just want to find out for you guys. And then mixing is our phones. Our phones are very, very important. And you I designed with choosing a type feet using a phone is Sometimes it's getting harder because for me personally, I just have to research about different phones and, uh, just test different phones and then choose. So I just find robot found Robert too far. Rogachev on. I don't know if I just pronounce it correctly, but it's robot allergies. You can see there the name of it, and it's a free phone that it's similar with Vatican Oy on San Francisco phone from Apple. And it's a good idea to use data for user interface because it's readable. It has different other typefaces, like Regular thing Bold and these kind of I think it's something around 12 type fees and something like this. So the next thing is ever caller. I don't want to just pine out there color palettes in this particular project this way. Just use different kinds of Graddy in collars are color type is gradin and if you're using cold and we were mixing different kinds of colors to achieve a good result, I don't want to give you RCP code or exhibited similar code to to just use it. But you can use different, different colors, and I just I want to point out that which color is, ah, match with rich collar and just mixing. So the next thing is our wiring wire frame are very important. Whatever you call it, Wire Frame s Cage prototype batter prototype is a little bit when you're using prototype term off a prototype, it's it means that it's a very high resolution or or it zit just kind of mark up. But if you have prototype, if you have wire free musk each something, something that the help has like him up. What I mean by that is that went out having a wire frame, designing and starring, jumping into a graphics after and just start designing without having a wire frame without without having a map was just getting lost because you don't have anything to follow it's very good idea to just draw your wire frame. It doesn't matter if you use a computer, or if you use a pencil on paper, it doesn't matter. Just create a map for yourself. Think about that. Just do all of your thinking before you. Sorry, resigning to avoid getting lost in the process of designing and just create a wire frame. It doesn't have to be very perfect. Just a rectangle, different kinds of rectangle. And he's shades to have a good to have a rough picture off your idea. So let's have a look to their wire frame they've created for this particular project. Have just create that in balsamic markup you can use any, as I mentioned any types of tools Microsoft mean is also doing this job, and you can use just paper drawing or any things, but you have to, but you must have a wire frame. So for this project, you do need to read about that because I just put this wire frame on the acid for asked folders off this classic and down with that and use that. But in the next project that you got that you're going to create Maybe you have another ideas. Maybe you have different kinds of screens. It's a good idea to have a wire frame. And it's one of the the important process off creating and designing using if he's and use experience. So that was from a requirements. We do need any other fancy things that was that was there and in the next. Listen, we're just starting our designing process. Andi, make sure to have all of these things install on your computer. You guys in the next listen. 3. Designing in XD: So, guys, Now let's Storrow designing. So just I want to point out that we're using, uh, iPhone mock up Ivan Expo Cup that it's just I've just include that in the assets a folder recon down this asset folder. I have just include all the found lings and and this project because we don't want to create that from a scratch. It just ready to use. And it's good for for presenting your design. So make sure to have that and just opened the Arab X t A project off this one and you will have this kind of art on import this PNG mark cap markup on your project and put it somewhere here to have to just have a look and and provide a getting lost on a designing process. So we have our project in here, and what I'm going to do in here is create our our port. So for creating our ports, let's go to toolbar. And in here you see a bunch of screen sizes that you don't have to memorize with and hide off each screen size. We want to design it for the new on best iPhone ladies iPhone model iPhone X or even 10. So just clicking here and you see that the exact same size off iPhone screen is in Hands on . We have just created our our what I'm going to do in here. Just put this are broken here and right click Or just go to here and zoom for all You see that we have these kind of things and at this time we don't want to use this kind of things in here In this mock up on, if I go and here just locked down this and it's now locked and Zuman Now we are in our main are. But so now let's start designing. The first thing that I want to design is thes fancy circles. So for designing that, I just used this ellipse tool and just stop drawing. And keep in mind that by holding shift you would have a pixel perfect circle. So don't forget to do that. Just hold on shift and direct. Now we have that circling here and in here we you see a bunch of parameters here we have fell. We don't need borrows. Just take off this and and Phil, if I double click you see that we have different kinds of most for color solid color are grabbing. So as I mentioned, we're just using Graddy in color. So for grad aliens, just make sure to changes a pints position and why I'm going to do in here. It just use different kinds of colors, like read and in here you can just take it's a sample of it and for the next one, just go with the wish or something like orange and not sure. Or maybe let's have a dark color. So it is cool. And let's just have this here. So now we have our first circle, just, uh, and rename it Red Circle or merely Circle One, and by slicking that on, uh, heading control G. You could just create group for that and rain this circles. It's very good to organize your folders, your elements into groups, So just put this one and make a little bit smaller and just hold on all to duplicate that our control de for duplicating bottom. We want to just double click into group, and by holding out and drag, you would just duplicate that and just make another copy of that because We need a three time three copies, and this one just changed the color of a to bluish color. Something like that, and just skillet down a little bit and right click arrange send it to back and just changes skill of it. Shyla Vidin here and change this collar to use something like a yellowish color. So it's looked like that. It's not bad. Let's me just change our pints in here. Very nice. So we have our circles. They're very easy to create, and I just skillet at a little bit on May be Justin here, maybe just chained Richman of To bring to front and bring to front. Yeah, now the school. So we have our circles in here, and it is a kind of style EMS. We doing have any targets of using that, but just kind of giving an benefit IQ kinds of fuel if we have this kind of elements. So in here we have logos for logo. I just just just type of simple text in here because we don't have any particle logo now and put it in hand. So now let's just I want to put this in the circle so it's our group. And now let's just start our main elements that these plates and thes input areas. So I want to design our rectangle here of the first and just choose this tool and Iraq a tingling ham. Very nice on what I'm going to do. And he had just We need this kind of flit ages, uh, shape. So for this, as you can see, we can control different, uh, pints in here. All of all of them are acting simultaneously and you're linked each other. So how can we break these links? And here we have a tool that you can just change different corners of your, uh, shape. If I just like that and make it a little bit like this and you you have to just find yeah, yeah, as you can see, if I just drag If we don't want to see that we don't want to know. It's not it they want. Yeah, this one, just this kind of shape. As you can see, these areas are, ah, straight. And these your these users are fleets and smooth out. So for this just put in here and we need a little bit Ira strokes at the first, a take off the bar. We don't need to see the bar on. So a little bit gray age color and let's had a shadow through this and change of position of the shadow here and just Blatter that like this like too much blood. Also, you can controlled positive shadowing here and like this. Very, very nice. So the other thing that I want to do in here is just created Group and call this main Helen's and let's create it stripping here if I zoom in and create a very nice stripping here, gave it relativity stylish like take off the border and choose discolor. Maybe very nice. And put this to the main element and create a new fixing here. Call longing and change your form to Roboto Font. And now change the typeface to something like medium ever nice. And put it in this area, as you can see, an hour, a wire frame. Very nice. Now let's create the input area into passport. And, uh, let's me just use rectangle in AM on for Rick tingles. We don't want to use this kind of tingles. We want to have a just have, ah, straight lines in here so we can copy this one all by holding Alton. Put it in here and just make it chewed thin. And by controlling it, breaking their lock in hand, just controlled position of it and change color of it to something like that. Very nice and duplicate that for passwords. And now let's create text. And it's called in mill address and change the typeface to to regular and also change size of it. A little bed and change color of it like a over fixed like this. And because here is the area area that we that we use our icons so out, So Ault and just put in here college passwords very nice. And what I'm going to just create different kinds of groups separated. Put them in separate groups by using shift critiqued group E mail and for passwords, create another group password. So, as you can see, which has created this kind of design. And now let's start designing the lock in Baton and he, as you can see where the chevrons left Chevron here, create, uh, lapse circle by holding shift, have a mix of perfect ah circling him I think it's very big and took off the bar. We don't need borrow and Phil Apps gratings and now use cholera in here. Well, that's used this kind of color. It's very nice. You can find this example off these colors in a lots of fewer designs, analogies and school to have multiple color. And here So that is our circle and just put it in the center. And now let's create a river and we can use we can create Ah, any kind of icons by pain tool, but and now watch where you're using. Now watch this. We using ah ah, linear icon icon fonts that you don't need to design our icon. So by typing something like this, Chevron left and changed the fun of it. Two linear I can free. You see that we have If I change the color of it Or just put this Yeah, we have this kind of icon and we can simply call a type chevron, right? And you can see just we have this kind of icon and we do need to create a recreate that, and it's the cool thing about ikat far Michael fonts. So just put this in here, so that's a bit bigger. So we have to just small down and put it in here very nice and put these twos in. One group called this log in Baton. So the other thing is to just create a glowing effect, and this glowing effect helps helps his design to stand out. So how can we create this type of efforts? And Adam Exeter's not an ethic that is specifically specifically create. Golos, like Photo shop are after fake, but you can use. But you can, ah use some tricks like blaring out to have this kind of gloat. And hey, I want to do that just simply by holding Ault that look at this and go to Le Guin Batten and the lead this icon and now watch. This year we have Bagram Blur. Pick on this and change this bag Rambler to object Blur. Now you see that we have. We have just blurted out we want to just lower it, lower down the opacity and put this and the neat off this main chevron here hands. If I zoom out, you see that. Just make make it a little better. Good, it's It's kind of glowing fix, and it's draw draws attention, and it's very cool lighting. Nowadays, most of the people are using that confined this kind of things and very cool. I personally like this kind of 56 in your eye and now it is over Baton. And we need Creed account in here. Well, just draw a rectangle and make it like this. Phyllida let it and take off the power Go to fill She's crowding And now she's different colors And hey, I want to use something like yellowish in like this Let me find good much. Yeah, this one is good. And put this into one group called this Crete account. And by choosing ticks, tool, call type, create an account. Listen here, change fun of it to Roberto and maybe light. Yes, school and just skillet town. Put it in the center school. And now let's create this glowing effect for this as well. Just duplicate. Sorry. You have to just defecate this one. Go to Bagram Blur changes to object. Blur. Um make it like this. He was killing Donald into bed, and then each of this were tingle. Yes. Now school. You see that just glowing and sick thing in here. It's that in peace line circle it's a bid inside out with thinks that's greater space and also maybe height of it too to find five are one is better. Yes, just she was this and one. Yeah, now it's cool. Let's greet icons in here some accounts, icon and password for this We're just using a linear. I confound like fun. Just create a new text in here and type user changed if onto linear Let me linear I can't free font and change the calorie See that we have Teoh this icon font user icon Put this in here and it's safer. Lots of time. When you use I call fonts and duplicate that and call this luck. You see that? And he has you can see in here We have a Fargo for God password that I want. You just create the Rick tingling here, send it out like this. No barter Phil Graddy int like this school Very nice. And create that glowing Ficke for this as well. Object Blur, proceed Tell school and but in here text type for God password and changed her typeface to Roberto You regular was good Skillet Town. It's in here not to very, very nice and just puts all of them all of these elements into just one group control chief . And now, But it's a bus like this. So guys has you can see. Now we have created and one thing in here that I want to do choose TheStreet and a little bit for and also this one. Yeah, Nice. You mean this one Israel. So that is our overall design. You see, you can just put it anything in here as a logo and is cool. Let's me. I'm sorry. I have to just put this one as well. It's a bid. Yeah. Now it's finished. And as you can see, we've discreet a very modern Ah, you. I designed long and slam it, Justin trend. It's not old. And now you can just delete this wire frame and, uh, how to put that in the small cap? It's it's easy. Just group them all control G type. Call it main group. And as you can see in here, we have some cat out in this kind of things, that but we want to just mosque it out from asking creature a tingle around all area of to just just overall off over area of this are part and by only shift slick both of them and right click mosque with shape. Now you see that you can see this remaining part of the shapes and at school. So now just drag this mosque group or you can just and the size does. Size doesn't matter if you just scale it up or down, because it just for showing gap for showing and presenting your mock up and doesn't have to be very tied or something, like just presenting your design. And the cool thing in here is that you can create prototype in Arab experience and Arabic city. If you have different kinds of screen and you have you want to create an interactive prototype, you can just go to prototype, and you can create proto between each other, each of them. For example, if I want to create a link and simply drag, it's in here on Just changed a transition changed the animation interplay, shin key frame, interplay, shin easies and easy out and duration. If I play this, for example, you see that if I click, It's go. It just drives me to other screens if I have. If I had different kinds of screening could just create a connection between each each of them and create the link, and it's very cool. So guys, that was from it. So I hope you enjoyed from this class from this chart class. And if you enjoy, please don't forget to put your reviews. And if you have any suggestions or any problems, please feel free to reach me out on bond. Don't forget to check out other policy and motion class on a scale share. Mining is a shave and see you guys makes time.