The second page is now done. Here are two design drafts for what it might look like:
I’m not entirely satisfied with the result, but I can’t think of a better design. Any suggestions to improve the design would be welcomed.
While work is ongoing for the rest of the website mockup, here’s another concept for a possible Natron theme.
This design tries to keep Natron’s layouts, positioning and interface components intact. There are minimal changes, limited mostly to the color scheme, icons, and styling of buttons and panels — hence the name “minimalist theme”. Because it preserve’s Natron’s elements’ original placement, it is compact and should be well-suited for Natron’s technical nature.
It should be possible to make this with some modifications to Natron’s QSS stylesheet. I’ll be looking into Natron’s QSS to see if I can implement it in Qt. In addition, this mockup is an actual SVG file, so if anyone’s interested in participating, just download this file and open it in Inkscape to make your changes.
3 Likes
@all back with news on the website redesign! This time, another modern-looking mockup for you guys:
Some of you might wonder why I started from scratch. The answer is that the in-development design wasn’t up to par with my standards. Because I wanted to create a website for Natron that would clearly be superior (in design terms) to the old one, not just somewhat better. If Natron can have a website that looks as good (or even better) than After Effects’s or Nuke’s, people might start getting interested in Natron itself.
Please tell me how you feel about this design - is it better than the old one? Any recommended changes? I’ll be willing to listen to any ideas.
3 Likes
Looks like a much better start than the last one already! I don’t think the gallery is especially valuable here and I liked the hero section having a background image but other than that this looks very nice. You could probably bump up the smallest type size to the size of the copy at the bottom and stick with that size for body text. I like the button colours and page colour scheme, the red is a little dull but a small bump to its brightness and saturation would make it stand out a little more as an h1 type title. I think I’d also increase the radius of the rounded corners on the buttons, right now they exist in the awkward “almost fully rounded but not quite” state, personally I prefer a more squared off or fully rounded look for buttons.
Content wise ditch the “blog” page as this already has “news” and Natron absolutely doesn’t have the content for both of those. Copy will of course be decided upon later.
If Natron can have a website that looks as good (or even better) than After Effects’s or Nuke’s, people might start getting interested in Natron itself.
Completely agree, this website is the first impression that people have of the program, it’s important that it looks great.
@Shrinks99 Thanks for the tips! I’ll start implementing them ASAP. Some things to point out:
- Yes, the gallery probably isn’t the best thing to put there, but adding the usual SVG there or an animated UI mockup like so many visual design applications doesn’t feel right
- I’m still trying to fit that original background image somewhere, though probably as a fullscreen image rather than a background gradient
- Feel free to make your own mockups (if you have time to) to demonstrate your design concepts
Wish I had time to offer more than crits right now haha! Hopefully I’ll be able to start mid December.
After spending most of today for the Natron UI redesign, I’ve finally finished the design of the website. Here are some mockups:
This comes with a lot of improvements:
- More reasonably sized gallery
- Changed red accent color to something a bit brighter (and more saturated)
- Improved white space in the hero section
- Fixed the badly-rounded buttons — they are now fully rounded
- Removed “blog” link and changed it to “features”
- Lots of streamlining (small tweaks to the positioning, size and form of elements)
Unfortunately, due to issues with GitHub, the source SVGs for this design are still unavailable. Once I’m able to solve my git issue, I’ll include the link to the SVG.
As the design is now finished, I will begin writing the HTML with Tailwind CSS. There will definitely be parallax and animations implemented once the coding starts. Jekyll support is expected to come soon as well. The website prototype will be open-source, hosted on GitHub, and open to contributions of any type.
The most urgent issue right now is the lack of good Natron renders. My dependency on Unsplash and Blender renders just doesn’t give enough personality to the images. However, that wouldn’t affect the website
Once I’ve finished the website (hopefully in 3 weeks), I hope that the community can start giving feedback on the website. I’ll have to optimize images, perform load speed tests, and do user testing, hopefully without needing to implement analytics. If all goes well, and the website is approved by the Natron community leaders, then Natron will have a shining new homepage by Christmas.
At any rate, I’m incredibly pleased to see the project having progressed so far. Any comments would be greatly appreciated.
1 Like
- New red: I like it!
- Feature cards on the homepage: Would like other’s feedback! If we’re doing a dedicated features page (not a bad plan) should we highlight some key ones or axe it and focus on the dedicated page?
- Gallery below the hero section: I’m still not sure what this is really supposed to be, are we highlighting things made in Natron or are these going to be UI pictures? I think I would still prefer to do something more like Blender or Houdini with their hero image integrating into the splash screen and changing when versions update. This doesn’t have to be something that Natron implements every version change (because of course then you need to find new work every time
but that would be cool for the future… - Download section: Good stuff!
- Cards: Are these cards? The fact that you’ve got “What are you waiting for” duplicated leads me to think they’re individual artboards or something that you’ve exported which is all well and good and if they’re not intended to be cards I guess that makes sense, if they are intended to be cards the spacing between them seems a little large though it’s hard for me to gauge this without all these images being one thing so I can load it up in a browser window. I could stitch them together but I’m also not going to because I am lazy.
- Footer: Do we want one of those? I like me a good footer.
As for Tailwind it looks pretty slick but there are some considerations to make here that @rodlie and @devernay should really be involved in. This website needs to maintain existing GitHub Pages support and work with their build environment. Tailwind is also an additional dependency to worry about compared to regular old SASS, I’ll leave that to the rest of you to figure out though.
I would also not put a strict timeline on things just yet, I don’t think three weeks is unreasonable or anything, just don’t be disappointed if it takes longer with some review rounds before we even get to code! Speaking of which, do you have SVGs anywhere for this one?
@Shrinks99 Some clarifications:
- Original SVG: It’s now available! Download it here. Be aware of two things though:
- It’s a massive file (>7MB) because of all the embedded images. Not much I can do about that, because the website would need full-res images for optimal experience.
- You need the Inter font installed (with all weights). Inkscape in particular displays this SVG horribly without proper fonts. Go to here to download Inter.
- Features Page: Yes, this would need feedback, but I was planning on something like Blackmagic Fusion’s features page. In other words, while the front page is basically an overview, the feature page is for going over individual effects and nodes in detail. However, I agree that this may need additional feedback.
- Front page Gallery: While I would also prefer UI pictures, the reality is that Natron’s UI is just badly suited to its hero section. It’s asymmetrical, doesn’t follow a standard grid, and can look confusing and intimidating (like basically all compositing software). That’s why I chose to use a gallery in my design
- Cards: They weren’t meant to be cards; they were more of a stacked list that kind of looked like cards.
- Confusion over duplicated copy: The “What are you waiting for” duplicated was unintentional and only happened because of poor export framing in Inkscape. In the real design it wasn’t duplicated.
- Footer: Yes, I have a footer already designed; I just didn’t export a mockup of the footer yet. It’s in the SVG source file though so feel free to experiment.
-
Tailwind considerations: My idea of using Tailwind might not the “standard” way of doing things. My idea is to prototype with Tailwind (so I don’t have to write any CSS classes myself, which saves time). Once I’m satisfied with the results, I’ll submit it to the community for feedback. For the final website though, I’m not using Tailwind. I’ll be copying the raw SASS from Tailwind’s source code and putting them in the
style.scss(or writing a script to do the scraping). Essentially, Tailwind is more of a dev (prototyping) dependency than a real dependency, with the final website being a mostly static one.
1 Like
Good 
Keep up the good work 
All checks out, I didn’t realize the gallery would be full of UI screenshots. I think your reasoning is good for displaying it that way!
As long as the resulting CSS is not bloated and can be well organized in multiple .scss files (separating out the grid system, the header, and footer code in separate files and whatnot) to keep things nice and easy to maintain going forward I’ve got no complaints.
You planning to use Inter’s variable font properties? Those are pretty cool. 
I added a hero background image, would be interested in everyone’s thoughts. The image itself can totally change, more interested in the style of the page built around it. This would also require the nav bar to have a background with a gradient, I know we haven’t even gotten to interaction of elements or anything but I’d imagine it moves with the page?
I also removed a few sections, the feature cards are great and IMO should be moved to the dedicated features page. The “before you go” section is alright but I think we can get that message across in the rest of the copy, namely the “Natron respects you as a user” bit, once we’re finalizing the copy I think that would be a better place to try and get people to promote it. That said Natron isn’t in a super amazing place compared to other compositors right now for users, there are plenty of areas that need improvement and we shouldn’t over-sell it! As an alternate option the feature cards can stay and my previous icons can go or be repurposed (with more) on the features page. I also gave them some colour, I like the red highlights!
The render pass image is good and render post-processing is actually most of what I use the program for! We need to have a little one line description of that or integrate it into the powerful, yet familiar section for people that don’t know what render passes are.
I removed downloads from the footer. Disregard this for now but IDK if its the right place for them to be. More thinking needed before I really come up with an opinion on that one.
Finally, (and I didn’t have to fix this one today) load this image up in a web browser and make it fill the screen width wise. I think the 24pt type is a bit too large while the smallest 14pt type is a bit too small. On my personal website I’ve chosen 20px as the body type size, would recommend something similar here. Hammering out type sizing is hard in Illustrator and Inkscape as they lack some of the full screen & web previewing systems that dedicated prototyping apps have. This is an area that I also personally struggle with as a designer, it can be really difficult to get it juuuuust right. Maybe consider trying out Penpot? I’ve never used it, personally an XD and Figma guy but it looks pretty good at first glance although very early software.
TL;DR some things feel a tad too large and others slightly too small, mockup sizing hard.
This is really going somewhere! 
3 Likes
@Shrinks99 Great job with the design! The changes you’ve made really bring the design to a more professional level.
I’ll see if I can make that into a live prototype with tailwind. I might add a sidebar to enable/disable features from both versions of the design to better visualize the changes.
As for the footer, I think that removing the downloads is a good choice, because it takes up unnecessary room without really adding much to the design. Unfortunately, that results in an unbalanced design because most of the content is left-justified. I think that we can fix this by adding a logo to the left (see this design to see what I mean).
Though using Inter as a variable font would be cool, it would add to the size of the website, and I’m not sure if the community is okay with sending http requests to Google every time the website loads.
For the “before you go” section, I would suggest moving it to the FAQ and making it a different name. And to guide users to read it, perhaps add a button at the bottom of the features page which takes the user to the FAQ?
Lastly, I’m working on a hybrid Blender-Natron side project at the moment, so I could contribute some renders for the hero image. That being said, my compositing skills really aren’t the best, so if we could get a community art roundup/competition going, then we’ll get a lot of images to choose from.
I’ll see if I can make that into a live prototype with tailwind.
Again, even if code is what you’re most comfortable with I’d really suggest picking up a dedicated prototyping application. You’ll get all of the functionality required from a real website with none of the time sink of writing and styling code. It’s much faster for iteration and this is how pretty much every designer works on websites.
Though using Inter as a variable font would be cool, it would add to the size of the website
Variable fonts are awesome because they’re actually way smaller than including all cuts (or even the only required cuts) of your typeface. Inter.var.woff2 is only 320 KB AND you get all of the functionality that you’d otherwise have to use every other dedicated cut for + the ability to interpolate between weights of course. For this website we need to at least include Medium, Medium Italic, Bold, Bold Italic, and possibly another heavier or lighter weight if we want to use that for titles and such because of Markdown posts with Jekyll. All of these (without the possible additional title weight) come out to 436KB which is more than you’d otherwise need and you don’t get all the cool variable font features. Variable fonts are dope!
As for Google just host it locally with the site in a fonts folder or something in the root directory, the speed losses from not using The Wolds Fastest CDN™ to host your fonts are really minimal in actual reality and also privacy is cool and all.
For the “before you go” section, I would suggest moving it to the FAQ
Sounds like a much better place for that content! I like it. Logo in the footer is a good option for balancing things out I do that a bunch 
Happy to submit my file to your GitHub if you want it, I do all my work in Illustrator which historically isn’t quite as SVG friendly as Inkscape and I had to reformat a few things so IDK how well they’ll play together.
Again, even if code is what you’re most comfortable with I’d really suggest picking up a dedicated prototyping application.
Yes, thanks for pointing this out. If I had to use one dedicated prototyping application for this project, it would have been Figma, because Figma designs support collaboration, are platform independent, and Figma itself is free of cost.
My main reason for not doing so is philosophical, because Figma isn’t open-source, while Inkscape is. I know this might be nitpicking for details, but Natron is unique among the world of compositing applications because it is open-source. I wanted to preserve that open-source spirit in the project.
In the very beginning of the project, I knew that a Codepen could only take me so far. I initially considered Figma (Adobe’s tools wouldn’t work because I’m working on a GNU/Linux machine), but dropped it after I open-sourced my own designs. If there’s a way to synchronize Figma files to GitHub and for users without Figma to open Figma files, then great; if not, I’ll keep using Inkscape (and maybe Akira in the future).
In the meantime, I’d greatly appreciate it if you submit your file to GitHub — as Illustrator’s native .ai file format. Because Illustrator’s .ai file format is basically a PDF file with a different name, I’m sure that Inkscape can open it without trouble. I can convert it to an Inkscape-compatible SVG for the repo pretty easily.
Figma files themselves are not movable from their platform and not inter-operable with other applications. They allow you to export to both PDF and SVG which gives you some freedom though, I would be very much in favour of using it, vector export for archiving on GitHub is good enough for me!
Open source software is great and so is the ethos of user-centred control over your data and your tools used to create it. What’s not great is letting this ethos dictate 100% of your process and causing yourself and your team a headache by using subpar tools, especially when you’re not totally locked down and can export your work to open formats. Until open source alternatives catch up in the prototyping space I’ll be using closed source programs because they allow me to do better work quicker. ¯\_(ツ)_/¯
At the end of the day what we’re producing here is code that we will be able to own and freely publish. Keep the end product in mind, it’s license is more important than that of the tools used to get there!
1 Like
@Shrinks99 Great point! I’ll start transferring to using Figma then - I’ll just export every Figma prototype as an SVG, use Inkscape to clean up the exported prototypes, and then push the SVGs to the UI design GitHub repo.
1 Like
Sweet! Pls add @hwilkinson over there if you’re cool with adding people, I won’t write over anything (except possibly small spacing changes) but might make notes and iterations on duplicated artboards if / when I have time!
@all I’ve started writing the HTML for the website, and here’s what I’ve got so far:
Here’s the GitHub repo: https://github.com/Songtech-0912/natron-web-prototype. In addition, the live version is at https://songtech-0912.github.io/natron-web-prototype/.
It’s at a very early stage, with quite a few problems. The main one is that it isn’t responsive. Neither is it a complete website, with most of its pages missing. The sticky navbar (see https://archiveprogram.github.com/) isn’t there yet. There are no animations or transitions, and there isn’t parallax scrolling.
I’d greatly appreciate it if you could look through the code, even if it’s just to tell me how bad I am at prototyping 
Give me suggestions on possible features and problems.
2 Likes
Hi everyone, really really new to the discourse.
So I was wondering if this was an official backed side project that would if approved be implemented (website and UI/UX overhaul)
or
is it a side project/ exercise that is, in itself, very interesting, with no impact on Natron ?
Just curious, cause i like the initiative but am unsure what the end game is @Songtech-0912 ?
I really like what you are doing !!! Read your blog post which made me come back and ask mentioned above question…
2 Likes
@torad_till Welcome to this discussion! Here are the answers to your questions
I was wondering if this was an official backed side project
The short answer is no, the long answer is yes, to an extent. The reason being that because Natron is in maintenance mode now (no new features, just volunteers helping with the software development), so there is no real official authority on Natron. However, as I understand it (I could be wrong) @rodlie who is one of Natron’s main maintainers is highly interested in the project. So this is mostly a volunteer-centric project (and a proving ground for UI design using free and open-source software).
if approved be implemented? (website and UI/UX overhaul)
This depends on many things. To answer your question, probably a yes, but… The reason being that the opinions of the project’s maintainer’s might be different from mine. These maintainers are career-long programmers while I am just a student. Whether they’ll approve depends on whether they’ll consider this ready and polished enough. I believe in trying my best for this project, and hopefully coming up with a professional result.
what is the endgame?
A way of understanding this would be looking at blender. Natron and Blender had similar roots - one main programmer, a rough beginning, and a difficult journey. Yet Blender is the star of the 3D world today, largely because of its open-source nature. I wish that Natron could be the same. That’s the distant-future endgame. But for this project itself, the endgame is this:
- Rewrite website from scratch, implementing modern UI conventions, animation, and graphics
- Prepare renders for a Natron community art showcase on the website (similar to Blender’s open movies)
- UI redesign for Natron with theming support (including a community theme marketplace)
I hope that answers your questions.
1 Like