A Guide to User Interface Design

Introduction

So before I start this off I want to talk a little bit about my experience in the years I’ve spent doing graphic art and interface designs. It’s never something you will get the first time, I took a very long time to have eye for this sort of thing. You will have times when you need concept art with you to guide you through a process for finding an ideal design.

The pont of this tutorial is to be a stepping stone to improving your games because of how powerful graphic design in your games can be and how it defines user interaction. We’re going to go over one thing at a time so this will be slowly updated as time goes on to go into larger things.

I’m not about to teach you how to make a masterpiece shop - I’m teaching you how to master the tools provided to you and how to tackle different problems.

IMPORTANT This is not done and will later include Motion, proper hierarchy designs for UI’s, how to use ListLayout and more, just keep a look out for updates that will be done in the title.


My Portfolio




1. Getting Started (Beginners)

Important Properties:
image
image


2. Anchors

Asset Link: https://www.roblox.com/library/901513077/GUI-Anchoring-Template

When you have different screens you may find that using only scale will stretch your UI and this is a common mistake a lot of people. So lets loot at these one at a time so it’s not overwhelming.

image

Lets pretend we wanted a healthbar for just a second, a lot of times when you insert a new UI you to get your a default size 0, 100, 0, 100 box that ends up at the corner of the screen. When designing UI a lot of times you want to add padding your layers and do this you need to head over to Position.

image

This is our properties currently for our yellow box you seen earlier.

Scale is based off a percentage of the screen - for example: 0.1 is 10% of your screen and 0.5 is 50% of your screen.

Offset is the more pixel distance of your screen such as how I have 10 Offset to move away from the edges while a Scale may be 0.02 or so to accomplish this, the difference is that it does not scale to your monitors screen and is anchored to where it is.

So on to extending our box, we know we wanted it 10 Offset away from the X (Across) and Y (Up/Down) from the screen which is good practice because there is few instances your design will work for sticking to the edges.

Now we have to change our size.

image

So lets take a look at our original size:
image

Notice that I didn’t use Scale? It’s because we don’t want our Health Bar to be stretching and Offset is all we need to focus on. Now since we are going across in the X direction we add on to the Offset.

image

Tip: Try to always keep your UI layout grid based and formatted - we’ll go over this later.


ALL ANCHORS EXPLAINED
Assume padding is 10 Offset and all frames are 100 Offset – Stretch will be 50 Offset as an example of frame size.

Note: All these are pics based on the asset link, I may have a few coords not formal but you can use the model as a reference and this as a quick cheat sheet.

Top Left: Do not use Scale, use only Offset.

image
image

Top Center: Size (Offset Only), Position (X: Scale 0.5 | X: Offset Negative Half of Size)

image
image

Top Right: Size (Offset Only), Position (X: Scale 1 | X: Offset Negative of Size + Minus Padding Size

image
image


Middle Left

image
image

Middle Center

image
image

Middle Right

image
image


Bottom Left

image
image

Bottom Center

image
image

Bottom Right

image
image


Top Stretch (Left to Right)

image
image

Center Stretch (Left to Right)

image
image

Bottom Stretch (Left to Right)

image
image


Top Stretch (Top to Bottom)

image
image

Center Stretch (Top to Bottom)

image
image

Bottom Stretch (Top to Bottom)

image
image


3. Alignment and Format

I cannot stress to you enough how important it is to have a proper grid like setup in your games UI. Make sure all your frames align properly and remember to use a universal padding measurement.

For example:

This here is my shop with a padding all around it with 10 offset from the border at all times for it’s content with the exception of the header. Website design is a great place to look to learn how examples of proper grid like systems and UI pages.

Lets look closer at how this is set up, website designs have a Header, a Body, and a Footer - UI designs sometimes follow this same thing when it comes to windows like shops. This actually helps the user understand where to look much easier and learn how your UI functions. Most Footers may contain the cash and resources, the header sometimes displays categories and the title, the body contains game items you can buy.

In my instance I want a TRI-LAYOUT so to speak, I didn’t need a footer due to the information being displayed being minimal and it blended well into the Header. So now this leaves us our body which needs to be navigational.

Tip: One interface design does not match all games due to the information needing to be displayed - use concept art or other games to understand why their UI works well for them.

Alignment Design Principles


4. Color Scheme

So this is where things require a bit of useful resources, I could reccomend you this: https://color.adobe.com/create/color-wheel/

Now if you studied any bit of Color Theory you would know plenty about Warm and Cool colors, also Pure colors but you were probably not told about the weight of color. Color can actually have perceived weight!

Here is an example:
imageimage

Ignoring the outlines I had to make image include those to stick out from the background here - but anyways.

The white on top should feel like it has little to no weight on the black color, but if we flip it, our black feels like it’s putting pressure on the weight as if it as weight to it. This is important if you do contrast on your designs such as how websites may have a dark header and a dark footer but a white middle because of the perceived contrast giving weight to it - a sense of gravity.

Color also helps player distinguish what is what like a few key examples:

  1. Red for Danger, Health
  2. Green for Good, Health, Money
  3. Yellow for Money, Gold
  4. White and Black for Foreground or Background

Some colors are psychologically good ques for many things and you can learn some here: http://www.colour-affects.co.uk/psychological-properties-of-colours

This is just useful for more complex design to influence player experience more psychologically just like this next example with gradient.


5. Gradient

Notice the gradient on the list of items? If you were to reverse this such as:

Our eyes get drawn a little more different due to our direction of the gradient and that is because we are trying to set a Focal Point which is the purest part of the design and using trails and gradients you can subconsciously help draw players eyes towards information you find important - it is far more than decoration and you should use it as a tool to arsenal.

If you also noticed I used a gradient to highlight my category icons above - this helps the player distinguish a transition and what they are currently on.


6. Hierarchy (Coming Soon)

Proper UI building for laying out your designs and frames.


7. Motion and Animations (Coming Soon)

Will include scripts and GIFs when I get around to this.

Request a Chapter!

154 Likes

Pretty helpful I’d say. Great forum!

6 Likes

Awesome post! You put a lot of work into this, nice work!

3 Likes

Lots to read and learn! Love it!

2 Likes

Wow thanks! I would consider myself to be a decent UI designer, but I know I still have a long way to go, so I’m glad that you made this :smiley:

3 Likes

Glad you liked it - I hope what comes later further improves your ability to design wonderful UI designs.

2 Likes

This was great! Time to get photoshop.

1 Like

Great tutorial!

1 Like

Very interesting concept on the “gui anchors” part.

But it’s preferred to use GUI constraints.

Other than that it’s unique and simple. I like that.

Great, easy-to-follow tutorial.
On the anchors section, though, why not just use AnchorPoint instead?

This was before anchor points so I really never use this since Im so used to my method.

Thanks for tips!

This is very helpful!

1 Like

A basic guide to basic colour schemes would be nice also

Ill expand on those later today.

1 Like

Nice post! I’ve been looking for an easy to follow UI design tutorial.

Great guide… When is Hierarchy & Motion and Animations coming? :wink:

This is really helpful! Thanks! :slight_smile:

Great job, you earned a like from me! :grinning: