Early pen and paper sketch.
Quick sketch of the connection editor, which the animator would use to create connections between nodes.
We settled on a basically rectangular shape for the nodes, and did a series of variations on the design.
This mockup shows how the nodes lose detail as the user zooms out the view of the graph.
The view is zoomed out farther than the previous image. The node types are still identifiable by their color.
This design puts the inputs and outputs of the nodes side by side. This reduces the height of the nodes in their expanded state, but makes them awkwardly wide in their collapsed state. I considered making the nodes collapse horizontally as well, li
This design puts the inputs on the top and the outputs on the bottom of each node. People liked this better.
Another iteration of the vertically expanding nodes.
This is what we decided on for the first iteration of the UI. At this point in the development, the nodes were not expandable. Each node type had preferred inputs and outputs which were represented by the light gray bars on top and bottom. The user
prev / next