GUI Design

[Spogg]

@Spogg
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.

It would be fascinating to work backwards. Take a lovely GUI and make the synth behind it! I'm assuming that there are "real" control knobs and such in there and not just the images... If not then that's a lot of work!

Looking forward to the next installment.

Cheers

Spogg

[tulamide]

@Spogg
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.

It would be fascinating to work backwards. Take a lovely GUI and make the synth behind it! I'm assuming that there are "real" control knobs and such in there and not just the images... If not then that's a lot of work!

Looking forward to the next installment.

Cheers

Spogg

It could actually be fun to hear what we can only see now. But, yes, it is a lot of work. I created the GUI exactly as you see it in the image. It was done in Illustrator, so I can do quite a lot with the source. However, I would recreate the knobs using Ruby, the same for the sliders. The fonts are needed, etc. I wish I were Jeanny and could just blink with my eyes to get it done, but I'm afraid it is quite some work. Hence "I will try"...

[tulamide]

Part 2

Now that I have an area to fill with functionality, I have to decide how to fill it. From the beginning I knew that I wanted the layout to reflect the independence of the two oscillators. With full spreading and dedicated filters it's like having two synths, one panned left and one panned right.

So it was pretty obvious for me that the oscillators would go to the sides. Which leaves 3 lfos, 2 filters and a global section. Two times three, I instantly thought. And the global section in the center, to keep the filters close to the oscillators.

A centered layout, with symmetry and the logo in the middle of it all. If I make a big border between the lfos and the filters/global it will further help the user to see the routing. A border big enough to serve as a section. The preset management to the left and additional info to the right of the logo.

Now I have enough information for the horizontal splits. There will be 5 parts, evenly spaced. The dimensions of the inner area are

Code: Select all

750x274

The width can be divided by 5. Perfect. Well, it wasn't that perfect. That's why I tweaked the border in part 1 to have 25px and 10px. It saved me 3px horizontally, which allows me to create 5 sections now of even width. If you ever face a situation like this, keep in mind that the structure is more important. If you can solve such a problem by sacrificing just a mere percentage of the border, do so. But don't cut off the border completely! There should always be space between the dimensions and the content! So before cutting off the border completely, resize the dimensions.

Let's start with the oscillators. 150px wide, on the sides of the gui. Here's the current status: oscillator sections

Now to the vertical splits of the inner part. It is a bit tricky. Do you remember the simplified golden ratio? 5:3? I used this ratio to get the filter section.

Code: Select all

height = 274
split = 274 / 5 * 3 = 164.4 -> 164px

I don't need to calculate the width. It's still 150px each. Here's the current layout: filter sections

Now I made the same again, but in opposite direction, which results in symmetrical splits: complete layout

[tulamide]

Part 3

Before we can continue building the GUI, I have to talk to you about color. It is an important part of any UI. But I was working with a vector drawing program, so I didn't care about colors until all elements and their positioning were done. But my example images for further GUI editing will be colored, so this is the perfect time to talk about how and why I chose the colors.

The first term you need to know is monochromatic. Although mono is part of the term, it does not mean to just use one color. It means to use shades of just one color, but as many as you like. If you've ever seen a greyscale photo, you know what monochromatic is. Here's an example image:



If you have a look at the GUI again (a few posts above is the link), you will notice that it has a lot of that monochromatic look. In fact, it is monochromatic with two additional highlight colors. It is relatively easy to build matching colors when orienting at monochromatic looks. That's why I used it here. Of course that's not the only way you can create your set of colors. There's a wide field of color harmony and color theory that will guide you through the process.

I knew I wanted to create a dark theme. That means, the dominant color, for example the background color of the GUI, should be a dark one. I also like all kinds of blue. And I knew I didn't want to have strong colors. So the dominant color I decided to use is a blue-ish dark grey. From there I created two lighter colors, based on the dominant one. Finally I created two variants of the lightest color. And that's it. Here is Sinner's color palette:

Sinner-Color-Palette.png (4.79 KiB) Viewed 13197 times

The values are in HSB format: Degree, percent, percent (for example 210°, 10%, 25%). The slight difference in hue for the foreground color is due to Illustrator working in YMCB-color-space. It is a bit narrower than HSB and therefore can't map all colors exactly. So please see the 208° as actually 210°. So we have 3 shades of the same hue. For the additional highlight colors you will see that I doubled the saturation from 6 to 12%. This wasn't by accident. If you have a look at only the last 3 color of the palette you can see that they have the same weight. They seem to just differ in hue. If I'd used 6%, they would have seemed to be paler than the original highlight color (var 1).

Whatever your favorite colors are: Less is more!
You should aim for 3 to 6 colors most of the time. People won't be attracted to GUIs with dozens of colors, especially if they are over-saturated. Which brings me to another example. While in my palette the dominant color is a dark one, and so the other colors were lighter. If I use nearly the same values (for example from background to foreground the brightness was increased by 60% from 25% to 40%), but for a light dominant color, I obviously have to decrease brightness and saturation. But does this still look good? Well, decide for yourself.

Let's imagine someone's preferred color would be a nasty orange. I know, who would ever prefer such an eye-hurting color? But still, let's just assume there would be one person in the whole wide world. How would the color palette look like if done similar to Sinner? Like so:

Orange-Color-Palette.png (13.72 KiB) Viewed 13197 times

In this case the dominant color is also the lightest instead of the darkest, etc. Everything is reversed. And doesn't it look beautiful? Apart from the orange of course which is still burning my eyes...

Now that we have our colors, we can't just use them freely. Obviously, the dominant color can only be used for the background. The foreground color should be used for all elements' basic shapes (incl. text), and the highlight colors should be used to point the user to important parts (as the bars of the envelopes, or the sweep of the knobs).

So why did you use 3 highlight colors then, you ask? Because they point to different parts/purposes. While highlight var 1 is already explained, highlight var 2 is used only for switches, and highlight var 3 shows the elements that are modulated by the LFOs.

Now that you learned a bit about colors, you might want to know more. For a very, very brief overview of color theory (for those too lazy to read more than a few paragraphs), have a look at http://graf1x.com/color-wheel-history-and-explanation/

Those who want to invest more time in this very important aspect of GUI design, have a read here (and its following pages): http://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm

-to be continued-

[Walter Sommerfeld]

only a bump:
interactively explore over 100 million color schemes...
http://www.dsprobotics.com/support/viewtopic.php?f=6&t=3786

[tulamide]

only a bump:
interactively explore over 100 million color schemes...
http://www.dsprobotics.com/support/viewtopic.php?f=6&t=3786

Missed the thread. Yes, those color wheel helpers are recommended. You can find quite a lot of them. I prefer an online color wheel, for example http://paletton.com