GUI Design

[tulamide]

Often times there are technically brilliant Flowstone VSts, but people don't get attracted just because of a bad or quick designed GUI. Therefore I thought we could use this thread to post screens of well-designed GUIs, as an inspiration or maybe just to learn what distinguishes mediocre from brilliant.

The first screen is from a synth called Charlatan:
http://www.soundandrecording.de/wp-content/uploads/2015/05/charlatanv2.png

Pros:
+ High contrast
+ Clean and tidy surface
+ Well structured

Cons:
- The glide part of the global section is a tiny bit too stuffed. A three-letter-naming would have been better

[tulamide]

The next screen is from Audio Dune 2:
http://www.synapse-audio.com/layout/screens/dune2.jpg

Pros:
+ High contrast
+ Clean and tidy surface
+ Well structured

Cons:
- The 8 tabs can be a bit overwhelming. However, this way you don't see what you don't need, so it is an acceptable compromise.

[Spogg]

I like the idea for this thread.

I'm always envious of the individuals who can not only design a great synth or effect but also make it look appealing and then, icing on the cake, make a huge range of varied and useful presets.
It seems to me that, often, not all these skills are present in one person and I'm sure the big players have dedicated graphic designers and sound designers to share the load according to talent.
Most of my effort, time and ability goes towards making a synth or effect actually work reliably and do what I have in mind. I have no idea how to create an appealing look to a product and can only look at others' stuff with envy and wonder at how they thought of their schemes, and then implemented them too.

If anyone with graphics talent reading this ever wants to re-skin one of my projects that would be amazing for me to see!
With Flowstone and Knobman we/I have the tools, now I just need the time and talent! So if anyone can describe a good procedural method to skin a synth (like say doing the background first for example) that might help me considerably.

Cheers

Spogg

[tulamide]

...make it look appealing...

Graphic design is a serious job. It is all about symmetry. There are different kinds of symmetry, and people may have heard of the proportio divina ("golden ratio"), which is even very mathematical:

Code: Select all

a : b = a+b : a

How well thought and layed out, and how symmetrical the first GUI from Charlatan really is, can be seen from this second picture. I added a few lines and squares to make it more obvious:

charlatan_sym.png (41.37 KiB) Viewed 25826 times

Btw, the small buttons are divided by the line at exactly a third - not a coincidence. And I'm sure the designer made the layout when he was told the texts besides the small buttons would all be 3 letters.

It's by far not all there is, but it gives you a hint to how many thoughts go into a good design. It is not just pretty knobs

[KG_is_back]

Thanks tulamide, this is extremely helpful to a guy (me) who's GUIs look like 2nd grade drawings from Windows Painting. I always make my knobs in similar fashion to old Waves plugins.
Basically just a rectangle with number in it, that can be dragged by left-drag or text-edited by right click. For me personally it's way more practical for things like frequencies on EQ or threshold on compressor. I do not know if other people feel that way too. Maybe it's just me - a guy that does not like to work with analog gear. It's perhaps a professional defect that it is much more intuitive for me to write "-6db" than turing a knob half way down.

[RJHollins]

Hi GANG,

After having a power surge that took out my motherboard, graphics card ... I'm Ssowly getting my new computer online. Yeah.

I went with the i7-5820K processor, 16 GIG Ram, MSI motherboard. I also went with Win-7 Pro [later upgrade to free Win-10 upgrade later down the road].

Will be very curious how FlowStone is going to behave on my new system. Anything to keep mindful of ??? Issues ???

To the topic:

GUI design is so very important to workflow and functionality. Wish I had better skills at it.

Mention of the 'Golden Ratio' .... I wonder ... is it possible to make a FS module that would overlay on a design? I remember in some graphics apps that had a 're-sizable' overlay that provided a visual guide. Found it quite useful.

Just an idea for FS thought.

Can't wait to get back to some new projects.

[tulamide]

Basically just a rectangle with number in it, that can be dragged by left-drag or text-edited by right click. For me personally it's way more practical for things like frequencies on EQ or threshold on compressor. I do not know if other people feel that way too. Maybe it's just me - a guy that does not like to work with analog gear. It's perhaps a professional defect that it is much more intuitive for me to write "-6db" than turing a knob half way down.

It is not just you. It was just an evolution. In the very first beginning, VST had no graphical interface - just a bunch of sliders provided by the DAW. But the producers of instruments wanted to be different from each other, so graphics were added. But those first instruments were digital re-creations of analog gear. So GUI reflected it, and at some time it just was normal to use graphics that remind of a hardware.
It was appropriate back then, but nowadays the vst instuments are most often originals. Instruments that are born on a pc, expected to be used on a pc and using advantages of a pc (for example, scaling GUIs). There isn't really any need for hardware reminding graphics. And it will change over time. I am a huge fan of non-hardware reminding design (you can tell from my own uploads on GURU or here) and think they are the future.

Who wants to argue, when seeing this beautiful GUI:
http://www.audiodamage.com/images/prodimg/screenshot/Basic_SS.png

About your knobs = rectangle example: There are two general guidelines in design, that are very simple to say and hard to manage:
1. Form follows function
2. Function follows form
Don't try to mix both, it won't be any good then.

Your rectangle is an example of 1. and is just as valid as 2. But also think of a user: When there's a synth, he probably wants to automate a parameter sometime. And he needs visual feedback then. What would be the better feedback: Quick changing numbers at the same spot, or something that moves (wether on one axis or circular)?

You see it isn't always easy to make the GUI you like with a responsive feedback the user needs

[Spogg]

I went with the i7-5820K processor, 16 GIG Ram, MSI motherboard. I also went with Win-7 Pro [later upgrade to free Win-10 upgrade later down the road].

Will be very curious how FlowStone is going to behave on my new system. Anything to keep mindful of ??? Issues ???

Since I see it'll have 16 Gig of RAM I assume the rig will be 64 bit. I'm just curious to know how FS will behave in the long run on 64 bit Windows; more or fewer crashes for instance...

Cheers

Spogg

[kortezzzz]

Well, I have a little different attitude. I love it BIG, clear, easy to work with\to learn and a little kitschy\ornate design. My designs never try to simulate real hardware or something but actually look like a parody of the reality . I always prefer to ease the usage as possible and keep the learning curve dead low, so I use the designing as tool to achieve this target.

Here are some of them:

http://postimg.org/gallery/knq5lrws/

http://postimg.org/gallery/1xse47898/

http://postimg.org/gallery/uhgjq2do/

and my latest one, a real time arranger style drummer + sampler (the midi piano-roll coded and designed by nubeat7):
http://postimg.org/gallery/3bfw54z2k/

[tulamide]

Thanks Kortezzz, I appreciate your input. Maybe I wasn't clear enough about it, so let me point this out: This thread was not meant to favour any graphics. It is about how to arrange them on a given space. This is also known as layout. And no matter if you use a modern flat design, 80's inspired buttons or a parody of reality, they all share the same rules and guidelines for the layout.

Regarding the layout there would be a few things you could improve in your designs. But I'm not sure if you want me to point them out, and to prevent any misunderstandings I will pass on it