Hey, Pixels! In this video, I’ll show you how to design a Cute Game App login screen in Adobe XD. Watch part 1 before starting this tutorial.
Gold Members can download the final project file below:
What You’ll Need To Design Your App UI
You will need the following resource in order to complete this tutorial:
First, select the entire artboard we designed in Part one. Press
Cmd ⌘ (Mac) or Ctrl (PC) + D to duplicate the artboard. We’re going to delete the app’s title, bubble tea character and a few of the circles or “bubbles” until we have one large bubble, three medium sized bubbles, and one small bubble. Arrange the button around the top of the artboard.
Cmd ⌘ (Mac) or Ctrl (PC) + G to group the bubbles and then press number 5 on your keyboard to lower their opacity to 50%. To add a friendly welcome message to this login screen UI, hit “T” on your keyboard to grab the text tool and draw a text box that’s flush with the layout grid. We’re going to write the “Welcome Back! Sign in to resume playing”.
I’m using is a Google Font called PT Sans, size 24px. Make sure the text “Welcome Back!” is bold and the rest of the text is regular.
The last step for this login screen UI is to design the username and password fields.
On your keyboard, press “L” to grab the line tool and draw two white lines that are 2px thick. Space them out so that we can add text above each line.
Hit “T” on your keyboard to grab the text tool and write “Username” above the first line and “Password” above the second line. We want to signal to users that by default, the “Username” field is active and the “Password” field is not, so we’re going to select the password field and hit number 5 on our keyboard to lower its opacity to 50%. Lastly, update the button text so that it reads “Login”.
That how you design the login screen for this cute game app UI. The last thing we need to do is turn our app into an interactive prototype.
To give our app some life, we’re going to go into Prototype mode in XD. Select the “Get Started” button on the first artboard and drag the connecting arrow to the second artboard. We’ll change the transition to “Push left” and set its duration to 0.2s. Now, click the Desktop preview button to see the prototype in action!
You’ve completed the series!
Give this video a thumbs up if you enjoyed this tutorial and be sure to subscribe to XO PIXEL for more design, code and tech videos! I’ll see you soon in the next video.