How To Make Semi-Skeumorphic UI

Introduction :books:


So this UI design is based on Sims 4. But you can definitely customize it the way you like and turn it to your own preferred style

Get The Model :package:


Here’s the the model so you can customize it and fun around with it.

Procedures :spiral_notepad:


Add a ScreenGui to the StarterGui:

You can always rename the ScreenGui for organization purposes or whatnot.

After, Add a ImageButton to inside the ScreenGui:

After adding an ImageButton this would be the property:


Add a UICorner to the ImageButton

This would be the UICorner Properties:

This is how it would look like:

Add an UIGradient:

This will add a bottom accent bar that will act a background for the Button that will be created below.

Gradient Properties:

Gradient ColorSequence:


Add an ImageButton to the Panel:

The ImageButton Properties can be this:

After setting those properties you need to add these things in the ImageButton:

  • UICorner
  • UIGradient
  • UIStroke

UICorner Properties:

UIGradient Properties:

agreebuttonuigradientproperty

This is the ColorSequence Property for UIGradient:

agreebuttonuigradientcolorsequence

This is mostly unoticable gradient but the button is small so the gradual fade would be compressed when placed on the button.

UIStroke Properties:

We need a translucent stroke to act like a Unshaded Shadow.

OOOH You reached the middle! :shock:


Add a Frame to the Panel to act a Container:

This frame is the place where you can place your stuffs

This would its properties:

Now this is optional to add a UILIstLayout but for brief organizing we’re going to add one.

We need to add 3 things in the Container:

  • UIListLayout
  • Description (Textlabel)
  • Title (Textlabel)

UIListLayout Property:

Description Property:

Title Property:


To Finish Off the Agree Button, just copy the “Title” from the Container and paste it on the Agree Button and set the position to:

{.5, 0},{.5, 0}

To Polished Off the Main Panel, just copy the UIStroke from the Agree Button and past it to the Panel.

This is the preview without the Textlabels:

The close button will be created below!


We need to make now is the Close Button!
Duplicate the Agree Button:

and Add a UIAspectRatioConstraint:

The Aspect Ratio will make it onto square!

Close Button Property:

And We’re Done! :call_me_hand:


Okay these are the final previews and ideas:

This one is the Final UI:

This is one have different font:

This one have gradient bottom bar:

This one have left allignment:

Discussions :left_speech_bubble:


  • Actually this style of UI can be anywhere or any genre it’s just how you presented it.

  • This just present Shadows, Highlights, Lowlights, Light Angles, 3D Overlay.

  • This style was used in Sims 4!

  • Some people might dislike this style.

Outroduction :checkered_flag:


This is my 2nd Community Tutorial Post!

Hope this helps I included the Model Link for you to play around

Anyways leave up some replies :speech_balloon: and I’m up for them and likes are appreciated! :heart:

20 Likes

How long does it take to make one of these?

I might do this, thanks

Why did you use ImageButton instead of a Frame at the beginning?

1 Like

Although I personally don’t think I will ever use this tutorial thanks for giving this out to the development community.

This prevent touches going under cause sometimes frame let touches go throug even though frame.Active is true…

1 Like

1 hour for Roblox Studio and probably 2 hours for devforum

1 Like