OK, folks, I need some help!
I work really hard to make my plugin GUIs look appealing - but I'm getting feedback that they are "dated and UGLY".
Can you please tell me - specifically - WHY this GUI looks "dated and ugly"?
I've noticed that many plugin GUIs today are very plain and simple. Is THAT what's wrong? Too MUCH GUI? If not that, WHAT?
They keep calling my "babies" UGLY!
-
el-bo (formerly ebow) el-bo (formerly ebow) https://www.kvraudio.com/forum/memberlist.php?mode=viewprofile&u=208007 - KVRAF
- 16369 posts since 24 May, 2009 from A galaxy, far far away
I'd say there are ui issues, before getting to the gui, the biggest of which is how cramped it 'feels'.Fender19 wrote: ↑Wed Aug 07, 2019 4:17 pm OK, folks, I need some help!
I work really hard to make my plugin GUIs look appealing - but I'm getting feedback that they are "dated and UGLY".
Can you please tell me - specifically - WHY this GUI looks "dated and ugly"?
I've noticed that many plugin GUIs today are very plain and simple. Is THAT what's wrong? Too MUCH GUI? If not that, WHAT?
SideMinder ME v1.1.0 screenshot.png
As for 'ugly'? Well, that's always going to be in the eye of the beholder. But those colours aren't helping. I know there is a retro resurgence happening, but that kind of styling will always look dated to most people. Ask yourself whether you'd go out dressed in those colours, or decorate your house like that
-
- KVRist
- 139 posts since 28 Aug, 2017
The pseudo 3d look on the background edges look very cheap and overdone, not at all realistic. Same for the knobs, sliders and buttons: they have an edge but seem to miss a shadow. It also looks very cluttered to me with no free space and all elements side by side so tight.
Personally I think it feels half baked. The color scheme is not my cup of tea, the white thick borders and lines don't help to group controls.
Personally I think it feels half baked. The color scheme is not my cup of tea, the white thick borders and lines don't help to group controls.
-
- KVRAF
- 2367 posts since 17 Apr, 2004
I'm not sold on the magenta gradient thing, but that might be personal preference. It does clash quite a bit with the white text at the bottom left though. I don't think the placement is ideal.
The most obvious issue is a distinct lack of contrast with the knobs and faders fading into the background. You want a UI to make it immediately clear what is important (that should stand out), and what you can interact with and what you can't.
So the white text used by the labels works well, because it contrasts with the dark background. It's clear what the text is for, and it's legible at a glance. The background keeps itself, well, in the background. The grey text is less legible. In the case of options that are disabled, I guess that's fair enough, but you could still make the clickable elements themselves more obvious and differentiate them from the background (borders etc.). Most of the interactive elements are not distinct from the background at all. For example, only the position markers on the knobs and faders stand out. The actual knobs and faders themselves should be differentiated from the background to signal "I do something, touch me!"
I'm not a very visual person, and UI design is not my thing, but I also suspect that your faders would also be better with lines at the left and right marking the start and end values, not just the middle. That would give a much clearer indication of the movement range and where you are currently positioned within it.
So for me, it's not so much a question of ugly or pretty (that's personal preference) as that the UI elements are indistinct.
Oh and one other thing I just noticed. If the two knobs on the left are adjusting the points in the graphical representation on the right, why not have something slider like on the sides of the spectrum instead, so the position of the slider = position of cut off on the graph.
The most obvious issue is a distinct lack of contrast with the knobs and faders fading into the background. You want a UI to make it immediately clear what is important (that should stand out), and what you can interact with and what you can't.
So the white text used by the labels works well, because it contrasts with the dark background. It's clear what the text is for, and it's legible at a glance. The background keeps itself, well, in the background. The grey text is less legible. In the case of options that are disabled, I guess that's fair enough, but you could still make the clickable elements themselves more obvious and differentiate them from the background (borders etc.). Most of the interactive elements are not distinct from the background at all. For example, only the position markers on the knobs and faders stand out. The actual knobs and faders themselves should be differentiated from the background to signal "I do something, touch me!"
I'm not a very visual person, and UI design is not my thing, but I also suspect that your faders would also be better with lines at the left and right marking the start and end values, not just the middle. That would give a much clearer indication of the movement range and where you are currently positioned within it.
So for me, it's not so much a question of ugly or pretty (that's personal preference) as that the UI elements are indistinct.
Oh and one other thing I just noticed. If the two knobs on the left are adjusting the points in the graphical representation on the right, why not have something slider like on the sides of the spectrum instead, so the position of the slider = position of cut off on the graph.
Voted KVR's resident drunk Robert Smith impersonator (thanks Frantz!)
https://open.spotify.com/artist/2myYesRBRgQB3LkZzEYdt5 | https://soundcloud.com/steevm/
https://open.spotify.com/artist/2myYesRBRgQB3LkZzEYdt5 | https://soundcloud.com/steevm/
-
- KVRAF
- 1586 posts since 7 Jun, 2007
Howdy. Lots of relevant comments here. I'll add my bit too...
The background DOESN'T stay in the background...that magenta is way too much of a distracting feature and needs to be put in place either by darkening the background more, or using lighter foreground elements, like white knobs n faders etc. In fact if magenta is "the statement" I'd go for magenta knobs, faders n buttons too.
The bevels on the background and buttons is very 90s. Rather just go flat. The tone of blue used for the buttons is very 90s, rather use a lighter tone of another colour already in the plugin palette.
The knobs are lit from directly above, but no shadow on background image. The faders and buttons are lit from top left angle, so there's no lighting consistency, and no shadows there either.
(The knobs are nicely done though with good definition in the actual image)
The white border around the display is too "jump off the page", use a darker colour and blend in with the background a touch with opacity.
The magenta in the display and the display as a whole work very well for me. Nice.
The font used seems a bit 80s old Detroit Police. If that's what you're going for ok, but then rather fill the lettering in white and leave the outline transparent. Also outlined lettering isn't very strong visually and isn't the best choice for main title stuff.
Example: Roland JX3P has some extra line fills to make the name more solid/substantial.
Of course there's no right or wrong, but as with sound engineering it's good to know the rules/guidelines before you go around intentionally breaking them
) If you know how to do it right, then doing it wrong on purpose is a design/aesthetic choice... and no one can tell you not to do it )
Hope this has been helpful
The background DOESN'T stay in the background...that magenta is way too much of a distracting feature and needs to be put in place either by darkening the background more, or using lighter foreground elements, like white knobs n faders etc. In fact if magenta is "the statement" I'd go for magenta knobs, faders n buttons too.
The bevels on the background and buttons is very 90s. Rather just go flat. The tone of blue used for the buttons is very 90s, rather use a lighter tone of another colour already in the plugin palette.
The knobs are lit from directly above, but no shadow on background image. The faders and buttons are lit from top left angle, so there's no lighting consistency, and no shadows there either.
(The knobs are nicely done though with good definition in the actual image)
The white border around the display is too "jump off the page", use a darker colour and blend in with the background a touch with opacity.
The magenta in the display and the display as a whole work very well for me. Nice.
The font used seems a bit 80s old Detroit Police. If that's what you're going for ok, but then rather fill the lettering in white and leave the outline transparent. Also outlined lettering isn't very strong visually and isn't the best choice for main title stuff.
Example: Roland JX3P has some extra line fills to make the name more solid/substantial.
Of course there's no right or wrong, but as with sound engineering it's good to know the rules/guidelines before you go around intentionally breaking them
) If you know how to do it right, then doing it wrong on purpose is a design/aesthetic choice... and no one can tell you not to do it )Hope this has been helpful
-
- KVRian
- Topic Starter
- 625 posts since 30 Aug, 2012
Thank you for the input.
2) I tried vertical sliders first but the problem is that their ranges overlap - which didn't work because you can't have two interactive areas in the same space (the one on top gets priority while the one underneath is ignored). Side-by-side vertical sliders would work but would require making the entire GUI wider to accommodate.
Good points and I will consider how to address on the next update!
1) The frequencies set by these knobs are shown by the horizontal line breaks in the display per the scale on the left. It's hard to see that in a static screenshot but is readily apparent when the plugin is running.sjm wrote: ↑Wed Aug 07, 2019 4:54 pm Oh and one other thing I just noticed. If the two knobs on the left are adjusting the points in the graphical representation on the right, why not have something slider like on the sides of the spectrum instead, so the position of the slider = position of cut off on the graph.
2) I tried vertical sliders first but the problem is that their ranges overlap - which didn't work because you can't have two interactive areas in the same space (the one on top gets priority while the one underneath is ignored). Side-by-side vertical sliders would work but would require making the entire GUI wider to accommodate.
Good points and I will consider how to address on the next update!
Last edited by Fender19 on Wed Aug 07, 2019 6:06 pm, edited 1 time in total.
-
- KVRAF
- 2266 posts since 10 Jul, 2008 from Orbit NE US
Not ugly.
The logo in the bottom left is distracting, as already said, different font (make it solid and a different color), and i’d put the rest of that info behind the logo so that when you click it you see the author and build number. Also agree the buttons need no edge lighting and knobs could stand out. The color itself doesn’t bother me but ‘subdued hues’ are my big thing. I think the layout is fine like it is, would be usable for me.
The logo in the bottom left is distracting, as already said, different font (make it solid and a different color), and i’d put the rest of that info behind the logo so that when you click it you see the author and build number. Also agree the buttons need no edge lighting and knobs could stand out. The color itself doesn’t bother me but ‘subdued hues’ are my big thing. I think the layout is fine like it is, would be usable for me.
gadgets an gizmos..make noise https://soundcloud.com/crystalawareness Restocked: 3/24
old stuff http://ww.dancingbearaudioresearch.com/
if this post is edited -it was for punctuation, grammar, or to make it coherent (or make me seem coherent).
old stuff http://ww.dancingbearaudioresearch.com/
if this post is edited -it was for punctuation, grammar, or to make it coherent (or make me seem coherent).
-
- KVRAF
- 2772 posts since 22 May, 2017
I don't mind the colors actually, but those knobs, font, and overall "feel" scream free Synthedit plugin. In fact, I choked on my tea when I saw the price of Sideminder ME as I honestly expected it to be free due to its GUI. Not that you're asking too much, mind you, I was simply surprised.
Edit: I will admit that, after a second look, I don't mind the knob style as much as I did at first. I do see what you were going for with the GUI, and it's really not that bad. I think, with a few tweaks, it could be a cool-looking plug. And I want to restate that I don't mind the colors like others here, they are unique so it makes it stand out from the crowd. Sorry I can't be more help than this.
Edit: I will admit that, after a second look, I don't mind the knob style as much as I did at first. I do see what you were going for with the GUI, and it's really not that bad. I think, with a few tweaks, it could be a cool-looking plug. And I want to restate that I don't mind the colors like others here, they are unique so it makes it stand out from the crowd. Sorry I can't be more help than this.
-
- Banned
- 12368 posts since 30 Apr, 2002 from i might peeramid
have no contemporary market awareness, but like to type -
when criticism occurs it is not unknown for grouped events to be collusive, but i don't think this is the case here. i see a mix of imo 'acceptable' qualities and otherwise which may weight one way or the other.. eg. the graphic is tasteful, looks like you burned a couple bowls on it, i like the magenta. imo the knobs are inbetween, might not be bad without other weak spots.
but with modern ideals the magenta also brings attention to the bs in the left. its 2019, all of that crap magically is programmed into your subconscious by some simple icon. it looks like 1980 trs-80 ad printing all the information there.
imo it works because the red excitement is contrast and focus, but its too bright where it doesn't need to be.
otherwise what i'd add is that wile i enjoy burnign one and getting all teh aesthetogenic shimmer going, with years of practice and hundreds of working examples i still couldn't tell ya.. ..the main issue imo is the large amount of labeling, which brings attention to the tenuous quality of font graphics.. ..i don't know how to reduce that in this case (because eg. it translates differently when the gui is reduced in size for ads) ..mix fonts, shades, et c.. done it for years..
..i've had teh pleasure of making products with sub-professional standards and relate to this sense of some thnigs done tastefully while some qualities remain elusive.. perhaps some professional insight is worthwhile? (running through my mind lately thanks to wags)
when criticism occurs it is not unknown for grouped events to be collusive, but i don't think this is the case here.
i see a mix of imo 'acceptable' qualities and otherwise which may weight one way or the other.. eg. the graphic is tasteful, looks like you burned a couple bowls on it, i like the magenta. imo the knobs are inbetween, might not be bad without other weak spots.but with modern ideals the magenta also brings attention to the bs in the left. its 2019, all of that crap magically is programmed into your subconscious by some simple icon. it looks like 1980 trs-80 ad printing all the information there.
imo it works because the red excitement is contrast and focus, but its too bright where it doesn't need to be.
otherwise what i'd add is that wile i enjoy burnign one and getting all teh aesthetogenic shimmer going, with years of practice and hundreds of working examples i still couldn't tell ya.. ..the main issue imo is the large amount of labeling, which brings attention to the tenuous quality of font graphics.. ..i don't know how to reduce that in this case (because eg. it translates differently when the gui is reduced in size for ads) ..mix fonts, shades, et c.. done it for years..
..i've had teh pleasure of making products with sub-professional standards and relate to this sense of some thnigs done tastefully while some qualities remain elusive.. perhaps some professional insight is worthwhile? (running through my mind lately thanks to wags)
you come and go, you come and go. amitabha neither a follower nor a leader be tagore "where roads are made i lose my way" where there is certainty, consideration is absent.
-
- Banned
- 12368 posts since 30 Apr, 2002 from i might peeramid
eg. 'width delta' the font is pixel crisp, looks great, 'width adjust' looks blurry, perhaps in editor due to reduced brightness.
a lot of the font looks like cack, the bottom is solid, the top line is only half there (like Es) which would look better if you just copied over the bar of pixels. maybe just patching that and a bit of horizontal breathing space.
a lot of the font looks like cack, the bottom is solid, the top line is only half there (like Es) which would look better if you just copied over the bar of pixels. maybe just patching that and a bit of horizontal breathing space.
you come and go, you come and go. amitabha neither a follower nor a leader be tagore "where roads are made i lose my way" where there is certainty, consideration is absent.
-
- KVRian
- Topic Starter
- 625 posts since 30 Aug, 2012
Would any of you be surprised if I told you I used Skinman to create the background? Knobman does oversampling graphics (which I use), Skinman does not. I agree the text is not as sharp as it could be.xoxos wrote: ↑Thu Aug 08, 2019 12:33 am eg. 'width delta' the font is pixel crisp, looks great, 'width adjust' looks blurry, perhaps in editor due to reduced brightness.
a lot of the font looks like cack, the bottom is solid, the top line is only half there (like Es) which would look better if you just copied over the bar of pixels. maybe just patching that and a bit of horizontal breathing space.
Maybe it's time to switch to Photoshop? Any other good plugin GUI designers?
-
- KVRian
- Topic Starter
- 625 posts since 30 Aug, 2012
Oooo - ouch! But I asked for it and you're being honest. If that's the first impression I need to fix it!Russell Grand wrote: ↑Wed Aug 07, 2019 6:54 pm...those knobs, font, and overall "feel" scream free Synthedit plugin.
