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 oneTable 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:
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.
This is a bad UI, we don’t know which one is the primary button
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.- 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.
It looks so colorful and creative but why I still get fired???
-
Pick compatible colors
Don’t pick colors that are hard to be seen, for example. Yellow on white background, Blue in black background.
yikes, my eyes
10/10 very nice -
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.
yikes, my eyes
10/10 very nice
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.
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:
Hmm, seems okay
Nevermind
When you are choosing a font for buttons, body text, etc. Don’t use an expressive font.
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)
