unable to design simple UI of dice game.
i'm working for a casino took a contract but looks like my UI design spirit is dead and like i'm unable to design anything as i was off for 10 days cause of exams.
this is the ui i designed and i hate it, i tried to search on google for inspirations but i was only getting in gaming style but not in luxury style as this platform is luxury crypto casino. is there any ui designers here ? who can help me out ?
thank you for reading and helping i appreciate it.
14 Replies
I'd say tone down the contrast to start. That red is burning my eyes 😄
The super saturated green + the more muted green seems off to me as well.
To start, I'd really focus in on trying to make a more cohesive color scheme.
It is kind of dashboardy, you could look up dark mode dashboards to get some inspiration from. There's tons of crypto dashboard stuff out there that you could draw inspiration from to stick with the crypto vibe if that's what they're after.
Do they have anything else brand wise, or is this being designed from scratch?
the colors definitely need some attention, but I think another aspect that makes it look rought is the overall unbalance or rather lack there of. when you look at it from afar or if you blur it there's nothing really poping out and telling you "look here, this is the important bit", there's no hierarchy.
you have a CTA on the left with the play button, there's 3 or the 6 pills in the top right and the range slider in the middle that is ever so slightly off the center line.
you can give a better sense of balance by imagining that your UI is a platter that you need to balance on a finger, each UI element is a thing on the plater that weight more the more the user is supposed to notice it and the goal is to have everything fit on the platter and be able to hold it with the finger in the middle.
I never used any gambling app so I got no clue what is supposed to do what in your screen shot, but the range seems pretty important as it is the biggest thing you have, the play CTA button is obviously important but the rest looked less so as you just cramed them on the sides.
So I moved stuff arround to have the range be a bit bigger and more centered (after all, the higher you put it the bigger wieght you need at the bottom) and I moved the play button at the bottom of the panel so it lines up with both the side pannel and the bottom row of what I assumed to be the parameter of the game.
I have no clue what the pills thingies do so I moved them down to aggregate them with the parameter thingies to free up the space at the top to balance things a bit more.
it is being designed from scratched. giving a luxury theme. i also tried looking at crypto dashboard but it wasn't giving me that vibe and didn't found anything useful
well i definatly made so many changes
and here's what it looks like
also those pills shows that where last bet was placed at !!
this is the final design
i want to add the box behind it but i couldn't able to find "Dark Minimal Gray color" which will not mess up other elements
stake made it a lot easier by going with blue color (see the marked circles for color reference) but what i want to do is have background #000 and the way stake used dark blue as layer on background color behind red and green line i want to do something like that but i wasn't able to find dark gray which will blend well with #000
I wouldn't go with a pure black. I know black is often used with high-end stuff, but it's generally never "pure" black, because in real life there is no "pure" black, since light is reflecting off things. I know Stake has that bright green as part of their branding, but ugh I don't like it with the blue, lol.
A quick look on Dribbble for dark themes should give you some ideas, hopefully - https://dribbble.com/search/dark-theme - You'll notice a lot might have a pretty high-contrast color, but they won't be fully saturated like the red/green you have now. Something like this one is a pretty nice idea of how to bring green into it, even if it's more than you want https://dribbble.com/shots/25877384-Product-design-for-Crypto - this one is a nice example of something looking like it has a very black base, but there is a hint of color in it if you eyedrop it https://dribbble.com/shots/19306258-Freelancers-Daily-Routine-Platform. Also has a nice, vibrant green that works well, without the green undertones everywhere like the other design.
I'd also say a bit of "layering" would help too. Stake has it, where you have the main background color, and then everything on top of that is a bit lighter, and anything in those lighter areas is a bit lighter too. They might have gone too light, really, but the last dribbble example I linked to does a nice job of this as well.
I'm not a fan of the font your using for the numbers. I know mono-spacing can make it easier for number stuff, but with
font-variant-numeric: tabular-nums you can make numbers from any font become "monospaced". That might just be me though, but having right as monospace as well, I find it looks a bit strange.I agree that the typography above all needs a bit of work
I've been surprised by how many times picking the wrong font instantly makes the site look worse
i did some research and got to this colors now and the design system i used is full width not like box that won't have width beyond margins so to give seamless effect i went with full width container.
hope this colors looks good, right now my priority is to go live as soon as we can then we can do major changes in ui afterwords the right changes.
yes we're using gotham font for all text and for "right" and numerical i've used space mono as for ledger and wallet pages the space mono is primary font for numbers that's why for "right" & "left" i used space mono as well. so user will have idea how it looks
NOTE: that green box(active stage) will not be shown on "right" but will show on "left", i just shown as a reference
for buttons like ROLL and BET Amount i used
#161819 should i use #111111 ?it will look like this
the side container won't look good then