I’m still learning JUCE but the Graphics tutorial got me thinking: do people really use this for professional plugins? Everything I can do with it looks so basic and ugly. Where can I actually get professional looking art assets like knobs, meters, etc. that I can just animate with the JUCE engine? (even though I really have no idea how to do that yet)
You have quite a few options, but overriding the LookAndFeel functions are what I do most (the last option below). Here are some possibilities:
Using PNGs (you can also use SVGs)
An example just using what JUCE provides (LookAndFeel class)
This question has both, a technical and a design skills aspect. My Experience is that hiring or working together with a designer who drafts the UI for you can be a great thing in order to create professional looking user interfaces. I experienced two basic workflows:
- All the single GUI elements are exported as images / vector graphics and you can load them as
Imageobjects in your plugin. To customize e.g. Sliders and Buttons just create a custom LookAndFeel subclass that uses those images, for more custom types of Components, just draw them directly in the paint routine. This approach works very well for more photorealistic UI designs.
- The drafts contain very specific information on all aspects of the elements, e.g. colour codes, dimensions, line thickness, corner raduis, fonts used, etc. so that you can basically recreate a draft made up in e.g. Adobe Illustrator with pure JUCE drawing commands, Paths, etc. Small, more complicated icons can be imported as SVGs. This approach works very well for flat UI designs.
Both approaches always end up in results I can totally handle and understand implementation wise but which would have never been so good looking if I tried to design it myself. I’m not aware of pre-designed JUCE components that can be bought somewhere, so I’d propose to just hire someone to design it for you. If you only need some good looking audio specific icons, this might help you https://github.com/fefanto/fontaudio
Important, if you design your UI and if you use assets from a graphic designer, that everything fits. If the different controls have different margins, it is unnecessary cumbersome to fix that in UI components placement.
Also the quest to “professional looking” UI is very subjective. Some say Photoshop-photo-realism is professionsal, others say that’s 80s and blurry, and trust in flat design, while others have best results in user engagement with a comic style…
1st: trust your instict
2nd: make mockups and ask as many as possible for their opinions
3rd: take all into account and still do your thing, there are always many ways
The default graphics stuff that comes with JUCE: it’s good for a mock up.
Here’s one of ours using JUCE Slider and Button but with custom look and feel written entirely with JUCE fillEllipse, fillRoundedRectangle, drawText and gradient fills:
Oh and Path for the arc around the knobs.
The logos are SVGs I think. Rendered using juce::Drawable.
The trick I find is to draw the control you want in a drawing program. If you draw it yourself you know how it was put together and then you can replicate it pretty quick with fills and juce graphics methods. And you can build shadows and effects in the drawing software that you know will be ok when translated to code and not a massive pain in the arse
Here you have nice UI kits ready to use:
What do these deliver? Are they easy to integrate into juce?
Looks like you’d need some film-strip-knob code:
thx. yeah, I got in touch with them. looks like so far they’re only doing bitmap renders (they have some svg ones in progress), which concerns me a bit when using dynamic layouts due to assets being scaled. their stuff looks good. shame they don’t do a 1-knob trial pack or something…
Accidentally clicked on the link to your website Lee! Your music sounds like my old raving days … back in Brixton
ha. nice one. had some damn fine nights out round Brixton myself
wow, this looks great! ok this gives me more hope for the JUCE graphics. I think I’ll just stick with creating my own for now. Will probably learn a lot more as well in the process
@jimc that GUI looks dope
I think that what most people struggle with (in GUI design) isn’t “how can I do X in JUCE” but rather in the design part itself that happens before the coding part, on how to achieve something beautiful, neat and functional. Once you got that, implementing it in JUCE it’s rather trivial
I agree. Finding inspiration for a good design without straight up copying another designer’s work can be very hard.
What adds to the dificulty is that the audio industry has a very unique and niche design language so finding sources of inspiration can be challenging. You don’t often find ‘knob’ style sliders outside of audio applications and so searching for 'good looking knobs` in Google doesn’t give the results you’d hope for…
This is absolutely the trick to not looking like naff programmer art. If you can’t draw it and make it look good you sure as hell aren’t going to be able to code it!