Before users can play your game they often have to go through a range of different screens -- maybe a splash screen, loading screen(s), a title screen and maybe even instructions or a tutorial. I’ll be listing helpful tips that may improve the look and feel of these scenes to better fit your game, and most importantly, improve the user experience.
A splash screen offers a great place to showcase your studio logo, the publisher of the game, and what engine or tools were used during developments. Trying to keep the splash sequence short is important. Make sure that slides can be skipped, and whenever possible, combine multiple logos and text on a single slide.
Being able to skip the splash screen(s) is especially important when developing games that will be played in short sessions, like hyper-casual mobile games. Players want to get to the gameplay as fast as possible and a splash screen only hinders that.
It might be worth looking into combining the splash screen with a loading screen if you’re creating a lightweight game that doesn’t require long loading screens. When you decide to pre-load data during the splash screens, it’s best to add a loading indicator so the player is aware why they can’t be skipped or why it takes slightly longer than usual.
If you are creating a game that requires pre-loading data, you will have to create dedicated loading screens. And, these screens don’t have to be dull, black screens. They can actually be a great place to display lore or give helpful hints to the player. Depending on the type of game, there are a wide variety of things you can display, like previews of unlockable characters or teasers for levels later in the game.
When loading data it’s important to communicate to the player that the game is working on data, show an indicator on the screen to display what is happening. If possible, a loading bar or percentage display is even better.
If there are really long loading screens in your game, it might be worth considering interactive elements or a mini-game. Granted, this is only required when loading takes longer than a minute.
The title screen is the perfect place to set the mood of your game. You can enhance the atmosphere by styling the logo of your game and adding audio and background scenery. There are also things that you can’t go without, like a menu.
It’s important to make sure the player knows which menu item is currently selected and changing the color of the text often isn’t enough. Imagine there are just two menu items that users can choose from. Can you tell which is selected in the example (below) on the left?
To make it clearer to the user, you can add an underline, border, or even arrows that fit the style of your game. You can also ask someone else to navigate through your menu if you’re still not sure if it’s clear enough.
Adding life to your title screen is done by adding background elements. Scenes from the game world, the protagonist or action scenes are great elements which can really set the mood.
It’s important to keep a clear distinction between the background and foreground, however. Menu items, messages, and other text should stay easy to read (also consider accessibilty, like people color blindness). Adding a depth blur or overlay to the screen can help make the background look less busy.
Going into detail on what makes a good game logo is a little out of scope for this guide, but there are a few basic principles to make sure your logo is good.
It’s important to make sure your logo is easy to read. Your logo will not only be displayed on your title screen, but might also appear outside of the game, for example in an icon or thumbnail in a digital store. Choose an easy-to-read font or lettering, and make sure there’s enough space between letters.
Keep a simple color palette (and optionally texture) that fits the style of your game. You can also consider adding an icon or element from your game.
Depending on the amount of settings your game will offer to players, you can either place them all on a single screen, or create tabs with multiple screens.
While this isn’t entirely UI related, you might want to consider accessibilty when creating the settings for your game. Subtitles, customizable controls, and using shapes instead of colors and volume controls are a great start for making your game more accessible.
It’s important to remember that a lot of players will not be native English speakers, so it’s important to make sure even they can understand the instructions and menu of your game. If you’re not going to have language selection, it might be a good idea to use easy-to-understand words, and icons/animations when possible.
Some things are easier to explain using words, so don’t go over the top with the icons and animations. The best way to explain your game is an in-game tutorial, however this might cost more development time.
People pause games to take a phone call, go have dinner, or take short breaks. That’s why it’s important to not just pause the game, but to silence all the audio that’s currently playing.
During pausing, it might be a good idea to either blur the screen, or make the background darker to display that the game is paused. Even better would be to display a menu with quick access to the settings, or to save the game.
You don’t have to be an expert designer to make sure your interface looks nice, and is easy to use. A few tricks here and there, and you’ll quickly improve your overall interface. Study how popular titles create their menus and don’t be afraid to simplify things.
Kenney Vleugels is an artist from the Netherlands who shares game assets (sprites, models, audio, fonts and more) with game developers. Recently, he founded Pixeland which is a physical community hub where every game developer in the world is welcome to learn, teach, meet, work, and play.