Design a Game App Splash Screen in Adobe XD (Part 1)

Hey, Pixels! In this tutorial, I’ll show you how to design a Cute Game App splash screen in Adobe XD.  Already watched Part 1? Watch Part 2.

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:

Right-click > Save Image As…

1. Artboard Setup

First, open the iPhone X artboard in Adobe XD. For the background, we’re going fill it with a pink radial gradient. We’re also going to turn on the layout grid and set the column width to 42.

Since we’re using the iPhone X artboard, we’re going to add iPhone X UI elements to the artboard. You can get these elements by downloading the iOS UI for Adobe XD file via the Apple Design Resources Website.

Applying pink radial gradient to artboard in Adobe XD

2. App Title

Near the top of the screen, we’re going to write the name of the app using a nice cursive font. I’m using a Google Font called “Pacifico”, 38px, Regular. Slightly below the app title, we’re going to design the featured game character image.

3. Character Image

Hit “E” on your keyboard to grab the ellipses tool. Draw a circle that’s 233px and remove its border. We’re going to fill it with a golden gradient. We’ll need to modify the circle into an irregular “bean” shape. To do this, double-click on the object, select the left anchor point and slightly drag towards the object’s center. Grab the bottom anchor handle, slightly extend it out while rotating it clockwise. Then, select the top anchor point and drag it up and slightly towards the right until you get a similar “bean” shape.

Now, we’re going to draw eight borderless circles or “bubbles” of varying sizes on top of the “bean” shape. We’ll fill these circles with pretty pastel colors and then we’ll apply a shadow to them. Lastly, we’re going to add this cute bubble tea character right in the middle.

Right below the character image, we’re going to design the “Get Started” button.

4. “Get Started” Button

Hit “R” to grab the rectangle tool and draw a rectangle that’s 270x50px and round the edges by 20px. Fill it with a light blue color. Now we’re just going to write out “GET STARTED” (all caps). I’m using a Typekit font called Gibson, 24px, SemiBold.

Finally, below the button, we’ll write out our “Sign Up” blurb that says “Don’t have an account? Sign Up.” We’ll only bold “Sign up”. Typekit font Gibson, 16px.

Designing Get Started button in Adobe XD

You’ve completed Part 1 of 2!

You’ve just designed your very own cute game splash screen UI for an iPhone X. Be sure to watch Part 2 of this series to see how to design the login screen and how to turn the app into an interactive prototype.

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.