Here's How to Create a Modern Sleek UI Design [UI Tutorial]

This post is published in response to my old tutorial post.

:postbox:: Introduction


Hi hi, everyone! I hope that this tutorial will help you to apply the things that you’ll learn from this to your own UIs. I will also address some wrong practices in UI Designing.

:brick:: Resources


Fluency Icon Library offers over 2,000 set of different styles of icons that will help us!

·

Here’s the model link for you to try, see, play around.

:books:: Let’s Start!


Today we’re going to make a settings panel. This UI style corresponds to the style I used in ·

I will also teach you simple animation for the UIs like hovering.

:dizzy:: Commission


Just a little segue, I can accept commissions through DevForum DMs. I accept Robux (+30% addition in response to the 30% cut[Group Payouts excluded]), PayPal.

:bar_chart:: Table of Contents


:scroll:: Tutorial


  • Add a ScreenGui to StarterGui

IgnoreGuiInset = true ResetOnSpawn = false

Above are the little property configurations will make the ScreenGui perfect to play around with.

Explanation

IgnoreGuiInset = true will make the ScreenGui expands into the area of the Roblox’ top bar area.

ResetOnSpawn = false will make the ScreenGui untouched even the player has died. This will just not reset the ScreenGui after dying.


  • Add an ImageButton to the ScreenGui

Image = rbxassetid://14407899530 ImageTransparency = .2 BackgroundColor3 = Color3.fromRGB(0, 0, 0) BackgroundTransparency = 1 AnchorPoint = Vector2.new(.5, .5)
Size = UDim2.new(1, 0, 1, 0) Position = UDim2.new (.5, 0, .5, 0)

The image is displays a subtle radial fading black. This will be the background image, it’s much better than the normal solid color as it gives vignette look.

The BackgroundTransparency is the resort to adjust the intensity of the transparency. Since the Image already displays translucency which is not customizable.

Explanation

We use the ImageButton as a layer to block any inputs from reaching behind and this can be use as a Modal Background by using the MouseButton1Click


  • Add a Frame to the ScreenGui

Make the AnchorPoint, Size, Position, &BackgroundTransparency the same as the background.

Explanation

This Frame will be our container and this is the object where we store all of our elements and essentials.


  • Add UIPadding to the Frame

Make the PaddingTop = UDim.new(0, 50) this will create a 50 pixels of padding area to your frame.

This object is not really been utilized very well despite it being very useful.
This UI tool will add margins to the UI element where you place it.

Tip 💡

I do recommend when using UIPadding, remain utilizing the Offset. Take this as just a suggestion as your situation will be various.

If you want to know more with UIPadding. Check this out!


  • Add TextLabel

Make the BackgroundTransparency = 1AnchorPoint = Vector2.new(.5, 0)Position = UDim2.new(.5, 0, 0, 0)Size = UDim2.new(1, 0, 0, 60)FontFace = Gotham MediumTextSize = 30TextTransparency = .1

This TextLabel would be our header! Your UI should be looking like this now;

Tips 💡

Using TextScaled for compatibility might seem common, but it’s not always the best. Using Offset for Size and Position to your UI Elements will make the TextSize work even better; we’ll get on this later. Test your TextLabel in different screen sizes, except for unsupported devices like iPhone 4s.


  • We’re going to add Close Button!
    Add ImageButton, and add ImageLabel inside

Make the ImageButton’s BackgroundTransparency = 1Position = UDim2.new(0, 20, 0, -30)Size = UDim2.new(0, 50, 0, 50)Image = empty

Make the ImageLabel’s AnchorPoint = Vector2.new(.5, .5)BackgroundTransparency = 1Position = UDim2.new(.5, 0, .5, 0)Size = UDim2.new(.5, 0, .5, 0)Image = rbxassetid://11293981586

Explanation

I contained the icon to a bigger button so the hitbox will be big enough without the icon being huge.


  • Add a ScrollingFrame into the Frame

Make the AnchorPoint = Vector2.new(.5, 0)BackgroundTransparency = 1Position = UDim2.new(.5, 0, 0, 100)Size = UDim2.new(1, -20, 1, -110)AutomaticCanvasSize = YCanvasSize = UDim2.new(0, 0, 0, 0)ScrollBarImageTransparency
= .5
ScrollBarThickness = 2ScrollingDirection =
Y

Explanation

AutomaticCanvasSize = Y will make the scrolling frame expand its canvas once it fills the visible part of the canvas with UI Elements.


  • Add these UI Tools in the ScrollingFrame; UIListLayout and UIPadding.

Make the List’s Padding = UDim.new(0, 10)HorizontalAlignment = Center
Make the Padding’s PaddingTop, Bottom, Left, Right = UDim.new(0, 5)

Explanation

UI Elements with UIStroke in them will be placed in the ScrollingFrame so if the CanvasSize is a bit narrow UIStroke won’t be able to make themselves visible due to ClipDescendants = true but we do not want to make it false as it will show all of the UI Elements inside.

With UIPadding this will fix the problem by adding 5 pixels space between the edge of the ScrollingFrame and the edge of the UI Elements.


  • Add an ImageButton in the ScrollingFrame. This will be one of your settings which I decided to make it ‘Post-processing Effects’

You can name your setting whatever you want.

Make the BackgroundTransparency = .9Size = UDim2.new(.2, 420, 0, 50)Image = empty

Explanation & Compatibility Check ✅

The Size property may look weird but here’s what it does. The 420 on Offset-X axis will be the same size in different screen sizes but the extra .2 on Scale-X axis is the one who’s in charge of scaling in different screen sizes.

So, while the ImageButton will resize, it won’t be as pronounced as it would be with a standalone Scale method.

Here’s a reference;

Samsung Galaxy S7:

iPad 2:

VGA:

1080p:

You’ll see it is slightly resizing to fit all of the screen devices. Also this is also a checkpoint! Does your current progress looks like from the photos above? If so you’re in the right track!


  • Add these UI Tools in the ImageButton; UIPadding and UIStroke!

Make UIPadding’s PaddingTop, Bottom = UDim.new(0, 10)PaddingLeft, Right = UDim.new(0, 10)

Make UIList’s Color = Color3.fromRGB(255, 255, 255)LineJoinMode = MiterThickness = 0Transparency = .8

Explanation

LineJoinMode = Miter will make the stroke have pointy edges!


  • Add TextLabel in the ImageButton

Make the AnchorPoint = Vector2.new(0, .5)BackgroundTransparency = 1Position = UDim2.new(0, 0, .5, 0)Size = UDim2.new(.5, 0, 1, 0)FontFace = Gotham BookText = your setting nameTextColor3 = Color.fromRGB(255, 255, 255)TextSize = 18TextTransparency = .1TextXAlignment= Left

This will be the name of your setting.


  • Duplicate the TextLabel you just added.

Same properties but make the AnchorPoint = Vector2.new(1, .5)Position = UDim2.new(1, 0, .5, 0)TextTransparency = .5TextXAlignment= Right

This will be the value of the setting.


  • We can create another type instead of TextLabel showing us the value we can use ImageLabels.

Make the ImageLabel’s AnchorPoint = Vector2.new(1, .5)BackgroundTransparency = 1Position = UDim2.new(1, 0, .5, 0)Size= UDim2.new(0, 20, 0, 20)Image = rbxassetid://12967618029ImageTransparency = .5


Now you can duplicate and script the function of the settings. I’ll show you how to animate a simple hovering animation, that’s why we put UIStrokes on the ImageButtons.

You can use the property LayoutOrder to customize the order of your settings.

This is what I have I added View Distance, Rerun Tutorial, and Save Progress setting and here’s some other Screen Sizes:

"Appearance in other Screen Sizes

iPhone 5:

Samsung Galaxy A51:

iPad Pro 3rd Gen:

Amazon Fire HD 10:

720p:

XBox One:

You may notice upon looking in the screen sizes, Small Screen players can navigate by using Scroll Bar as the ScrollingFrame toggles Scroll Bar when the UI Elements inside the canvas does not fit.

I’m not going to cover the closing, opening animations for this although, I suggest utilizing BlurEffect.

:computer_mouse:: Hovering Animation


  • Add a LocalScript in the ScrollingFrame

  • In the script, create a variable for TweenService and TweenInfo
local tween_service = game:GetService("TweenService")
local info = TweenInfo.new(.2, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
  • Create a variable for the ScrollingFrame
local tween_service = game:GetService("TweenService")
local info = TweenInfo.new(.2, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)

local frame = script.Parent --// location of the ScrollingFrame
  • Create a function named run, you can call this function for ScrollingFrame:ChildAdded() if you have something that will be added later on.
local tween_service = game:GetService("TweenService")
local info = TweenInfo.new(.2, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)

local frame = script.Parent --// location of the ScrollingFrame

function run()
end
  • Add a loop that will find child that is ImageButton
local tween_service = game:GetService("TweenService")
local info = TweenInfo.new(.2, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)

local frame = script.Parent

function run()
	for i, buttons in pairs(frame:GetChildren()) do
		if buttons:IsA("ImageButton") then
		end
	end
end
  • Lastly, Tween UIStroke and BackgroundTransparency when a player fired MouseEnter, MouseButton1Down, & InputEnded.

    I use InputEnded instead of MouseLeave cause it’s just more effective and will work most of the time.

    In the end of the script call the function!

Final Script:

local tween_service = game:GetService("TweenService")
local info = TweenInfo.new(.2, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)

local frame = script.Parent

function run()
	for i, buttons in pairs(frame:GetChildren()) do
		if buttons:IsA("ImageButton") then
			
			buttons.MouseEnter:Connect(function()
				tween_service:Create(buttons, info, {BackgroundTransparency = .95}):Play() --// makes the button quite transparent
				tween_service:Create(buttons.stroke, info, {Thickness = 2}):Play() --// makes the thickness of the stroke to 2 pixels			
			end)
			
			buttons.MouseButton1Down:Connect(function()
				tween_service:Create(buttons, info, {BackgroundTransparency = .7}):Play() --// makes the button slightly opaque
				tween_service:Create(buttons.stroke, info, {Thickness = 3}):Play() --// makes the thickness of the stroke to 3 pixels	
			end)
			
			buttons.InputEnded:Connect(function()
				tween_service:Create(buttons, info, {BackgroundTransparency = .9}):Play() --// reset the button to default transparency
				tween_service:Create(buttons.stroke, info, {Thickness = 0}):Play() --// makes the UIStroke invisible
			end)
			
		end
	end
end

run() --// calls the function!

If you playtest the game you should be able to see the animations in the different settings!

Here’s what the animations should look like; (slowed due to gif conversion)

2023-08-15 20-21-00

:yarn:: Why Offset and not Scale?


There’s no problem using Scale in some aspects like I did. The Close button icon is sized in Scale method but I don’t really recommend it into bigger frames like main frames. (Except for Full Screen UIs)

I also used Scale back then however when I try to playtest my game in different sizes cause I had that perspective about Scale (Scale = Compatibility) I mean it do work, it fits all of the screen sizes but…

On my phone the UIs are so small, when I’m on my computer it feels alright but on console it feels so so big.

When I use Offset there’s no small UIs, too big UIs everything is exactly the same the way I set it up on my computer.

Adopt Me, Welcome to Bloxburg, Murder Mystery 2 and Roblox themselves use Offset. Murder Mystery 2 is interesting and neat cause they have 3 different UI Sets to match your Device.

:bulb:: Tips


  • Utilize Roblox’s built in UI Tools, they’re a 100% useful. Like; UILayouts, UIPadding, UISizeConstraint, UIAspectRatioConstraint, UIScale, UIStroke, UIGradient, UITextSizeConstraint, & UICorner

  • Once you knew how they work and how will you benefit them you’re gonna find them useful when making UIs.

  • Try to utilize Offset more than Scale, I know it takes a lot of hardwork to get things right from offset, it may require you scripts to really make it compatible. (e.g. Frame will be on fullscreen if screen size is too small)

  • Blend and mix Offset and Scale to make your UI slightly resize.

  • iPhone 4s is not supported by Roblox anymore so if you have that UI not fitting with that device don’t fret.

  • Make the UI responsive by just simply animating its properties.

  • Use TweenService rather than the UI:Tween() as you have more control in the TweenService; you have more control in TweenInfo and properties of the UI.

  • When making UIs think of a theme that’ll fit to your game and stick to it.

:briefcase:: Wrapping Up!


Wooh! That’s a lot, but I hope you have something gained and learnt from this tutorial.

If you have questions, feedback, suggestions I’m all ears to hear and respond to those!

Anyways, it’s time to go now! Bye bye! >.<


made with :sparkling_heart:, toast

116 Likes

I might actually make a UI library with this style if anyone wants it.

@blve_hxrizon if you want to DM me the basic assets (default text, default buttons, containers, etc.) it will make my life a lot easier.

8 Likes

Now, this is something… . . . . . sensational to the eyes!

Amazing! Probably might use this for my game! Thank you for the sleek tutorial :wink:

Oh, right. Tip: Use Fluency Icon Library for the best icons!

6 Likes

Slight error:

The background should be an ImageLabel not an ImageButton. Also, BackgroundColor3 doesn’t need to be set if you just make the BackgroundTransparency to 1.

2 Likes

It’s right, the icon displays ImageButton and I also said that I included the BackgroundColor3 setting for the option to reduce transparency of the background. Since you can’t edit the ImageTransparency that far because of the original image.

1 Like

Gotta respect the tutorial :fire:

11 Likes

Well done Tutorial for UIS!
I really appreciate the in-depth tutorial on how you make a Modern Sleek UI.

Also like how you talk about using Offset instead of Scale, it helps the user in many different ways, so respect due to that.

2 Likes

How did you make it slide to another frame when you clicked the button?

He probably used UI page layout

1 Like

You can tween UI Page Layout? 30char

Nothing too crazy. As @Synitx said, I used UIPageLayout but you can also manually tween it by adding multiple frames. Like when you click the settings button, the main frame will move to the right and the settings page will move from left to center.


If you have the Animated property turned on, then to move to the next page, you can just do UIPageLayout:Next() or UIPageLayout:Previous() to go to the previous page.

Here’s the docs on UIPageLayout!

1 Like

I feel like we need a new tutorial for the new UI Spatial Design, that I used in Product: exe’s V4

7 Likes

Will use that for my future game

1 Like