Welcome back guys. In this video, we're gonna learn how to design a login screen for a project. Now, a login screen is not a crucial part for an application. But in our case, it is. Since our app is about buying tickets, we're gonna need some user information. Studying or user persona, we see that our user likes to use social media a lot.
So instead of designing the logon screen to require username and password, when we typing the password, we're going to use social login. Social login is an easier way for people to log into an application since their information is already provided to social media channel. Let's design a login screen right now. First, let's select a logo and with a bit up top. Now we're going to create the buttons for our social media login. Select the rectangle tool, click once and type in 345 pixels for the width and 60 pixels for the height.
Change the color radius four pixels and center this up. Let's change the color to 3d five nine mining, which is the hex color for Facebook. And let's add an effect to it. A drop shadow with 10 pixels blurred. Five pixels for the y value, and 20% opacity. Great.
Now select the type tool and type in come to you with Facebook and place this over the basis of our button. Change its weight to bold and size to 24 pixels. Now, since Dallas mine is a condensed font, let's change the letter spacing to 4%. Let's change the fill to white. center this up and let's move over to our assets panel. Let's select this Facebook icon I provided and drag it over to our camp.
Select the Facebook icon and the basis of our bottom a center them up, group them together to form the Facebook button. Great. Now, let's duplicate this button by selecting it, holding Alt on your keyboard and dragging it down. Let's change this to continue with Gmail. Let's center the mob with the other word. Now let's swap the Facebook icon with the Gmail icon I've provided in the assets panel, select the Gmail icon and drag it over to accounts.
Select the basis of the bottom and center them up. Now, finally, we need to change the color to this basis and change it change it to see 71610 Great, now we have our login screen