Exploring Panel design

Hi all :wave: Been looking at trying a few vector knobs for a bit of practice and fun - here’s a version of one of the fundamentals (already awesome, but just used this panel for an easy/fun look see). Came out not too bad for a first try imho (im a UI designer by trade, but havent done much vector illustration work for a while) Very basic still here, and will keep on making new things and finessing…

10 Likes

Very spiffy!

Watch out for the copyright police, though. :wink:

1 Like

thanks!

Definitely not going to use it or publish it or anything - this was strictly just for a bit of practice!! I’m very happy with the current VCV base ui as it is

Looks good indeed. There’s some great modules out there that could use some work in the UI department (Prism comes immediately to mind). You may want to reach out and see if anyone is interested in having you do some module skinning for them (assuming you even want to).

2 Likes

thanks a lot! Yep that was my plan actually… getting skilled up a bit on how the module designs work and then offering my services to skin some up (if anyone would be interested). I’ve been a ui designer forever (it seems) so fairly easy for me to do this stuff - and the fact that im using VCV daily makes it that much more interesting as a side project!

2 Likes

if the prism dev or anyone else is interested in having me look at anything let me know

1 Like

@johnhoar

The screws not at 90º triggers me a bit but his looks very professional.

My only advice would be to tone down a bit the gradients. They look good but a flat UI is better for usability in rack.

https://vcvrack.com/manual/Panel.html

Triggered by the angle myself, all the same screw, I like to use different screw rotations.

@lomasmodules @Coirt

You guys are easily triggered. There are a boatload of modules out there right now that should be triggering you out of your minds! :crazy_face::crazy_face::crazy_face::crazy_face:

6 Likes

I did some module interfaces for one developer. They turned out so-so. I cold-called another developer, offering my services. Was politely turned way.

1 Like

now this would be a proper dark version of fundamental modules… if only :heart_eyes:

1 Like

damn screws :joy: getting in the way! yeah i hear ya on the gradients too - they are only 2 color but Ive redone them even simpler now, with the same feel. Probably wont upload any more bits until i have something more unique again id be happy to look at anyone who needs some panel ui design help!

1 Like

I am a graphic designer and a fellow VCV lover. I admittedly have almost no experience in coding, however, I am so incredibly curious about whether or not I can add into VCV’s amazing creative community. I have found that many of the modules in VCV are a little (more than a little) visually confusing or busy. With all that said, I am just looking for where to start.

I have some questions and not a lot of answers.

Would the creation of .svg files be enough for module creators to implement? is it far more intensive (and code-driven) than that?

If it is code-intensive, are there any coders out there who might want to team up with graphic designers?

This looks really nice! what vector drawing tool do you use, if I may ask?

There’s a few things to know:

  • Nanovg, VCV’s rendering engine, only implements a small subset of SVG. Many basic features break. You can’t import something straight out of Inkscape/Illustrator/etc. and have it work. You can’t even import complex shapes and have them work: often they break mysteriously and require edits. And the performance is very poor compared to how a web browser renders SVG. It’s the main reason so many modules have minimalist looks: nobody wants to bother with all those quirks.
  • A lot of things are hardcoded. Some modules don’t even use SVG files at all and do all their rendering from code. How easy it will be to collab with a developer depends on their process.
  • The placement of widgets (jacks, buttons, knobs, etc) is done in code. There is a helper script, but it’s only useful if you have a very formal development process, where everything is specified and designed before you start coding. Except for ports of real hardware, that’s never the case, of course. But if your coding process is exploratory, it also can make it easy to move around logical blocks until you’re happy with them. For example, for this module, I only define the position of elements of a node once, then place 16 copies of it, and I also have smaller variants of this module sharing code.

[Undeleting this post since it was replied to but the conversation is in this thread: Looking for a graphic designer ]

1 Like

Interesting. Thanks for the help. Like I said I don’t really have any idea what to expect/what is possible so this was super helpful! Also, your modules are visually super unique! Keep up the awesome work. Its the creators like you that continue to make VCV better. :slight_smile:

1 Like