Professional UI Designer Raising Guides 101 | Chapter 1

Chapter 2 has been released, check it out by clicking the link below:
Chapter 2

“Hey, you! Struggling on how to create consistent and high-quality UI? Why not read this tutorial?”

Professional UI Designer Raising Guides 101

A simple guide to creating high-quality UI and cautions when creating one

Table of content

  • Introduction to UX, a friend of UI
  • Theme color selecting 101
  • Cautions on creating UI
  • Softwares, resources & guidelines I recommend

Hi there, fellow UI designers and devforumers! In this tutorial, I will be teaching you how to create UI like a professional! It doesn’t matter you are a UI designer or not, try to follow my instructions and you will know the steps to become a professional UI designer!

Introduction to UX, friend of UI

Say hello to UX, aka user experience, one of the major elements in UI.

So, why is UX a major element in UI?

Here, let me give you an example what's a bad interface:

image

Do you know which button is for the down direction and which is for the up direction?

Answer: Nobody knows!

Because nobody knows which button is for down and which for up, people don’t know how to interact with the machine. There’s a phrase to describe this interface: Not user-friendly.

So, how can we create user-friendly UI?

Before really making UI in Roblox studio, why not try to make a prototype for people to test it out?

And gather their feedbacks so you can improve on your UI.

But before making a prototype, you should clear up your mind first, so you won’t struggle when you are making it. Here are a few questions for you to answer in your mind:

What you are trying to make?

Why you are making this?

Who is the audience for your product?

Remember, you should always keep the UI simple for everyone, no matter who they are.

image
This is a bad UI, we don’t know which one is the primary button

image
Much better…

Theme color selecting 101

Theme color is a major element in UI, it makes stuff less much boring, also making the genre of the UI much obvious. However, there are a few cautions on picking colors.
  1. One theme color in UI only
    All UI should be using one theme color, not more than one. Using more than one will create unevenness to the theme and will decrease the quality of the UI.

image
It looks so colorful and creative but why I still get fired???

  1. Pick compatible colors
    Don’t pick colors that are hard to be seen, for example. Yellow on white background, Blue in black background.
    image yikes, my eyes
    image 10/10 very nice

  2. Dark mode themes 101
    To create a very cool dark mode theme, use #121212 as the background color for the base, and each layer uses a white transparent layer to show its priority. For the most top UI, ensure the body text meets a contrast level of at least 4.5:1. Otherwise, the text can’t be seen easily.

Cautions on creating UI

Contrast

When you are creating your UI, ensure text can be seen easily:

The W3C recommends using 3:1 (against the background) for large text such as H1, H2, H3, etc and 4.5:1 against the background if the small text such as p.

image

Font usage

No matter what, you should use the same font family for your UI. Using another font family might cause unevenness.

When choosing a font family for your UI, you should consider the points below:

  • Will it be clear to see?

  • Can it be seen easily on a small display?

  • Is it Sans-Serif or Serif?

Here’s a few examples:

image
Hmm, seems okay

image
Nevermind

When you are choosing a font for buttons, body text, etc. Don’t use an expressive font.

image

Softwares, resources & guidelines I recommend

Software

If you don't have enough funds to buy professional software (photoshop software as a service yikes).

Why not try using Lunacy? Official site

Lunacy is a powerful tool for users to design their UI, they have almost all the features you need, such as grids, prepared UI kits, add your UI kit, icons, photos, path/vector tool, corner radius modifier, etc.

The pros:

  • Free
  • A lot of assets
  • Have Google Fonts API (find free fonts easily)
  • Most of the features you need such as path/vector tool and grids
  • Importing images
  • Lightweight, don’t consume a lot of memory or use up all of your CPU (Great option for those who have a potato)
  • CSS code always available
  • .sketch file support, save as .sketch
  • Fast, lightweight rendering engine for your UI
  • WHITE/DARK MODE
  • Give people a preview of your UI by uploading your UI as .pdf
  • Still works if your internet got ripped or you are grounded

The cons:

  • Some of the icons are paid :((
  • No plugins support?

Still not interested? Why not try the web-based Figma? Official site

Sure that you might be disappointed because of the icons in lunacy are paid, why not try Figma?

The pros:

  • Most of the features you need do exist
  • A lot of plugins
  • Real-time collab
  • Share your file with ease
  • Tier-based, the first tier is free
  • Cloud-based, everything you make is on the internet, no need to re-download the file

The cons:

  • Potato might not work
  • Cloud-based software, tend to have latency when its collaboration work.
  • No official linux support (there’s only unofficial build)

Yikes, my internet sucks

Why not try Adobe’s XD? Official site

Adobe XD is photoshop but with prototyping tool and also lightweight (in my opinion)

The pros:

  • Tons of plugins
  • Similar to other adobe software, no need to be stressed if you know how to use one of their software
  • Import files with .sketch files, photoshop, illustrator, etc.
  • Interactive prototype with voice, animations, moves. (Google Assistant in adobe XD?)
  • App integration available
  • UI wireframes, templates available

The cons:

  • Software as a service, yikes
  • Buggy, like really buggy
  • Have to install a plugin to export CSS code. Seriously?
  • No local saving after April
  • Only support MacOS & Windows

Resources & Guidelines

Material Design
Fluent Design
Colors for Flat Design
Colors for Material Design
Google Fonts

If you are a UI designer, why not..

Share your experience to others in the comment section, so people who is trying to learn how to design UI can learn from your experience and don’t make the same mistake.

If you think this tutorial is helpful, why not...

Press the like button and share this tutorial to your friends who are trying to design UIs. You might make the UI designing industry much better than before.

If you don't think it's helpful, why not...

Let me know why you think it’s not helpful in your situation and suggest improvements on this tutorial to me via comment or PM? (Short for private messaging

Content request

Manami is currently writing chapter 2. However, she doesn't have enough content to write chapter 2. Why don't you suggest contents for chapter 2?

Please let Manami know your suggestion in either Devforum or Discord (Manami#2870)

115 Likes

Meanwhile you are reading this (or not). Remember to “watch” (send all reply notification in this thread) as I will be posting updates of my next chapter.

The next chapter is mainly about studio, will feature constraints, skills to keep UI scaled properly, and tips on importing UI to Roblox and making UI in studio.

4 Likes

Thanks a bunch! This is an awesome resource for people like myself who are trying to further look at the aspects & learn more on UI Design.

4 Likes

Nice tutorial. I did read something a while ago about UI design (in particular themes) and I feel like it would be pretty helpful in this tutorial. You touched on what colours to use, but this article goes into it in more detail: https://uxmisfit.com/2019/08/20/ui-design-in-practice-dark-mode/. It’d be pretty cool if you could incorporate features of that article into your topic in order to educate UI designers on what to do and what to avoid when using multiple themes. :slight_smile:

Even if themes aren’t widely used on games (yet), it could relate to the topic of what colours to choose, and choosing good colour palettes for your game’s UI design.

6 Likes

Will cover more information about UI/UX in the next chapter. Thank you!

4 Likes

Thanks for sharing this tutorial with us!
As a programmer who has to do the UI work when developing alone, I wish I’d read this earlier.

My current UI does follow these principles (mostly) but it was certainly not first try. Lua Learning UI is on version 4 by now.

If I may add one thing;
Most helpful tool (in my opinion) is to watch someone use your UI. What seems obvious to you might be subtle to the user. I like to test my designs on my younger brother. If the kid can’t get it on the first try, I’ve failed as a designer. Sometimes you’ll spot them moving to look at the wrong thing, and you’ll realize your design brings focus to the wrong areas.
Testing on yourself doesn’t work, since you already know where to go and what says what. Having a buddy to run things by is by far the most useful tool.

8 Likes

Thanks for helping us with your amazing tutorial!
This would really help me throughout my journey as I’m an absolute beginner.
Have a great day!

2 Likes

Great tutorial! This tutorial should prove extremely helpful towards those looking to create and improve their UI/UX. I like how you included details about designing and using external fonts.

As a big fan of Material Design, props to you on giving your readers a concise tutorial on typography and colors. Keep up the great work!

3 Likes

Thank you for this tutorial.
It is explained very well and this helped me a lot.

2 Likes

Thank you! This was a 10/10 tutorial. You explained so well and believe me, this helped a ton!

1 Like

In most dark themes I’ve seen, the color is a little warmer. Like the Apple dark theme. This one is good too though! Everyone is welcome to have their own opinion and style with ui.

1 Like

Which would be a better software? Adobe XD or Lunacy?

Adobe XD supports collaborative editing and prototyping, meanwhile lunacy is just designing, no prototyping. However, lunacy has its own advantages that XD doesn’t have, like it’s much lightweight (XD is ~300 mb)

When you are a perfectionist :brain:

Awesome tutorial the I can relate with the things you said one theme, same font, White background and Yellow Text.(My eyes also hurt)

1 Like

Thanks very much, this helped I might changed to Lunacy.

2 Likes

Tysm, I needed Lunacy and it is so good to use!

1 Like