Design a Game App Login Screen in Adobe XD (Part 2)

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.

Design a Cute Game App UI in Adobe XD via xopixel.com

Gold Membership

Gold Members can download the final project file below:

 
Members-only access. To view content, become an XO PIXEL Gold Member!
 

What You’ll Need To Design Your App UI

You will need the following resource in order to complete this tutorial:

Artboard Setup

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.

Duplicate Artboard

Welcome Message

Press 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.

Writing a welcome message near the top of the game app in Adobe XD

Login Area

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.

Designing the login area for a game app UI in Adobe XD

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!

Creating an interactive splash screen in Adobe XD

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.

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.