ArticlesBlog

How to design professional looking mobile game buttons

How to design professional looking mobile game buttons


Hello everyone! Today, we’re going to see how we can design
professional looking, cartoony mobile game buttons. This is a 2 part tutorial. This video
focuses on the design side and efficient sketching techniques. The next video will focus on vector
techniques you can use to redraw and polish your buttons to a professional level. Mobile game UIs tend to follow strict conventions which make it easy for players to jump from
1 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. First of all, we’re going to analyze what
the characteristics of a good mobile game button are. Here are a few examples of solid, visually appealing, yet standard mobile game UIs. From
the get-go, they have one important aspect in common: their position in space. That is
to say 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 game. 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. 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! Also, a good button generally has a 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. 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. Link in the description below! I’ll also add a little piece of personal advice: 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. How to find good looking icons? Many sets of beautiful vector icons are available
for free, online. If you want to create your UI faster, you can download a standard set
of icons to later edit it. Here are 2 websites you can go to in order
to find good, free vector icons: Number 1 is vectoricons.org. On this website,
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. Number 2 is 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
Creative Commons attribution terms, which can be a problem for some of us. Despite that,
that website is definitely worth checking! 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 first, pick a few 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. Next, 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! And finally, pick the most efficient sketches and draw clean versions of them. I strongly recommend
drawing icons only with vector tools, beyond the sketching phase: 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 rapidly. 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! 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… I also see 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.
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 always iterative:
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! That’s it for this video. I hope you enjoyed it! In the next part, we’ll take a look
at the tools and techniques we can use to refine our mobile game buttons to put them
in our games! If you liked the video and want to see more,
you can subscribe to my channel! And don’t hesitate to follow me and message me on social networks! ♥ Thank you for watching… ♥

Comments (19)

  1. Awesome tutorial! Definitely trying this out sometime. Also, you forgot the link to Ctrl paint.

  2. very pro thoughts & great workflow, my friend! The quality of your videos is impressive from all points of view.

  3. Awesome Tutorial Pal :D!!  Keep it Cool Dude ;D

  4. How to design professional looking mobile game buttons 1 http://buff.ly/1Agg0fA #gamedev #html5 #construct2

  5. Exellent work!!! suscribed

  6. Is there any full video?
    I like this video and wanna see more 🙂

  7. U need 2 train ur accent.

  8. Love you. Are you for hire for coding in CST2? Your videos are amazingly perfect. Still watching them.

  9. Merci beaucoup, ça va énormément m'aider ! 🙂

  10. That's what was wrong with my buttons. I need to make them pop out a little bit more.

  11. Thank you for the information.

  12. This is a great tutorial.

  13. Great tutorial, I really appreciate it

  14. One of the best most informative videos Ive seen for some time.

  15. Well presented! Thanks ! ^^

    By the way, is it ok if i can get your advice on these android app below? I am still a beginner and hope to learn from everyone. Your feedback is greatly appreciated!…

    bit . ly/2RX5Npc

    Apologize about the shortened link having spaces.. Will greatly appreciate if you could remove the spaces to access this google play store app.

    appreciate !!

  16. Really user friendly

  17. But how install the button we designed as useable buttons in the game? I dont know where to go from here

  18. please make more videos on gdscript

Comment here