Hello again boys and girls. In this video, we're going to continue building on top of our previous design the single party screen, we're going to design a ticket booking part that is going to be presented in a model that slides from the bottom of the screen right after the user clicks the call to action button, get tickets. The purpose of this is beneficial for the user, because he won't lose focus by getting navigated to a different screen. In this model, we will ask the user to enter his or her name, and credit card details in order to make a purchase for tickets. When working with sensitive data, such as credit card details, it is paramount that you don't leave the user in the void, not knowing what is going on with his or her money. That's why you have needs to provide the user with feedback on what's going on.

Okay, let's leave the talking and let's get down to business. First things first Make sure that you have a copy of the previous screen because we're going to delete some stuff. After you've copied the previous screen, delete the title, the infographic in the video sample, but leave the call to action button since we're going to use later on. Just click the eyeball next week to hide it. Next, select the background image and apply an effect to the effect is layer blur. 20 pixels for demo.

The reason why we're blurring the background is to divert the focus of the user to the sliding file. The background will still be there but less prominent. Now, select your Rectangle tool and draw a rectangle that's full width but change its height to 600 pixels. Click this icon next to the corner radius to add independent corner in this rectangle. In the first two input fields, add 15 pixels and leave the rest subzero, the first two input fields refer to the top left and top right corner respectively. adjust this layer so it touches the bottom of the screen.

Now, let's change the color to one b 1540. And let's add another feel to it, which is going to be solid color black by 40% opacity. Lastly, let's change the color model this layer to exclusion and drag the rectangle in the layer stack. Now open up your Type Tool and type in book a ticket. The font size of it is 18 pixels. The font weight is bold and the color is white.

But change the opacity 40% duplicate this by holding ALT and dragging it down. Rename it to Nina Kravitz change font size to 40 pixels and change the opacity of it back to 100%. Now, let's adjust this and move it five pixels down. select them both, and move them over here, adjust them and drop them like 10 pixels. Now, open up a rectangle tool again and click once. Change the width to 95 pixels and the height to 75 pixels.

Change the view to the same hot thing we're using for a call to action buttons. match this to the top right corner of our model. And let's have a corner individual at 15 pixels in the second input field to smooth out only the top right corner. Now let's drag a copy of our label by holding ALT and dragging it on to our pink background. Like both the background and the labels and center. Change the color of this to 0719 to three and change the opacity to 70%.

Bringing this to total. drag a copy of it by holding ALT and dragging it down. change this to 18 euros change the font size to 34 pixels and bring back the opacity to 100%. Center them both. Select everything grouping together call this header Okay, let's make a quick adjustment to this. Select both Nina Kravitz and book a ticket texts and the line down to the edge of the screen.

Now with them 15 pixels to the right. Great. Now we're going to design a number stepper, which is going to provide the user with the option to buy one or several tickets. Select this group and duplicate it by holding ALT and dragging it down. delete everything inside of it, except this label. rename this to how many tickets now move over to our assets panel and select the increase in decrease icons which I've provided.

Move them over to a canvas and align them to the edges of the screen. Move the plus icon 10 pixels to the left. Select the minus icon and adjust this with in the line with this section Now select them both and center them up. Great. Open up your type two and type in one. This will be the initial amount of tickets, change the font size to 50 pixels and the color to white center this and select both the icons and the text and select and align them vertically group them together and move them over in this group to name this group to number stepper.

Okay, now, aligning 30 pixels down from the edge of this rectangle. Okay, when the user taps on the plus and minus q will adjust the amount as the number of tickets changes, the price should change as well to reflect real time changes. This is crucial for the experience of the user. Select the Hummer stepper group and duplicate it by holding Alt and drag it down. Move it 30 pixels down. Select this group with the icon sum the number and delete.

Rename this to username and change the label to your name. Select the rectangle tool and draw a rectangle that's 345 pixels in width and 50 pixels in height. Change the corner radius to two pixels. The color to white and the Opacity to 10%. position this five pixels down from the age of the label. Now open up your type two and type Nothing of our user which is the bias when some Okay, let's change the font to circular STD change the letter spacing to zero percent, the font size is 20 pixels and the color is white.

Now circular STD is a more reasonable form than there was no place 10 pixels to the right from the edge of the rectangle. Okay, this is going to be our input field. Again duplicate this group by holding Alt and drag it down and again move it 30 pips off okay, rename this to cart number and rename the label as well to card Number typing a random 16 digit number that is grouped in four groups by four digits and separated with dashes. Zip, this will symbolize the card number, go to our assets panel and grab the MasterCard logo and drag it into our card number input field. Moving 10 pixels to the left from the edge of the right of the rectangle. Okay, we're adding the logo so the user can get a visual feedback that this is an existing card and everything is okay.

Remember, when working with sensitive data such as this, it's Paramount that you provide the user with feedback. Great. Now let's go over to our assets panel again. And grab the error icon and move it over to our canvas. places in the same spot as the MasterCard logo, but hide it by clicking the eyeball next to it. This icon will appear if a credit card number is invalid.

Furthermore, we will add an error label below the input field that says card number is invalid twice, try again. Let's change the font to 12 pixels and use the same color as the error which is Eb 001 b Let's hide it for now. Okay, let's select the MasterCard logo and place it into our card number group. Let's hide the error icon by clicking the eyeball next to it. Select the card number group and duplicate it again by holding ALT and dragging it down and moving 30 pixels down from the edge of the input field for the card number. Now, this group will be the expiration date for credit card, rename it and change the label as well.

Now we're going to delete the MasterCard logo, the error label and the error icon since we don't need to change this to October 2020 which will Indicate the expiration date for a car. Now, there is no need for this rectangle to be this big, so let's adjust the width of it. Now, select this label and the rectangle and center them up. Great. Now select the expiration date group and copy it again by holding hold and drag it to the right this time and move it 30 pixels to the right. This will be the cards CVC number which is green, which is found on the back of the car.

Now it's a three digit number, but we're going to hide it by putting asterisks instead. select them both with the rectangle and center them up. Okay, let's unhide our call to action button. Let's change this text to check out. Okay, now we have our book ticket screen designed to you in the next video.