Natron UI (Re-)Design Proposal

On the topic of “redesign”, what about just a style update? It took me ~20min to improve the UI (IMHO).

Default:


New:

Yes several things are not styled properly (icons etc) and some colors are off, but that can easily get fixed with more time. Note that sliders, checkboxes and comboboxes are hard-coded in Natron, takes a bit more time, but not hard.

5 Likes

Yeah. I also think that some styling can make UI nicer. I don’t know what’s possible, but in this sample already was able to see how small things like better sized texts in tabs and removing unnecessary frames in some UI elements makes tidier look.

This could be 1st step to adjust it as good as possible this way. Is it possible to adjust positioning of Properties panel texts? Those are sometimes hidden under checkboxes unless making the panel very large and in many cases could be better vertically aligned.

Natron_properties-text_positioning

Also, how difficult it is to update UI icons with new ones if would make new set fitting on possible newly styled theme? I think some work on icons could be done to refine and some for me are not the best for the function. Not meaning to redo node icons, but in Viewer pane

Examples:

  • Show/hide infobar icon in viewer → looks like: Color picker
  • Scale image to viewer size → looks like: Zoom In
  • Force re-render frame → looks like: Recycle (this type is very minor, but affects overall feel)

Natron_icons

Kind of following the UI discussion: Is there possibility to make Natron start in fullscreen mode in dual display setup? I have saved default layout (long time ago) which opens viewer and properties in main monitor and node graph in second. But neither of those expands full screen on startup. In second monitor I can’t make the window fullscreen anyway as floating panes don’t have fullscreen icon. (Windows 10)

The UI is made to scale, this has the downside that things get hidden etc, should be looked at.

Easy, all the icons are located in Natron/Gui/Resources/Images at RB-2.3 · NatronGitHub/Natron · GitHub

I will need to look at that, not starting in fullscreen when it’s selected should be considered a bug.

Cool to see that icons are very easily replaceable. I plan to take a look myself what could be done by trying alternative design on few selected icons as a start. Also @Songtech-0912 and anyone else welcome to do own take on those if like, as this is something we non-developer’s can try to contribute.

Overall I’d like to see also a bit lighter scheme like Songtech’s, but that can be tested with changing Natron’s colors in Preferences even if can’t adjust anything else. Very dark grey is professional look, but I think less approachable by average user and not necessary unless grading shots.

I believe that I (or anyone else) could do styling work if Rodlie won’t have time to do refining, but at least I’d need a bit guidance where and how to change in code. At the moment I have no clue how to get even started, but I’ve done similar job in JavaScript and CSS without any prior knowledge, so I know it’s possible if just get head around it and bit learning.

1 Like

I will create a new branch in my personal fork where I will do some changes related to the UI, anyone is welcome to contribute (or just give feedback). I will probably upload the branch (as a WIP) sometime next week, depending on my free time.

Note that I’m not against what others here have talked about or is planning, you are all free to do whatever you want. I just want to keep it simple, no re-design (I will leave that to others, I don’t have the time or any desire to do that), just fix the current state of the UI, which (to be honest) does not look that great, but has also never been a priority.

4 Likes

@rodlie I would be interested in contributing to this where I can in the coming months, I think a stylesheet and icon overhaul / update would be the best solution to Natron’s general lack of UI polish. Your stylesheet is already a big improvement.

My pitch would be to integrate Blender’s theming where applicable and make adjustments when it makes sense to due to the completely seperate nature of the application. Blender’s icon style and other similar elements (checkboxes, dropdowns, tooltips) are really great and making it match would not only separate Natron from Nuke a little bit but also could help new users that are already familiar with the software. The node-graph and other elements that Blender handles differently will need to be done separately.

There are some possible problems with this approach:

  1. Icons that do one thing in Blender should ideally do the same thing in Natron if we are to adopt their icons. If they do different things then that’s confusing and nobody is happy, we may just end up having to draw a bunch of new icons that fit the style but there is likely a substantial amount of overlap

  2. Legal issues? Blender is licensed under the GPL, I assume that means we’re cool?

  3. Future parity, if Blender changes their icons do we change our icons?

Would be interested in what other users think. This seems like a much better option than a complete overhaul to me, other UX issues can be dealt with on a per-item basis in the future.

@Shrinks99 I agree that a minor UI overhaul would work best for now. We could use Blender’s theming (as you suggested), but I think we should modify the icons a bit to suit Natron better. And changing default colors/icons would be nice; we could base it off something like Atom’s onedark theme.

I also have an idea (that’s a bit of a long shot): what if we can each create different themes for Natron? Each theme would be an archive with a .qss file and SVG icons. We can have a dedicated “theme” section of the Natron website where you can download user-submitted themes. Yes, I understand the UI isn’t exactly a priority; but a community-provided theme collection would show that the community is thriving and well.

Hey different themes would be cool! Usually when software projects do this they run into the issue of maintenance, user-created content doesn’t always get updated consistently over many updates. Fortunately (I guess) for the moment Natron is moving somewhat slowly so hey, there’s an upside to that!

Good to hear there is interest to do update the best we can. Just for icon style discussion I made few random samples how I’d feel those could look like. Just as a sample to continue discussion, so I’m not sad if nobody likes. :wink:

Top line is inactive, bottom active.

natron_icons_v00a_sp

My branch will be at Commits · rodlie/Natron · GitHub

There is nothing to see yet, I’m currently focusing on the code (prep widgets for styling etc).

Good, maybe this leads to something.

I couldn’t leave my icons to 1st draft, so did small refinement for easier judging of this style.

natron_icons_v00b_sp

EDIT: Still got to come back to computer to test myself with UI overlay on Natron, so here is for others to see as well. Top is my icons and bottom is Natron normal icons. I tested replacing arrows on 2 icons with dots, which would be nicer design wise, but might not be clear enough for users.

EDIT 2: Got a break from other things, so tried out node category icons. Those could be introduced with some color also, but now just monochrome. Below image is updated in case someone saw the previous one.

1 Like

@Saku Your designs are very good, but I would suggest that you reduce the border rounding. I also personally think that the icons are slightly too big. If you prefer the icons as they are, you don’t have to change them; I’ll be making my own icons theme based my design preferences.

Sure, discussion is very welcome. This is just my personal overall idea to make one look for all icons and keep it minimalistic. Details needs to be refined for sure. It’s also good if you have your own take on icons as then there’s something to compare and end result is better.

My icons are vectors, so it’s simple to change sizes, rounded corners and line thicknesses. I can also share my Inkscape .svg file if anyone likes to play around.

Minor change on node category icons on left to test smaller border rounding and slightly thinner lines. Also another option for Filters icon.

I did over-use blender’s compositor a couple years ago, I went as far as to align the camera to a material to perfectly align with a polygon and used the nodes on the materials like you do the compositor to do what the compositor didn’t. I made a bunch of setups for 2d rim lighting and other similar things. That said moving to natron felt very natural. AND I must say I agree having the freedom to build any direction, I do appreciate.

@all Here’s another update:

I think the enthusiasm around improving Natron’s UI/UX is great, even if this group is relatively small. However, as the school year has started, I’m less able to focus on doing UI/UX design.

For this reason, I’ve posted my unfinished Inkscape files (they are SVGs) to my design repo here. Please add to the designs and make your improvements.

I will take a look what you have done probably this weekend or next week. I haven’t proceed further with my own icon tests, as would want to test adding those in test Natron build with some styling changes as well, which I believe I could grasp quite quickly how to do.

Unfortunately I’m totally stuck trying to get Natron build to work due to my inexperience of build setups. Can’t blame instructions though, as those seem very clear and I’m just doing something wrong.

1 Like

@Saku I’ll also try to work with Natron’s UI source code, but seeing as I’m just starting to learn Qt, that might not be so soon. In the meantime, I’ll continue work with the website.

Another Update

I’ve started creating the 4th concept for Natron’s UI. The design is rudimentary, because its design system (custom-made for a modern Natron UI) isn’t yet finished.

I tried to make it look more like vanilla Natron, such as using similar sliders, and preserving the original layout (mostly). I took inspiration from Blender’s modifier stack redesign for the properties panel. And, after using Natron for a while, I’ve found a media bin/recently used nodes library to be a useful (possible) feature.

I’d like to hear some opinions on how I should go forward. Are the dividers distracting? Are the buttons too compact or not compact enough? Is there enough visual hierarchy?

Your feedback will greatly help me improve the design, so please tell me about what you think.

Another update to the Natron Community:

I have prepared two preliminary designs for the Natron UI 4.0 Design. I say preliminary because it’s just one of several UI mockups I’ll be submitting for community feedback. Think of this like software testing in alpha.

Here’s the design:

Expanded version

Collapsed Version

Notable changes:

  • Complete overhaul of the viewer panel, with compact buttons and a distractionless workspace
  • Removal of material design elements, such as excessive padding in sliders
  • Fewer dividers (but mostly as a personal preference)
  • Redesign of the nodes (WIP), aiming to look more like Natron’s default
  • Title bar cleaned up, inspired by the Atom and VS Code titlebars
  • New Color Scheme, based on Adobe XD’s dark theme
  • Optional toggleable sidebar, which incorporates both the default toolbar and the new “footage” tab

This serves to incorporate the feedback from last time, and I would say that it’s almost possible to use this as the default Natron UI.

Now, I do realize that not everything’s been fixed. Major areas in need of improvement include:

  • Incomplete design system
  • Timeline (which is bad from both a design and ergonomics standpoint)
  • Alignment and spacing
  • Color scheme - too many colors
  • Scaling of icons and text
  • No animations (yet!)
  • Might be too complex for Qt widgets alone and might require QML to work

What do you think? Please give your opinions on this survey form. I really do appreciate your feedback, be it positive or negative.