Improve style of nodes and cables

  1. Observe Vuo UI as per 0.5.0
  2. Observe @vade critique and refinement linked in and photoshopped at
  3. Draft proposal UI, attached
  4. Go back to Vuo UI 0.5.0…

Offered in a positive spirit!

Disclaimer: this is obviously to my aesthetic taste, a kind of tobyspark barebones default.

What’s important: This clarifies the data and event handling of the graph. It communicates what is going on better, using fewer concepts. Execution aka events is the two pixel black line. Nodes are outlined in this – they execute! – and any port data or patch cable touching this will gain the 2px line and transmit events. If data ports transmit events, they touch the node. If they don’t, they’re held slightly away from the node; an insulation gap.

I haven’t addressed port doors. You could do a graphic something, but I’d suggest not rendering doors as doors rather than the actual state of the port – wall or not, as defined by ie. the select input – fails your goal of no mystery meat.

Design is an iterative endeavour, so I’ve uploaded the original keynote file if anybody wants to have a crack at it. Vade’s design is on master slide ‘Blank - copy’ if you want to revisit the vuo 0.5 design to trace off etc.


Signka font family used in Keynote.

Free download (legit I think)

Signika is also in the vuo source download. Be interested to see any tweaks or hear any thoughts.

this is an interesting discussion i completly missed, espcially since im working in UX design.
the small changes in vades mockup are alreaday a great improvement.
your changes to the nodes header look quite helpful aswell.

i will take another look at the discussion and maybe add my 2 cents later.

btw: i also missed the whole discussion on facebook because i dont use it, could you all try posting here instead of facebook for us outsiders :D - or can we feed the facebook discussions in here somehow?


Steve provided a PDF thread of the Facebook discussion on this related node.

I could probably write an entire book about my opinions on this (and if Team Vuo gets me email today, that book has clearly already been started…sorry!), but here are a few quick notes regarding cables, node attachments, and (hopefully) improving the visual communication:

Ultimately it’s still many times more complicated than Quartz Composer nodes (or the nodes in Lightwave, or the nodes in Shake, or…). This sort of complexity and micromanaging destroys productivity, and I’ll be honest, I’m apprehensive about using this kind of setup day-to-day…but I guess we’ll see how things progress from here.  

Not a fan of that design Iaian7 - the silhouette is far to complicated and noisy. Why not put those shapes ‘within’ the rectangle, only visible when hovering or attempting to connect, etc? With a lot of nodes, zoomed out, you will see a series of zig zagged lines etc.

I still think this needs serious work, Vuo is currently very ‘noisy’ visually.

What needs to happen to move this feature request out of ‘Waiting for more information from reporter’ ?

What does Team Vuo need to expedite a UI overhaul to the nodes / cables? Seriously.

Many thanks for all of the thoughtful feedback on this subject! We hope you noticed that we made several changes to the visual design in Vuo 0.6.0, some of which are demonstrated in the release video, and the full details are in the Vuo 0.6.0 release notes. All of your suggestions have been noted and will be used as a reference as we continue to develop and refine Vuo. Since this is more of an ongoing evolution than a specific feature request that can be analyzed and funded, we’re going to table this request. If you have more suggestions or ideas, we’d love to hear them. Going forward, please email us directly with any feedback you might have so we can reference your suggestions in our ongoing plans.


Thanks for the reply. Better late than never, eh!

Vuo 0.6.0 is indeed better. Glad this prompted some thought and development cycles.

I’m amazed by the hardcore engineering that underpins Vuo (and I’m not just saying that). I’m happy that Team Vuo are getting these underpinnings and ‘battle testing’ node functionality as first priority. I worry that you guys are either not communicating the work that is going to be done on Vuo’s user-experience, and setting up collaboration with your community appropriately, or – fatally – that you guys have a blind spot to it.

My personal opinion is that if Vuo is going to be taken seriously by the wider world, it needs a thorough visual overhaul. That starts with the VuoRenderer* classes, some of the assumptions in how you’ve factored them, and extends to the UI of the editor application itself.

I think this isn’t a ‘nice thing’, it’s a requisite quality of a tool for creating aesthetic experiences. I’m happy in code. I like dipping into the engineering. But I’m in the minority. For the market you’ve set out for with Vuo, it’s an issue of acceptance, partnership, trust.

Thanks again for all your input, Toby. And very sorry for the delay — that was my fault. Excited that you’re appreciating the underpinnings. It’s clear that you care, and that you’re concerned. If you have specific suggestions (in addition to the ones you’ve already made) in regard to the “user experience” or “visual overhaul,” that I can reference, please do email them. Thanks again.