Custom UI Design

Hi,
I have a couple of questions regarding custom ui design:
I want to create a VST/AU plugin with an UI like Serum or Spire have, beautiful and professional looking.

How do I archieve it with Juce? Do I use the builtin controls and customize/subclass them?
Do I need to write my own widgets/controls based on Component?

What plugins with beautiful and/or advanced custom UIs built with Juce do you know of?

Are there open source projects / git repos based on Juce that provide custom ui, where I can learn from?

The appearance of your UI is independent of using JUCE or not. JUCE makes it easy to build various plugins with one set of code, though. As for how to get a “professional” appearance, I’d suggest hiring a UI designer, or at least a graphic artist, to make bitmaps for you. You’d have one or more bitmaps for the plugin background, plus bitmaps for the on and off states of buttons, and animations (of some sort, perhaps just arrays bitmaps you index into) for sliders/knobs.

There are many ways to create a UI… JUCE is a GUI abstraction as well, not only abstracting the plugin SDKs.

About how a “professional” UI should look like and should be done, can be debated for hours if not lifetimes. IMHO for instance you should no longer use Bitmaps, because they will inevitably look blurry. This has to do with having to scale for different DPI on monitors or other reasons.

Also if skeuomorphic or flat is state of the art, or sells better, is also an unsolved topic.

JUCE delegates all drawing into “LookAndFeel” classes. There are a few to choose from, but I think most agree, there is room for improvement. So either you write your own drawing code by inheriting one of these LookAndFeel classes, or you get somebody designing you your bespoke widget set.

From that point you can simply plug them together like toy building blocks. Granted, you might want additional stuff like visualisers, since you mention Serum, this 3D-like wavetable view you will probably have to write yourself as well…

But I would suggest, start with the available widgets, and once you are happy with your plugin and what it does, do the next step and brush it up. Don’t waste too much time on UI at the beginning, you will change it several time while developing…

3 Likes

ok, i’ll take a deeper look in the look&fee-classes. what would you suggest instead of using bitmaps? Is it possive to use vectors like svg? What’s about delivering 2 sets of images (low/high-res) like you do on mobile devicses for dpi-adaptation? When you speak about bespoke widgets, do I create these with Juce, too?

A quick search revealed this playlist on YouTube:

Probably the most relevant episodes for you are 06 and 08, but if you are new to JUCE, I guess having a look at them from the beginning will give you a better understanding of what you’re working with.

edit: is this work from @JoshuaHodge ?

3 Likes

I wouldn’t say the don’t-use-bitmaps rule is a hard one. My designer has achieved some very good results using a base layer that is bitmapped essentially for texture, with SVG elements layered on top so that the areas of the background needing to be pin-sharp (i.e edging mainly) are drawn on top and scale well at arbitrary sizes. It’s a bit of a smoke-and-mirrors thing and isn’t infinitely scalable, but works well if you have a skilled designer and define your requirements properly at the start. We tend to do our dials etc in vector layered on top of more a complex SVG background, and I translate aspects of his designs into code as required once we’ve settled on a scheme that works in combination.

Take home advice - find a talented designer that you can work with well, go through the trial and error of what you want to achieve and find out how best to do it, and you can achieve some very good results. It does require some time and experimentation to get there.

1 Like

The trick is to have an immaculate drawing of what the product should look like. Several drawings if it’s got lots of screens or complex resizing behaviour.

Everything after that is just programming… and you can get help easily on that when you need it.

1 Like

+1 to that, having pixel-perfect mockups of your UI saves a lot of time and energy, as you don’t have to make design decisions while programming, just work out how to get your output to match the designs.

1 Like

wow, that’s a lot of good advices. Thanks for that! Really appreciate it. I most likely will do the graphics on my own. Since I have some experience with vector-graphics/Affinity Designer, I will focus on this path. I thinks, it’s even a good place to start for making raw but accurate mockups and then break it down from there.