GUI Design

[Father]

kortezzzz you mentioned valid points. Thank you.

I said it so often - I don't feel comfortable with it.

Ah sorry. Its tempting to know your viewpoints and I wasn't trying to be selfish, this could be helpful for anybody.

Now please don't hate me...

Are you kidding? Personally that was very useful to me. Makes me think twice before doing something. Things like is it big enough, bright enough, readable, really necessary, aligned, etc.

5. I don't know if it is a coincidence, but the yellow line shows the golden ratio split point of the height. Well done

Never thought about it, but i thinks its not coincidental either. Maybe sometimes we unconsciously feel it.
Thanks for the critic.

[kortezzzz]

@tulamide

I think a mature person that aims to become a pro should never be afraid of criticism. As far as there is no collusion behind the comment, I'm always open-minded to hear new stuff and learn and I think we all should be, or we'll stagnate for a stupid reason like a fear of colleague's ego. I see it happening everywhere in my personal live:
At my work, in social gatherings and even on facebook. People are so afraid to tell their thoughts and by that, prevent their close buddies to progress.

What would you do if you ever saw someone close to you going to an important meeting when a green ugly parsley leaf is stuck in his teeth? Would you keep your mouth shut just because you think you gonna hurt him by your comment while you know that this leaf can hurt his career?...

Same thing here, buddy. If we aim to be PROs, we should face comments from trustful colleagues. Please, leave your discomfort near the door before you pass the gates of this forum and make me pull of that green leaf from my teeth before I'm out to my important meeting

[tulamide]

Thanks, kortezzzz (repeatingly reading the name while counting the "z"s)

Of course my one and only motivation for giving opinion is to help. But for some reason it makes a difference for me if it happens publicly. I wouldn't mind looking over GUIs and give advices per pm, for example, since it then stays between me and the one who asked for help.
Also, I have less problems with correcting code in public, probably because the results are not so obvious. However, your arguments are good, becoming a professional involves being able to deal with criticism (positive and negative) as long as it sticks to the point.

I'll see if I can change over time

[tulamide]

Just as promised, this time we will have a closer look at the GUI from Harmless

What makes this GUI so bad is that it doesn't have any structure, follows no layout, has no symmetry. I feel like looking at something where every element was just thrown into the GUI with no concept at all.
It starts with the placement of elements. They align pretty much never. The first quarter of the gui is full of sliders, knobs and buttons, while the third quarter is very empty. The elements are sometimes placed circular, then again straight. They are too close to seperators.
But there's also the graphical elements. There are two types of knobs that don't fit at all. The dropdown menus are all of different sizes. The text elements use an ugly, italic font and are just placed somewhere with no recognizable concept. The left side uses a gap (about 16 px) which is correct, but the right side is missing the gap which is horrible.
The color management failed as well. There are way too many colors, and again their use follows no recognizable concept. I counted 9 different colors just for the knobs alone!

If there is a GUI to show how you shouldn't do it, then it is the Harmless GUI.

[RJHollins]

You made better sense of that GUI than I could have.

Would not want to hurt any feelings ... nothing accomplished with that goal for sure.

I think an issue that I face, at least, and maybe others. Much focus can go into the internal design of a project. I know so much of the effort goes into me just getting something to WORK. The chaos can oft times be viewed in the graphical GUI of the schematic itself.

One of the great things of this forum and members has been the luxury of seeing schematics assembled by some well organized programmers. And here is one key that I've gleaned. These 'really good' programmers have a method to their solutions/operations. When I compared my beginnings of FS attempts, I could see that my scrambled internals was not a goal to settle on. It created more issues down the road ... even if the 'mess' worked.

This comparison 'study' forced me to work towards improving. A major aspect of that 'change' was to think different. Sure, I still need to experiment with designing a needed function to work, but then I had to look at how to rethink the layout towards a cleaner and maybe more modular internals. One thing it made bug fixing easier AND adding new features more practical.

This leads to the view from the outside, the GUI that the world would see.

As I studied how to get something working, I would also start working on a GUI interface in the meantime. One, it was a chance to 'take a break' from one side of the brain to let the other start playing. It also gave time for me to get a feel for the GUI work in progress. How does it work. Do the colors and sections make me eye go straight to the area of interest. Do the knobs or sliders respond in a predictable way. Do I have to think to much just USING the interface.

The goal is an elegance in design workflow. I want it to look good, but I really DON'T want to be distracted for what the app is designed to do. I've found that this aspect of a project is something that takes time tweaking to get comfortable.

I'm not any kind of expert in any of these matters, but just sharing some of my thoughts and strategies that I've had to struggle with [and still do].

I also remind myself that this may be another of those things that are lifelong pursuits. Part of the career charm.

Thanks Guys for sharing !!!

[tulamide]

This time we will have a look at probably the best GUI ever designed. It is from an awesome VSTi called "Sinner".

dark skin
light skin

I will talk about it in depth soon!

[tulamide]

You might already have guessed so, but the GUI is not the best one ever designed. And it's not from a VSTi. Sinner doesn't exist (yet).

I created this GUI, and it has issues. But after more than 20 work hours I wanted to get done. I created this GUI just for this thread. Because I am now able to guide you through the complete creation process, from an empty screen to the full GUI step by step. I hope it helps some of you.

Part 1
At first I came up with a synth. I decided that it would have two sine-oscillators, three sine-lfos and two filters that were switchable between working as global and bound to each osc. The lfos should be able to select any destination to modulate. The oscillators should support phase offsetting and fm, and should have their own dedicated amp envelope. A global section with volume and spreading, which alters the panning from center to either side, finished my thoughts.

With that in mind I started with the layout. It's best to use a format people are used to. I already told you about the golden ratio, so this time it should be something different. I decided to use the famous 19" rack format. There are millions of devices built in this format, which makes it comfortable to the eyes.

We can't really use the original, because monitors are of different sizes with different resolutions. It would be too much work to find out the exact number of pixels needed for each individual user. Luckily we don't need the exact format. All we need is the ratio. The original values can be seen here: 19" rack norm

It leads us to those two ratios for a 1-unit-height:

Code: Select all

width : height => 10.8571
height : width => 0.0921

The next thought was that the VSTi will be used while the user works in a DAW. I don't want the GUI to take up all the monitor's area. Most people nowadays work in FullHD (1920x1080) and at least half of the width should stay available for the DAW. My final decision was to use 800px for the width of the GUI. From that we can calculate the height.

Code: Select all

u = w * 0.0921 = 73.68

It is the height for one unit. Since I knew there's a lot of elements for the synth I decided to go with 4 units.

Code: Select all

total height = 4u = 73.68 * 4 = 294.72 -> 294px

So now I had the dimensions for the GUI, which were 800x294

The next step is to get a border. If you look at the rack norm again, you'll see that 1 unit ends at exactly half of the 0.5" spaced thread holes. There is my horizontal border: 0.25".

Code: Select all

hb =  800 / 19 * 0.25 = 10.5263

The vertical border is even easier. It is the width of the metal strip itself, which is 0.625"

Code: Select all

vb = 800 / 19 * 0.625 = 26.3157

For reasons that will follow later I had to tweak these values to 10px and 25px.

This is the status we are at right now: GUI Dimensions

-to be continued-

[RJHollins]

This already is more detail than I've ever seen on GUI design ... just thinking of the main panel size.

thx T

[Spogg]

I love the symmetry somehow. Isn't it odd how the proportions and ratios simply appeal automatically?

I notice the colour range is rather limited/understated. Is this a fashion at the moment or does it add to the appeal that I feel? I much prefer the lighter skin for some reason.

I just have to ask... Will this be an actual working synth at the end? I do hope so!

Looking forward to seeing more...

Cheers

Spogg

[tulamide]

@RJ Thank you for reading! I hope it will be interesting for you.

@Spogg
As sure as a vulcan never retires you will see more!
Interestingly enough you pointed out what is part of the creation process. I wanted you to have a certain feel. It is no coincidence. You will see it when more parts are published.

One thing very important (and not covered in the next parts) is that people need to recognize patterns. Even in chaos we try to see structure. Look at this picture: http://2.bp.blogspot.com/-SsSiLrZWD48/VSuLb3321tI/AAAAAAAACIQ/r4TKYjd7YrA/s1600/2015%2B04%2B05_20.jpg
I'm sure you will see structure where there's only chaos. That's just natural. So the best you can do is to provide users with recognizable patterns and a clear structure.
EDIT: I didn't plan to make a VSTi. But if you want to develop the synth, I will try to provide you with the needed assets from the images.

And for all you people reading here: I think I should mention that this is more about tipps and tricks and techniques and a general guideline. You don't need to like the shape of the knobs for example, or the colors etc., to still learn a lot.