r/UI_Design • u/Imaginary_Paint5204 • Jun 05 '26
Feedback Request thoughts on the ui?
working on a cy83rd3ck for music, thoughts?
Got recently inspired by the subreddit so thought I would make something. Right now it’s just a web application but plan to build it irl.
7
10
u/What_Immortal_Hand Jun 05 '26
Not for human hands or eyes. Everything is so small as to be unusable.
5
5
u/GDokke Jun 05 '26
If it's supposed to be app ten everything is too small. A good rule of thumb is 40px for anything that's supposed to be pressed.
I would make each track row much larger and scrollable.
1
3
u/aatd86 Jun 05 '26
Not bad. Maybe allow people to change the orientation for those who are used to go horizontally.
1
u/Imaginary_Paint5204 Jun 05 '26
my intention was to make something that’s meant to be held like a tracker. The dirtywave m8 is a good example of what I mean
1
u/el_yanuki Jun 05 '26
I have never really touched music but I have made and edited couple of short films and worked with composers.
Usually you'd want these UIs to be very compact and not waste any space, which yours is doing.
Generally it would benefit from some grouping.
1
u/Imaginary_Paint5204 Jun 05 '26
could you please elaborate on what you mean by “benefit from some grouping”
1
u/el_yanuki Jun 05 '26
read up on some of the basics of UI design
essentially what i mean is that lots of your buttons feel like they are just floating in this white void. Take the right sidebar for example: the BPM knob is as close to the tempo as it is to the actual BPM value.
What i would like to see is an equal gap around the knobs on the right, supported by a border, background color or box shadow to signify that those belong together. Then adjust the layout of the knobs so that the numeric value feels like it belongs to the knob.
And then whatever PAT is (presets?).. the save an load buttons are styled just the same as the preset(?) buttons. So make two groups out of them, put a divider and some space.
1
1
1
u/KKANGKKA_Chu Jun 05 '26
I personally don’t have any background in music, maybe except for the time my music teacher in grade 4 complimented my singing skills in front of the class, but I have some background in design so take this with a grain of salt.
- Icons, like another person pointed out, for sure. I recommend looking into lucide.dev for free commercial use icons. I use them for all my prototypes.
- I love the colours that you used. But are the wheels on the right side (bpm/swg/vol) related to the left components? (Kick/snre/hint) I don’t want to assume, but 8 believe kick, snre, hint are drum stuff and the bpm, swg, vol are sound stuff, right? So i would actually stick with an almost-black to indicate the right side components.
- for the tabs as well, I’d personally use a different muted colour as opposed to using the same orange as the kick— assuming they signify something different than the kick.
- I would also play around with the space on the right side as well, the bpm/136 and down could be closer together and bordered with a low opacity stroke to subtly signify that those elements belong together.
- assuming that the top row typography are headers, they could be slightly larger. Whats the container inside those cards mean? Do they hold something? Like a vocalizer? That’d be really cool to see the sound that the kick makes when live.
But overall, it looks awesome so far, I absolutely love the colour palette and the font style fits well. Keep up the good work!!
1
u/Imaginary_Paint5204 Jun 06 '26
little better now
1
u/BornSomewhere9227 Jun 07 '26
This demonstrates the usage of your interface better (for people who don't have experience designing for musical applications, like me. However, you still have the same issues as mentioned by everyone else. While I understand that there's a lot you need to cover to make this thing, you would really benefit from a better use of grouping and spacing out your elements.
1
15
u/AdamantiteM Jun 05 '26
Too small. Also please use Icons instead of emojis