How to design professional looking mobile game buttons

Favourite 32 favourites
Tutorial written by ValerienOriginally published on 28th, February 2015 - 1 revision

Today, we’re going to see how we can design professional looking, cartoony mobile game buttons. This is a 2 part tutorial. This part focuses on the design side and efficient sketching techniques. The next one will focus on vector and Photoshop drawing techniques you can use to polish your buttons to a professional level.

Mobile game UIs tend to follow strict conventions which make it easy for players to jump from a game to another. Although it isn’t right for all games, using a standardized approach to creating your mobile UI ensures a solid user experience for your future players. It is a risk free approach that many developers take. Yet, we still have to create appealing buttons, menus and other bars to please the player. Let us see how we can make good looking buttons.

What makes a good button?

First of all, we’re going to analyze what the characteristics of a good mobile game button are.

1- Position in space

Good buttons have one key aspect in common: their position in space, the distance or depth at which they are put, relative to us. The button should feel like it’s on a different plane or world than the gameplay. A bit as if it was placed directly against the screen, where you can touch it! Thus, it has to look sharp and in focus.

Reference Angry Birds Rio
Here, the buttons appear to be against the screen, above the background.

2- Volume

Then, good buttons tend to convey a sense of volume. They feel like they can be pushed! Our fingers are drawn to things they can press against. A big spherical button is a bit like a bug: it triggers our intuition, our instinct. It tells us, in a split second, that we can squash it!

Reference cut the rope 2
Beautiful bevel and sense of volume!

3- Simple Icon

The icon’s visual language should be simple. The icon’s meaning has to be clear in a split second. This is also why we reuse the same icons in every game: even a rookie player knows what the play, forward and previous or rewind logos mean, as they’re present on all sorts of audio devices and apps.

Reference Mobile Game UI
A set of standard icons – great reference!

4- Basic principles of design

Last but not least, the button has to follow the basic principles of design. It should focus on one color, most of the time. Both the icon and the button’s base should have a strong value contrast. If you want to learn more about the principles of design, you can take a look at CTRLpaint’s free videos on that topic.

Approach buttons and UI elements of your games just like a product designer would approach his work! Think about the reason why your buttons should be made of a certain material, or painted in a certain color… should they be rounded or sharp, and why? Thinking carefully about the type of button you’re going to design will help you to find the right visual idea much, much faster when you start drawing it.

CtrlPaint Principles of Design
Matt Khor’s tutorials are exceptional!

How to find good looking icons

Many sets of beautiful vector icons are available for free, online. If you want to create your UI fast, you can download a standard set of icons to later edit it. Here are 3 websites you can go to in order to find good, free vector icons:

1- VectorIcons

On VectorIcons, you can find all sorts of graphic design oriented, free vector icon sets in EPS format. They’re all arranged into thematic sets, which is very practical when you’re searching for something specific.

VectorIcons

2- Flaticon.com

FlatIcon is a huge database of free vector icons. You can download them in both vector and raster formats. Although this website’s content is exceptional, a fair part of the icons are released under CC3.0 (Creative Commons Attribution terms), which can be a problem for some of us. Despite that, FlatIcon is definitely worth checking out!

FlatIcon

3- FlatIcons.net

FlatIcons is a tool to generate flat icons and buttons. It is basically a library of vector-based icons that you can download as PNG files. Pretty handy!

FlatIcons

How to create your own icons

Maybe you want to come up with your own icons. Maybe you want to give them a particular style you can’t find online, or maybe you want to train your icon design skills. Drawing basic icons isn’t too hard to start with. In order to create a proper looking icon, you simply need to:

1- Pick good references: for one, most players know the meaning of some common icons by heart (the play, pause, forward icons for example). Designers have already come up with numerous variations on those icons.

2- Make a lot of sketches: graphic designers know that most of their work is iterative. You will not come up with the perfect icon idea at the first trial! Draw multiple versions for each of the icons you need!

Reference checkmark sketches
My icon sketching process – from simple and rough to better defined shapes

3- Pick the most efficient sketches and draw clean versions of them. Beyond the sketching phase, I strongly recommend drawing icons only with vector tools: it’s better to have the flexibility to edit them whenever you need to, as well as the possibility to scale and fine tune their shape
Reference Vector Icons
A personal set of vector icons, vectorized in Photoshop.

Creating a mobile game button base

Now that we know where we can find or how we can come up with icons, let’s see how we can design a good button base.

We can start with basic, geometric shapes. The most common ones are circles, squares, rectangles, and hexagons. Be it with or without rounded corners. You can slap down a few imprecise shapes on your canvas and start building your buttons from that. As with the icons, I highly recommend approaching your first button base as sketches, which you’ll redraw cleanly later!

Button Base Shapes
The most common mobile game button base shapes

As I work in Photoshop, I design my UI elements using raster layers and tools. Eventually, when I come up with a solid idea, I’ll redraw my buttons with vector tools and flexible layer effects. But at first, I want to churn out ideas as fast as possible! And using raster tools is by far the fastest way to do so (at least in Photoshop)!

You can see that the button base is always really basic. I just use different sets of colors, bevels, gradients and blending modes in order to give it a unique look! I approach button creation as anything else in game art: I try to treat it like a little painting!

For the current game I’m working on, I know that I need a cartoony Sci-fi button. I envision neon blues, oranges and greens… buttons that emit light, a bit like faint lamps… a robust material, maybe an alloy of some sort… In other words, I’m not working blindly. I’m consciously thinking about the choices I make, both ahead of time and as I draw.

Button Design Process
The button concept, evolving from a basic to a more refined idea

As you can see, the design process is pretty experimental. It’s all about trying, failing, trying again. As it always is with design. The work of a designer is iterative by nature: as the jeweler slowly polishes gemstones until they’re smooth and beautiful, we designers have to keep improving our ideas until they fit our games well!

Become a supporter!

If you liked that article/video and want to see more, please become a subscriber on Youtube (new video every week!). You can become a follower on twitter, facebook and Google Plus ! Thank you (★^O^★) !
Original Article on GDquest.com

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

0
gameba 16.4k rep

nice tutorial

Saturday, October 01, 2016 at 2:28:50 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.