They keep calling my "babies" UGLY!

DSP, Plugin and Host development discussion.
RELATED
PRODUCTS

Post

What Bones did was good, and you might also - as someone who obviously cares about the UI - want to take things a step further, and check that your UI will also work for the colour blind. There's several websites that will let you upload an image and then manipulate it to see what it would look like to people with different types of colour blindness. It's something that those of us without colour blindness forget about, but can render a UI unusable to others.

Post

A few thoughts after playing with the demo:

- Redundancy/over-labelling - If you are going to include 3 large buttons to select the number of bands, then you probably don't need to write "Number Of Bands" to inform the user. You could use "Number Of Bands", and then just have the numbers in small boxes ([1], [2], [3]).
But more than that (and this is why I had to download to check the demo), they are just on/off selectors. You've given over a huge chunk of interface space when a small on/off switch on each band would make more sense (imo, of course)
Another example is more space given to large selectors for 'Link' and 'Advanced', when link is often denoted by a symbol e.g [🔗] , and advanced could also be given over to a switch, per channel. Getting rid of these two sections would allow you to increase the height of each of the bands. They could easily incorporate the switches and still feel less cluttered. A possibility, especially if you've got extra height on the channels, would be to move the [On] button to the top half of the strip, and add an [Adv] button directly underneath.

Also, with regard to over-labelling: Mid/High, Low/High, Low/Mid could easily be shortened to Mid/Hi/Lo, and moving the [X-] to above the 'OVERS' will also free up a little horizontal space, so as to not clash with the numbers on the side of the metering. Another possibility would be to print the name of the plugin down the left-hand-side, and move those controls to the bottom left-hand-corner. As someone else pointed out, you could put all the extra info in an 'About' box pop-up window that appears upon clicking the name of the plugin. This could also include a hyperlink to your website.

S
I
D
E
M
I
N
D
E
R

M
E

Post

Thanks again, all! A lot of really great input here! :tu:
BONES wrote: Thu Aug 08, 2019 4:55 am Critique first. The biggest problem with it is that the colours are too saturated, which makes it hard to pick things out. See how just removing the hue and improving the contrast make sit look way more professional -
I actually like that almost as is!
Russell Grand wrote: Thu Aug 08, 2019 6:33 am I hope that I haven't offended you with anything that I've said as that was not my intention at all. :?
Nope, you haven't - that first impression is important!
Robmobius wrote: Thu Aug 08, 2019 11:17 am Would you not consider paying a pro to do it? I'm sure if you looked around here you'd get a decent deal.
Yes, I understand you typically get what you pay for and since I am "free" the result is somewhat expected! LOL

Post

Firstly, you're going to get comments from people dogging your work, tearing it and you down, so you might hire them to "fix" it for you.

As had been said before, get rid of the gradient. It's most distracting. Save the pizzazz for splash screens and about screens. Your main window should be uncomplicated to the eye.

After that, remove any redundancies. You don't need to label anything twice. As mentioned before, make those button labels just numbers, or remove the label itself. Either way, just stick to the essentials and avoid clutter or over-engineering. My biggest dislike, personally, is fussy, fiddly GUIs with tiny knobby buttony bits--I hate fishing around with my mouse when I want to work quickly.

Anyway, GUIs are something that everybody has an opinion on, good or bad. The problem is, everybody's brain works differently and you want to find a happy medium here. Compare other developer's GUIs that you like to GUIs that you hate and then apply what you figure out to your own. And then be proud. Your next GUI for your next plugin is going to be even better!
I started on Logic 5 with a PowerBook G4 550Mhz. I now have a MacBook Air M1 and it's ~165x faster! So, why is my music not proportionally better? :(

Post

TLDR:

Saturated colors are usually a bad idea for UIs. Use them only where absolutely needed. Every pixel in your UI is super saturated, demanding your immediate attention. This makes an uncomfortable experience while looking at the UI for more than a few seconds.

Saturated colors should only be reserved for times when the user really must notice something important on the screen. These cases aren't very common in UIs. Error messages are the most usual case. In your case maybe the parameter modulation amounts around the knobs could be such a case. Just don't over do the saturation. Use minimum amount necessary.

TIP:
Try developing the basics of the UI using only greyscale. When all elements are clearly visible, well organized and easy to read, then start adding color to the UI (carefully).

Post

Kraku wrote: Fri Aug 09, 2019 7:39 am TIP:
Try developing the basics of the UI using only greyscale. When all elements are clearly visible, well organized and easy to read, then start adding color to the UI (carefully).
Interesting tip and point that has been mentioned above. It's like "mixing in mono". :tu:

Post

To solve the spacing issue to everyone's satisfaction maybe, make all controls space apart as you resize the window?

I have not seen it before with programs I've used, but I know that it is doable. At least with Pascal it is.

I might give it a shot myself.

Post

I don't want to repeat what others have said, but don't want to read and be influenced by it, so I'll just hit things that pop out at me:

In general: Too many things that scream "look at me!". That's really it, but for example:

The blue buttons are especially eye-catching, seem to be floating on top of the rest of the plugin. Upper left light-source sparkle (btw, the knobs clearly have the light source directly above), vivid blue, bright white text. In most cases, do you need text on them? No. The "LIM" button could be a push-in-push-out button with no text, at a quarter of the size to improve spacing, and a more subtle color. If that's too subtle, give it a small LED on/off indicator on the button. Similar with the SOLO (MIX) buttons.

If you like 3D knobs, dimming some of them makes no sense. Figure out another way to show they are not in effect.

The fat white border on the display section it not useful. And the frequencies could be more subtle, maybe remove the bold at least. They are references, should be screaming for attention. The left side knob area doesn't look as well thought out as everything to the right of the display area.

Lots of words, making it cramped (do you really need "NUMBER OF BANDS [1 BAND] [2 BANDS] [3BANDS]"? How about either getting rid of the title, or the repeats BAND/BANDS?).

The splash of color is not really helpful, maybe just make it more subtle—again, too much "look at me" from too many places.

Maybe just a logo in the lower left, click it for an About box. There's too much clutter int he lower left. (The logo looks too pixelated too, needs a new one—it's looks like the '80s paid a visit.)

Some of these changes will help with spacing, but a little more will help. Another quarter inch to the plugin size would make the spacing fixes easier, but it could be done without changing the size.
My audio DSP blog: earlevel.com

Post

There are tools to help you find decently working color combinations
example: https://codepen.io/social_quotient/pen/ExgKG
A list of some tools https://designmodo.com/color-scheme-generators/

This helps create a set of colors that live in....ehm the same universe?
David Guda gudaaudio.com

Post

I'm a well seasoned designer. I'm very pleased with your design overall. All it requires is for you to take away the beveled edge effect and to make the logo something like an image with bold and chunky lettering that's been made to look pro all the way. It's the simplest smallest thing that makes a difference.

Really, overall I find your design stunning.

Here's mine:
https://leattol.com/work

I'd design the logo for you if you'd wish even. But I imagine you could get that done too.

Note: stick with the original purple. Maybe the blue buttons gray with white lettering - Try and make them seem drab. I however make knobs... I could make you some knobman knobs which were better than most if you wished... PM if so. I'd do it just for a ccby.

Post

davidguda wrote: Thu Aug 29, 2019 11:09 am This helps create a set of colors that live in....ehm the same universe?
The colors that we are using are actually shown as schemes in some of the tools you referenced here - so "in the same universe" seems a bit harsh.

I think the main problem - as others have pointed out - is there is just too much color - too much saturation and in too many places.

Thank you for the links.

Post

kingozrecords wrote: Fri Aug 30, 2019 2:23 am I'm a well seasoned designer. I'm very pleased with your design overall. All it requires is for you to take away the beveled edge effect and to make the logo something like an image with bold and chunky lettering that's been made to look pro all the way. It's the simplest smallest thing that makes a difference.

Really, overall I find your design stunning.

Here's mine:
https://leattol.com/work

I'd design the logo for you if you'd wish even. But I imagine you could get that done too.

Note: stick with the original purple. Maybe the blue buttons gray with white lettering - Try and make them seem drab. I however make knobs... I could make you some knobman knobs which were better than most if you wished... PM if so. I'd do it just for a ccby.
Thank you for the input. I'm going to try out your limiter too! :tu:

Post

Something I've noticed is when people can see a pixel, like in parts of your font, then it's automatically branded as 'dated.'
"Stuff don't have pixels anymore, man!!!" :)

Post

Fender19 wrote: Fri Aug 30, 2019 7:53 pm I think the main problem - as others have pointed out - is there is just too much color - too much saturation and in too many places.
Highly saturated colors built out of full-value RGB primaries are often referred to as "coder colors" because whenever you see them you can pretty much guarantee that a designer wasn't involved. ;)

Now, I'm a programmer and sometimes guilty of such colors, but maybe a little bit of physically based rendering theory might be helpful?

In general (and obviously simplified), most materials (ignoring things like luminescent materials) can be roughly split into dielectrics (ie. non-metals) and metals. When a (white) light hits a dielectric, depending on the surface roughness and material there is always some amount of specular highlight (more so at grazing angles), which (surprisingly enough) is always essentially white. Some of the remaining light is then absorbed by the material (which gives it a color) and the rest is reflected diffusely. On the other hand, in metals the color of the specular highlight depends on the metal and there is little to no actual diffuse highlight (ie. whatever the metal doesn't reflect specularly is simply absorbed; this is why something like cast iron with rough surface is essentially black).

Anyway.. the takeaway here is that even if you had some plastic that was perfectly colored to be pure RGB red, the specular highlights from the slightest surface (or sub-surface I guess) imperfections will always tend to add some white into the mix. In normal environments, there is light reflecting from any surfaces around (in rendering circles this is known as "global illumination") and these WILL also create specular reflections (although we don't necessarily notice them as such), in the real world all colors tend to be somewhat washed out unless you color the lights or use very artificial materials.

Oh... and the other thing... when designing for "grayscale value" it's really important to keep in mind that the luminosity (at least perceived) of the primaries is not equal: green is much brighter and blue is darker. Some image editing applications simply average the colors to give you grayscale, the better ones allow you to apply weighting, but it's good idea to use something like this when judging the relative values. Also note that if you want to have blue as bright as the brightest green, you really have no choice but to desaturate.

Post

trewq wrote: Sat Aug 10, 2019 3:39 pm To solve the spacing issue to everyone's satisfaction maybe, make all controls space apart as you resize the window?

I have not seen it before with programs I've used, but I know that it is doable. At least with Pascal it is.

I might give it a shot myself.

My resize results so far. For whatever it is worth to the topic.

https://youtu.be/pqSDVDe0r5I

Post Reply

Return to “DSP and Plugin Development”