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