Hello developers! I’ve been making my own Roblox group UI design. I made this all in Figma! So you may see there’s only one light mode. That’s because I’m to lazy to make a light mode for every page.
In my version there’s more then just the group icon, there’s also a full image header! You may also notice there’s a Roblox Studio logo, well that’s because the group owner can put a Devforum link, something like a update log.
Looking nice keep up the good work.
Feels a little cramped. Other than that, nice work!
Nice UI for a beginner but it’s really easy to tell that. Below are some keypoints of how you can improve your design.
Use UIPadding more othen and keep consistent sizing. Currently it seems all over the place. The Allies text uses different padding from the game cards below it. Same can be said for the description and tabs. They don’t even align right. The Group title has different horizontal and vertical padding.
Setup a hierarchy for font sizes such as for titles, headers, normal text etc. Why is the Roblox group name a different size? All the names should be the same size so they deserve the same amount of attention. This applies to the Tabs for store and about. I should be looking at the description then the tabs, not the other way around.
Change the colors of the selected tab. Currently it looks like the Affiliates and Store is disabled instead of selected. I would bold the font and change the background of the button to make it clear it’s selected. Maybe invert colors?
Not everything needs to be centered. Centering text can make formatting hard and is unnecessary, plus it makes the UI less consistent. Why should the description be centered but not the group wall? How come the description header isn’t centered too?
Add back the group title. Some groups will just have a icon and no text on it. How will users know the group name? What is you are in a different language? You can’t translate the logo as it’s an image and the title of the group is nowhere to be found so you can’t translate nothing.
All in all I think this is a good beginning UI but you have a long path to walk to getting good enough to replace Roblox’s web designer.
Left text alignment except for About, Store, Affiliates and everything above the description tab.The Flaming... instead of The Flamingo Fan Club.After some feedback I’ve change the UI a bit!
So first I change it so that the group doesn’t take up the box. I also added some missing buttons and icons. I also change it so that there is a group name and an image too. Changed some fonts and some text colors. I’m not to happy with the group games, just because it stands out. I might change the “Page Buttons” so there’s less bold on it.
Thank you for the feedback!
Looks amazing! Keep up the great work.
