# Natron Website Design Roadmap

## About

We use this document to structure our design progress

We structure each step in the design as a todo item, denoted by the checkbox.

Every week, we complete a number of todos, and at the end of the week, we conduct a design review to finalized our changes. This is a *merge*.

We then list the changes we make, which are collectively called a *commit*.

Each commit is a MD-5 hash generated via the output of the `date | md5sum` Unix command

## Stats/Info
* Main artboard (stable): `Home - v007a`
* Main artboard (experimental): `Home - v007b`
* Latest merge: `Home - v007a/b -> Page 1 (finished)`
* Latest design review: Completed on Sunday, Feb 28th
* Commits:

<details>
<summary>View details of latest commit <code>34a1448f323b31aab0650f165031424f</code></summary>
<ul>
<li>Completely overhauled hero section, including standardizing font weights, sizes, and alignment</li>
<li>Revamped navigation bar, with remade gradient, logo, backgrounds, and colors</li>
<li>Created two-color brand color scheme</li>
<li>Overhauled footer with better alignment, layout, and visual hierarchy</li>
<li>Implemented new accent gradient</li>
<li>Changed all buttons to gradients with auto-padding frames</li>
<li>Polished homepage to production-ready status</li>
</ul>
<img src="https://i.imgur.com/e8Kth6d.jpg" />

</details>

<details>
<summary>View details of commit <code>0D67BE1C32D653A7E65009BC815DD91C</code></summary>
<ul>
<li>Made hero section fullscreen</li>
<li>Fixed font weights in hero section</li>
<li>Adjusted spacing</li>
<li>Changed nodes diagram</li>
<li>Added 3D mockup for nodes diagram</li>
</ul>
<img src="https://i.imgur.com/5vbAmMX.jpg" />
</details>

## General
- [x] Visual styling made consistent
- [ ] Structure content (homepage is done, other pages are not yet)

## Design Reviews
- [x] Homepage Hero Section Review
- [x] Homepage Features Section 1 Review
- [x] Homepage Features Section 2 Review
- [x] Features Page CG Section Review
- [ ] Features Page 2D Section Review
- [ ] Features Page Pipeline Section Review
- [ ] Features Page Open-Source Section Review
- [ ] Features Page Extensible Features Section Review

## Design Refactoring
- [x] Change buttons to "smart" layout buttons w/frames
- [x] Implement auto layout everywhere
- [x] Implement layout grids (see [reference link](https://help.figma.com/hc/en-us/articles/360040450513-Create-Layout-Grids-with-Grids-Columns-and-Rows))

## Homepage

### Hero Section
- [x] Made hero section fullscreen
- [x] Increase font weights in hero section
- [x] Fix nodes diagram into something more professional-looking
- [x] Adjust spacing
- [x] Adjust scaling
- [x] Fix issues with alignment
- [x] Fix issues with heading protruding into hero section
- [ ] Make a higher-resolution version of the concept art used as BG
- [x] Fix footer

### Features Sections
- [x] Update copy
- [x] Revise graphics/diagrams

## Branding
- [x] Finish badge design
- [x] Finalize brand copy
- [x] Finalize logo

## Accessibility

Note: these are N/A for the moment, and will continue to be until we code the site.

- [ ] WCAG Contrast Check
- [ ] Ensure HTML is semantic
- [ ] Ensure smooth keyboard navigation
- [ ] Assign Tabindex to all elements
- [ ] Add alt-text to all elements
- [ ] No cookies + associated statement
- [ ] No telemetry + associated statement
- [ ] Make sure website is responsive on all screen sizes
- [ ] Perform Accessibility Tests
- [ ] Automated Chrome (Lighthouse) accessibility checks
- [ ] Automated Firefox DevTools accessibility checks
- [ ] JavaScript disabled scenario test
- [ ] Color-impaired simulation Test
- [ ] Screenreader Test
- [ ] Keyboard-only usages test

## Features Page

- CG Compositing
- [x] Cryptomatte
- **Feature Image:** Cryptomatte pass and extracted alpha side-by-side
- [x] EXR multi-channel compositing
- **Feature Image:** Multiple EXR Passes
- [x] Stereo compositing
- **Feature Image:** Stereo render through the anaglyph node
- 2D Compositing
- [ ] Tracking
- **Feature Image:** Image of trackers overlayed on object tracked onto footage
- [ ] Keying
- **Feature Image:** Side-by-side keyed alpha VS plate
- [ ] Roto
- **Feature Image:** Screenshot of roto curves in the viewport
- [ ] Paint
- **Feature Image:** Half painted out object screenshot of the viewer with the cursor painting???
- [ ] Animation (Curves, Dope Sheet, etc.)
- **Feature Image:** Screenshot of curve editor???
- Pipeline
- [ ] OCIO
- **Feature Image:** OCIO logo
- [ ] 32-bit linear image processing
- **Feature Image:** Classic muzzle flash VFX shot - it's not directly related but it's a good demo
- [ ] Batch/headless rendering
- **Feature Image:** Terminal output of job render starting - ZSH shell and
- Open-source
- [ ] Licensing
- **Feature Image:** Open source logo??? Or just a generic stock image from unsplash of some open-source developers - Or maybe a tree view of Git commit history
- [ ] Human Readable XML
- **Feature Image:** Natron project file in a text editor
- Extensibility
- [ ] Expressions/drivers
- **Feature Image:**
- [ ] Python Scripting API
- **Feature Image:** Python script with Natron import statement at the top
- [ ] OpenFX support
- **Feature Image:** OFX logo
- [ ] GMIC
- **Feature Image:** GMIC logo
- [ ] PyPlugs
- **Feature Image:**
- [ ] Shadertoy
- **Feature Image:** Shadertoy logo (Gross, it's typeset in Lobster :thumbsdown:)

## Responsive Layout

- [ ] Make pages responsive
- [ ] Test responsiveness

## Theming

- [ ] Create a light theme and dark theme for everything

## Logistics

- [ ] Change domain to <https://natronvfx.com>

## Main Documentation (on ReadTheDocs)

- [ ] Move main documentation to separate repo, ideally a standalone docs repo or alternatively the same repo as the website
- [ ] Redesign the sphinx theme to more closely match visual style of main website (as in using Natron's brand colors, typography and visual components)
- [ ] Move documentation on how to compile and install Natron to ReadTheDocs
- [ ] Improve the level of detail of compilation documentation

## Design Docs

### Proposals to add

- [ ] Remove icons from nodes
- [ ] Add icons in TAB command palette
- [ ] Redesign nodes

## VFX Showreel

- [ ] Decide on format - speedart w/UI, or video renders, or vfx-breakdown style

## Animations/Motion
- [x] To framer or not to framer? (Decide to use framer OR figma for interactive prototypes) --- **We will not be using Framer**

## Complete Natron UI Overhaul

- [ ] Add tooltips to nodes when zoomed out beyond text rendering size
- [ ] Learn Qt, C++ and Qt styles