Text buttons are basic and hard for the user. UI Class; Course 1

What is UI?
UI stands for User Interface.

User interface is the buttons, menus, icons, and most of the stuff you press or interact with! In this course, I will teach you how important this is and even if you don’t notice it, you will subconsciously and will be amazed at how much more enjoyment you get out of well-designed and thought-out buttons; so let’s get into it!

Analyze this image.

Think about this; How could this button improve?

image

Pretty basic right?

There’s nothing wrong with this button, but we could make some improvements to make it look clean, fun, interesting, and easy to click!

This class will focus on design of the button!

We will discuss feedback, accessibility, and more things to spice it up later.

What’s the first thing you might notice?

From the start, you might see that it sticks out a lot, and it doesn’t look very polished. You can tell that someone just threw a clickable text in and they finished. That’s fine, but if you want your game to look extra clean there are a couple of things you could do!

Step 1/2

Make a background.

The reason why the button doesn’t look polished is that the text is (and I can’t really think of a better way to say this but) it’s just there. Nothing makes it fit in and it looks kind of boring.

One way to fix this is by using shapes as a background. Putting shapes behind the text make it look clean and carefully crafted instead of just plopped down.

Here’s an example;

image

But wait there’s one problem. It might look off to you for some reason.

Step 2/2

Color matching.

The last step (and probably the easiest) is color matching. This is when you take colors that look similar to make them match together. They don’t have to be the same color in the rainbow because there are also complimentary colors! Complimentary colors are colors that go well together and they can change depending on the art style you’re going for. Maybe the picture above works perfectly for your game and you don’t need to change it since they are complimentary colors! For now, I will show you the easiest method which is finding colors that go well together.

(By Proven Winners.)

In this case, We’re using a Mauve for our text. A good way to find matching colors is to go up or down the wheel 2 spaces from the text color! So basically it’s good to use Violets, Blue Violets, Muave Pinks, and Pinks. Other colors may work too but this method gives us the perfect range of colors. Feel free to play around with brightness too! As this is the first course and the easiest to understand (totally fine if you don’t get it; tag me with all of your questions! It shows that you are learning!) we won’t go into how players perceive colors and how it affects mood, where the player eyes are guided to, and how they explain actions which is much more difficult to put in your games.

For this example, I will use more pink tones to make the text stand out from the background more and give some contrast.

Check out the final product!

image

Thanks so much for reading and I hope you enjoyed my first tutorial! Let me know if you have any questions or comments and tell me how I did! We will cover more detailed stuff in other courses such as accessibility, feedback/animating, and color perception.

I really hope people will find out how important UI is and how it can change your game!

@ShiningStars

11 Likes

How did I do and do you want to be tagged in future UI courses?

If so, vote here!

  • Tag me in future courses!

0 voters

Rate the tutorial!
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

0 voters

6 Likes

There’s no brown on the color list:/

5 Likes

There should be dark colors as well, for example dark red, dark orange (brown)

5 Likes

Yes I should’ve used a better color wheel, I really liked this one so I kept with it though; thanks for the feedback!

3 Likes

Interesting…

2 Likes