How would I make UI like in pls donate or Color Place? (simple, modern, core-like UI)

Help and Feedback Art Design Support
#1

I want to make simple, modern, core-lile UI the same way you can find in pls donate or Color Place, can someone explain it to me step by step? Like what do I need, what settings do I use, padding, sizes, etc.

Thank you!

3 Likes
#2

I’ve recorded a video of the UI in Pls Donate to help with explanation:

I could tell that Pls Donate does a great job of using MouseEnter and MouseLeave events in combination with TweenService. The Color3, Size, and Position of buttons, images, and text change based on those events.

To round the corners of Frames or other UI elements, like shown in the video, use the UICorner component. I recommend only using scale for the CornerRadius. There is also use of Audio/sound effects when clicking UI, which adds to the quality/feel of the UI. I assume this is simply done by :Play()-ing a sound effect when the button is .Activated.

Going back to animation/tweening, Pls Donate seems to play many tweens for opening the game shop:

  • Tip: You can move frame-by-frame on YouTube with the , and . keys. This helps with understanding the animations.)

    • image
      image1096×590 76.8 KB

      First frame of shop opening animation.

    • image
      image1105×591 81.5 KB

      Last frame of shop opening animation.

      • can see differences in the…
        • Frames BackgroundTrasparency
        • Rotation of overall UI
        • Position of Text & the Frame that has the shop items in it. (could just be due to rotation of the overall UI)

I find looking at the UI in other interesting; I hope what I’ve mentioned helps. Is there a specific aspect or thing you want to emulate that I haven’t covered?

3 Likes
#3

What about Color Place? It has a cleaner look I’m more leaned towards.

1 Like
#4

image
image1147×926 382 KB

There is also use of tweening on hover, UICorner’s, iconography, etc.

Color Place from a general design standpoint uses gray often. So, to match that look, I’d use a lot of gray: dark, light, in-between. Text is a light gray and backgrounds are dark gray. More important/eye-catching elements, such as icons in general or some text, should be closer to white compared to not-as-important text.

Sometimes the icons don’t contrast enough, which can make it hard for some to see. I recommend not mimicking that part of the UI:
image

There’s not a whole lot of UI in Color Place, but I can see that the style is modern and generally consistent.

Also, if you’d like to learn about UI/UX, I recommend this YouTuber/Video:

Edit: I put the older video in where I previously put the newer one because the older one covers a lot more.

1 Like
#5

I tried giving it a shot, here’s how it turned out: Feedback on my first clean, modern UI attempt, and first UI over-all. Let me know what you think!

1 Like
#6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.