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:
2. Anchors
Asset Link: GUI Anchoring Template - Roblox
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.
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.
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.
So lets take a look at our original size:
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.
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.
Top Center: Size (Offset Only), Position (X: Scale 0.5 | X: Offset Negative Half of Size)
Top Right: Size (Offset Only), Position (X: Scale 1 | X: Offset Negative of Size + Minus Padding Size
Middle Left
Middle Center
Middle Right
Bottom Left
Bottom Center
Bottom Right
Top Stretch (Left to Right)
Center Stretch (Left to Right)
Bottom Stretch (Left to Right)
Top Stretch (Top to Bottom)
Center Stretch (Top to Bottom)
Bottom Stretch (Top to Bottom)
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:
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:
- Red for Danger, Health
- Green for Good, Health, Money
- Yellow for Money, Gold
- White and Black for Foreground or Background
Some colors are psychologically good ques for many things and you can learn some here: Psychological Properties Of Colours - Colour Affects
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!
