I spent a few hours designing this sci-fi styled UI. It’s a sort of code/puzzle where if you get it correct, a door will open for you. If you get it incorrect, you will die. I honestly kind of winged it on this and hoped for this best. I want constructive criticism and feedback as to how to improve it. If you see anything at all that you think could be changed to make this look better, I’m all ears.
Also, please make sure the UI layout and directions on the UI make sense. I don’t want the player to be confused as to what they are supposed to do.
Great text and shape characterization! Assuming from the post’s title, you’re looking for something futuristic. For many games I’ve played, future-related things usually have neon (especially blue, green, or pink tints).
Another thing I noticed that (might) improve readability (the red text) is to make the red text lighter, just like you other text colors. (e.g. rgb 227, 73, 64 google color picker - Google Search).
It looks good! Although, you should make the borders thicker to make it look more futuristic. You could also make the background of the UI blue to make it seem like a hologram or something similar to it (which is considered futuristic).
Okay right of the bat I am seeing SOOO MUCH that could be done here like the images… the color scheme… the soo much compact thing like that gives me claustrophobia just by looking at it. + uneven spacing. just a few things. maybe try looking at inspiration?
like maybe use this:
but i suppose you just started making ui? I dont know. I am not doing too much critisizim but it needs work. I am sorry. but for a beginner this is a solid 8/10 for beginners for advanced max ill go is 6/10
Thanks for your feedback! I specialize in building and have not ventured into the world of UI very much, so I definitely consider myself a beginner. Could you specify as to what you mean about the color scheme and icons?
Should I change the color scheme to that of the image you sent (White; Green; Red; Black; Gray)? And do you think the “Output” part of the UI should have it’s color scheme altered?
For the icons, I assume you are referring to the symbols. What exactly could those be changed to?
I appreciate you taking the time to write that response, but could you please elaborate just a little bit more so I know exactly what I can change about it to improve it? Thanks!
so i mean using one scheme like a pallete use like a dusty brown with blue? use 🎨 Material Design Colors, Color Palette | Material UI for the colors and for icons i mean like some are black and some white and with grey backgrounds that is really weird and the icons are jsut TOO BIG.
and oh no problem i remember my first time making ui… it was horrible… and dont worry you will become a pro better than me in no time at all! just keep working hard!
The instructions in the centre are a bit wordy as in, they state the obvious and repeat information, they are also a bit small.
As you effectively create a killtrap (select correct 2or die) anyone not paying attention to the small print could start trying to select and deselect combos before realising they should be looking for the answer elsewhere.
I would go with something like:
“Select two symbols”
“Once selected they may not be deselected”
“The correct symbols are hidden nearby”
Using a font, color, and size that matches your styling but makes it obvious this text is important (if not more important than the symbols themselves).
you tell me that that does NOT look good. its amazing. absolutely beautiful piece of work but again the symbols are looking weird and their background should match with the rest. but still this is a beautiful piece of gui design… good job
Very nice, the proceed button a good addition too. I agree about the color, perhaps something paler, or switch the symbol color and background colours, as you still want the contrast with the symbol.
@Qinrir@Wigglyaa, thanks! I couldn’t have done it without the help of you guys and everyone else who gave feedback. I’ll make a few changes to the symbol part of the UI. Thanks again for all of your help!
I’m a bit late, but the icons could be a little be less close to the edge of the frame, and i’d personally use a light grey for the background of them.
