GUI Design

[tulamide]

What do you all think, would it be a good help to show a bit of proper layouting? I will give a start here, and if you think it isn't needed, just let me know!

Let's have a closer look at the golden ratio. It is known to have an harmonic effect on human eyes, and that's for a good reason. You will find the golden ratio everywhere in nature, which means our eyes are used to it. It is not a requirement to use the golden ratio when designing a GUI. On the other hand, if you are not very experienced it can help you getting a good looking GUI with a minimum of effort.

Now the formula is very mathematical. But graphic designers aren't mathematicians. The first thing they noticed was that the golden ratio is a number that can't be expressed with two integers. But working with integers is so much easier. As a result they came up with two integers that are close enough to the real golden ratio:

Code: Select all

l : a = 5 : 3

where 'l' is a length and 'a' the larger section after splitting at the golden ratio. Now it is pretty easy to divide lines or areas. Say you know the length of a line and want to split it at the golden ratio.

Code: Select all

length = 100
a = 100 / 5 * 3 = 60
b = 100 - a = 40

Or you know the shorter section's length and want to add the longer section.

Code: Select all

b = 32
a = b / (1 - (5/3)) = 48
length = a + b = 80

But remember, this is only close to the real thing. If you ever want to work with the real golden ratio, then it is

Code: Select all

(1+5^0.5)/2 ~=1.6180339887498948482045868343656...
5^0.5 = squareroot of 5

Using this, the above mentioned examples would be

Code: Select all

length = 100
a = length / goldenratio = 61,803398874989484820458683436588
b = length - a = 38.196601125010515179541316563412

b = 32
a = b / ( 1 - goldenratio) = 51.777087639996635142546778699754
length = a + b = 83.777087639996635142546778699754

The good thing is, this works for areas as well, if the height of the divided rect is the same as 'a'. I made some example images that show how to build areas using the golden ratio.

At first I just knew I wanted a width of 800 pixels. So I used the formula and got 480 pixels for 'a'. In result the GUI will have the dimensions of 800x480, and split into two parts at golden ratio.
Next I splitted the larger section, this time vertically. While the split is golden, the resulting areas are not golden.
Next I splitted again the larger of the resulting sections, which makes the results golden.
Now the smaller section of the first split is splitted again, but with the larger resulting section on the left. It is not golden.
The last step is to add lines for you to see the three main parts of the GUI and how you would use the space to fill it with content.

Remember, splitting a line with the golden ratio makes the results golden. Splitting an area with the golden ratio makes the split golden, but the resulting areas are only golden if the larger section builds a square.

http://i.imgur.com/PB68iGx.png
http://i.imgur.com/GnqvTmJ.png
http://i.imgur.com/M3zMNiX.png
http://i.imgur.com/LiTvoQA.png
http://i.imgur.com/SFFUlZM.png

It's up to you now to decide if I should go on?

[Spogg]

Fascinating! Please carry on...

Maybe you could take a synth or effect off the forum and demo a before and after image to illustrate your points...
Maybe one that's mostly orange...

Cheers

Spogg

[RJHollins]

Thanks tulamide !

I'm following your post and hope to learn more about this important aspect

[kortezzzz]

tulamide,

Be sure I'm always open minded to hear new ideas or get any constructive criticism

Arranging is important aspect in designing and your guide is very helpful, but your original post headline says:"GUI Design", not "GUI arranging". So I thought you would like to discuss on designing in general. Sorry for the misunderstanding.

[tulamide]

tulamide,

Be sure I'm always open minded to hear new ideas or get any constructive criticism

Arranging is important aspect in designing and your guide is very helpful, but your original post headline says:"GUI Design", not "GUI arranging". So I thought you would like to discuss on designing in general. Sorry for the misunderstanding.

Hey kortezzz,

there's no need for an excuse. I would love to cover all aspects of GUI design, but I also want to start small. It just would be overwhelming if I'd bring up color theory, interaction concepts, layout, the use of human stereotypes related to seeing, alignment, shadows, font selection, and more at once.
Also, I just don't feel comfortable with using examples from a forum user, just to point out improvements. I would feel like a bully, pointing to weaknesses and showing somebody up. No, I really don't feel comfortable with it. Using outer sources makes me feel a lot easier with it.

[Spogg]

Also, I just don't feel comfortable with using examples from a forum user, just to point out improvements. I would feel like a bully, pointing to weaknesses and showing somebody up. No, I really don't feel comfortable with it. Using outer sources makes me feel a lot easier with it.

Hey, I personally would love it! I fully accept my "designs" are pure Scheiße. Any improvements would be interesting. However it's about what you feel comfortable with and that's fine

Cheers

Spogg

[tulamide]

Last time I introduced you to building up areas using the golden ratio. Of course that's not the only option you have. Let's once again refer to the first two screenshots.

Charlatan follows the classical column/row concept, where each column introduces a new topic and each row is a subtopic of the column's topic. There is a variation, row/column, where each row introduces a new topic with the columns providing the subtopics.
For both the structure is from left to right and top to bottom. That is following the non-asian reading/writing culture.

Dune 2 follows the centered concept, where the important topic is placed centered, with all other topics placed around it, symmetrical as possible. You will find this type of layout a lot in commercials/ads. Within the sections, left to right and top to bottom is the structure again.

Here are some GUIs following those concepts (Note: I'm not saying those are all good GUIs, I just want you to see the concepts in use).

Centered:
GUI for a non-existing VSTi
GUI from Toxic Biohazard
GUI from Punch

Row/Column:
GUI from Oberon Poly 4
GUI from Bliss Sampler
GUI from MEqualizer

Column/Row:
GUI from Tal U-No-Lx
GUI from Limiter Nr 6
GUI from VR-08 Pro


Finally here's an example for a really ugly VSTi. Can you already tell why?
GUI from Harmless
More about this GUI in the next post...

[Father]

Interesting subject. What do you think about this? http://rfmusic.net/images/vst/Dest3/ScreenShot1.jpg

[kortezzzz]

@Father

In my opinion, the GUI is well arranged, but:
1) Too dark - Its better to keep the contrast between dark and light colors higher as possible or at least, make a better mix of darky\bright colors.

2) The text font too small and hard to read - and when you add it to the darkness issue, you end up with a hard to control GUI that Antagonizes.

3) Some knobs are too small - I would use good organized tabs to handle all the GUI components instead of shrinking knobs to that size.

[tulamide]

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

However, since Kortezzzz (btw. sorry for almost always omitting one "z") already made some comments, this time, and only this time, I will also make some remarks. Please, don't force me to do that

I don't see an issue with the GUI being too dark. It has a lot to do with personal preference. On the Reaper stash, where people publish themes for Reaper, you can see that dark themes are just as welcomed as bright ones. Also, you are close to the optimum contrast, the signal light blue for the knobs was a good decision. Here's a comparison of your GUI without (left) and with (right) contrast correction:
http://i.imgur.com/FvhzrIc.jpg

I agree to the font being hard to read. 7-pt Arial with 45% transparency was not the best choice. However, you don't necessarily need to use a larger one. Any font can be made better readable by adding either an outline or shadow. Here's an example whith "Flanger" in original form, with a 1 px outline, black 50% transparency, and a 3 px shadow at 135 degree and 2 pixel offset, black 75% transparency:
http://i.imgur.com/IHNa54L.png

The shadowed one is what I'd personally prefer. And you can see that it is a lot more readable.

The other points are documented in the last image.
1. The noise gate is not horizontally aligned.
2. The boost and gain knobs from lofi and eq are way too small. For the boost knob you could just use what you did for other knobs as well - make a double controlled knob just like you did for input boost. For the eq it should be a knob of the same size as all other knobs in that row.
3. The eq on/off button isn't aligned.
4. The spacing between the knobs of the reverb does not match the spacing between all other knobs. Right align them if you're running out ouf space for the file selection above.
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
6. The filter switches of the delay should be centered between lp and hp
7. The offset knob isn't aligned.

http://i.imgur.com/SX8SLZW.png

In general I do understand some of the decisions you made. But, you should never give up a clear layout in favour of some graphical elements that don't really have a purpose (other than acting as seperators). I am also concerned that the GUI might be too stuffed overall - but then again it seems to be the third installment, so maybe your users expect that many information on one page.

Now please don't hate me...