How to design a UI button for Video Games

Who hasn’t thought about designing for video games? Well, even if you can sketch like Da Vinci or know the Creative Cloud in and out, there’s still a lot to learn about creating engaging assets that belong in a game you would buy off the shelf. While many designers would jump into the deep end and start designing HUDs or menus, one of the best methods to begin your journey into the world of game design is to test yourself by creating a UI button.   

At Sprung Studios, we’ve been creating UX/UI solutions for the games industry for over 15 years. So for the ambitious designers out there, we have compiled a small guide of the best practices used by our design professionals on how to create an industry-level UI button. Whether you’re an aspiring designer looking to dip your toe into video games or a professional curious about venturing into the UI field, this guide is for you. 

Creating a button for video games may sound simple, but once you sit down to begin the process, it’s easy to become overwhelmed. One of the key things to remember throughout this exercise is who and what you’re designing this interface for. An ideal in-game button fits the intended game’s theme while also keeping its expected purpose clear to the player. 

The following ‘Restart’ button was created by a new starter at Sprung Studios. It’s designed to be a button in a Sci-fi-themed video game, with the designer drawing inspiration from post-apocalyptic and robotic styles. Like many new recruits at Sprung, the designer had a strong UX background but hadn’t yet had the most video game UI experience. He approached the UI element using a Sprung Studios method while being guided by one of our senior designers, which resulted in the concept below.

 

This guide assumes that you have knowledge of layer effects and gradient effects within photoshop or any other graphics package.

 

STEP 1: MOODBOARD AND STYLE SELECTION

Before creating or designing anything, it is best to do your research. Understand the style of game you’re building for and its intended purpose to ensure a successful design. Determine your setting, as this gives you a genre to explore and allows you to be sure you’re drawing inspiration from the correct sources. 

Establish a moodboard of the ideal styles you would like to evoke. The references you include in this moodboard don’t necessarily need to be game-related. We often use film, fine art, product design and architectural references to broaden our visual thinking. It’s important that you consider each image as you include them though, it’s easy to go on a tangent when doing this kind of visual research, so keep in mind the key themes you are trying to explore. 

One thing to avoid at this stage is gravitating too much toward the generic style of a specific genre. For example, in the sci-fi genre, UI elements often feature cut-out corners and a light blue colour palette. As part of your exploration, it’s crucial to identify the popular characteristics of a style but also to determine what can be added to avoid it looking to cliche.

 

Create and review a moodboard while deciding what elements to focus on. Make sure to cover aspects like colour, texture, shape and typography before moving onto the next step.

 

Button Mood board

 

STEP 2: CREATE YOUR DESIGN 

Here is where your UI button will start to take form as you explore all the selected elements and create your unique style. Start to sketch out or wireframe some ideas based on the desired features of the moodboard. You should spend enough time here that you have explored a range of ideas and can identify the ones that seem the most appropriate or that you are most excited about.

Keep the inspiration from the moodboard in mind throughout the process, it’s there to guide you and keep you focused. If you find that you are running dry on concepts, it might be time to go back to Step 1 and flesh out your ideas.

 

Implementing Ideas From Moodboard 1

Implementing Ideas From Moodboard 2

 

Don’t be afraid to grab a feature from your inspirations directly and implement it into your design. Remember that it’s ok to base your designs on your inspirations, and let them develop naturally into something new and unique. Feel free to explore multiple ideas early on and change your vision if you feel the approach you’ve decided on isn’t working. It’s better to discover issues with an idea early so you can pivot and turn what wasn’t working into something that is.

At this stage, you should also consider how the colour, contrast, and legibility of your design lends itself to the button’s overall accessibility. Accessibility within games is hugely important. When working with a real client, incorporating ways to increase overall accessibility is often a priority.

This UI button is a 2D asset but it is created to look like it’s 3 dimensional. This requires a strong understanding of lighting, as a designer you need to consider how it would fall on this button in a real environment. What shadows would the bolts cast and how reflective would the surface be? These are all questions that you should be asking yourself as you develop the button.

 

UI Button Outline

UI Button With Starting Elements

 

Another aspect that you should be keeping in mind at this stage is the design’s technical requirements. The button may have several different states, for example, pressed, hovered, disabled, selected. Remember to take this into account when you are crafting your design and include mockups of these different states to show how the button behaves when it is interacted with.

Localization can be very important, text strings in different languages can vary dramatically in length and for this reason, text size and margins need to be considered. Ensure your design is adaptable and think about the technical limitations ahead of time as it can cause a lot of unnecessary effort later if you need to go back. 

 

In this step, focus on creating several developed designs to show the desired outcome of your moodboard exploration.

 

3. IMPLEMENT FEEDBACK

Now a layout is established, it’s time to reach out to experienced designers for feedback. This feedback will ideally lead you to find small additions and highlights to incorporate into your design. More than anything, the input will allow you to know if you’re on track or what you could change to be more in line with your desired theme. 

In the example below, the designer received feedback about the bolts and vents used in the design

 

Feedback areas UI Button

UI Button After Incorporating Feedback

 

Making the bolts brighter, turning the surrounding outline from white to light blue and elevating the vents with a white highlight all came from one of Sprung’s senior designers. A green hex pattern was also introduced to the button’s background, an addition that complemented the sci-fi style perfectly. These inclusions can be the difference between a button that feels uninspired and out of place and one that is grounded and immersed in the game world.  

 

Search for feedback from peers as it adds increased depth and cohesion to your design that could have otherwise been missed.

 

4. POLISH FINAL DESIGN

Now you are nearly done, the last step is to polish what you currently have, taking the feedback you received previously and building upon it. More feedback can be requested, but you should primarily focus on tightening up your current design. Be sure not to fall into the loop of over-designing your UI button by continually adding to it and never thinking it’s finished. 

To combat this, make sure you have set a visual target prior that you aim to hit and stop once you get there. Alternatively, get further feedback from a fellow designer, specifically around the completion of your design.

Add a background or surrounding that matches your button’s style, as it allows viewers to see how your design will look when implemented into its intended environment. The addition of a backdrop, along with the incorporation of features like the green glow added in the design below, guarantees your button looks natural and complete. 

 

Polish your design and add final touches that fully showcase your creation in its ideal surrounding.

 

Final UI Button

 

Now that you’ve completed your button, are you officially a UI designer for video games? Unfortunately not yet, but you are on the right track, and this experience should give you a taste of what it’s like creating for the medium. There is always more to learn and room for improvement. While this design wouldn’t be a deliverable we’d provide to a client just yet; this described process can be used as a springboard into further exercises for UI video game design. 

Your final button design is an excellent addition to any budding designer’s portfolio, but if you really want to stand out, check out our separate post on ‘How to get a UX/UI Design Job in the Games Industry.

For further insights into UX/UI design for the video game industry, be sure to look at our news page and sign up for our newsletter.