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