Design UI Ideas
A notepad for concepts.
Crossfades are typically represented as two overlapping clips, where the vertical axis represents opacity, which results in an X shape:
This design has two flaws:
- there is a gap at the top, which isn't very meaningful
- if the blend functions for A and B are not reciprocal, then there will be an overlap. But how to tell what the result of that is? Will it blow out the image because too much energy is added up?
Troy suggested to not let clips overlap, but to alter their shape so that they "puzzle-piece together" as long as the blending functions are reciprocal:
Pros:
- no meaningless gap in depiction
- natural "snapping together" metaphor
- avoids pitfall where a user has two adjacent clips and wants to add a crossfade between them, but there is no footage for blending (no overlap in time)
Cons:
- ill-defined for the case where the blending functions are not the opposite of each other
- vertical axis does not represent opacity consistently. At the end of a clip, opacity decreases from top to bottom, but at the beginning of a clip increases from top to bottom. However there is a possible counter-argument that the height does represent opacity consistently, and the only inconsistency is in where the range starts and ends on the vertical axis.
Nodes have their inputs on the left and outputs on the right. In a data flow view mode, only these connections should be visible.
In an alternative view mode, the other two sides of node rectangles could be used for additional information and assigned the following meaning:
- Top: Metadata, as in information which is related to the node but not embedded into it. Examples would be labels and annotations.
- Bottom: Track/clip links to nodes which move together on the timeline. Primarily to associate audio clips to video clips, so that moving the video clip moves the audio clips along with it.
Corners of edges should be rounded. This allows the diagram reader to easily follow non overlapping and partially overlapping edges as it suits better to the natural movement of the readers head and eyes respectively. Figure 4 depicts an example, which outlines the importance of rounded corners. The connection of nodes is not very concise in the case that the corners are not rounded.
Figure 4: Rounded vs. angular corners of edges
http://www.fmc-modeling.org/visualization_guidelines
Rounded corners also make effective content containers. This is because the rounded corners point inward towards the center of the rectangle. This puts the focus on the contents inside the rectangle. It also makes it easy to see which side belongs to which rectangle when two rectangles are next to each other. Sharp corners point outward putting less focus on the contents inside the rectangle. They also make it hard to tell which of the two sides belong to which rectangle when two rectangles are next to each other. This is because each rectangle side is exactly a straight line. The sides of a rounded rectangle are unique because the lines curve towards the rectangle it belongs to.
https://medium.com/@yulianaz/why-rounded-corners-are-easier-on-the-eyes-8fa1d816903d
How far can the concept of labels/tags be taken?
- Footage/project organization (also automatic labeling)
- Timeline tracks based on labels instead of fixed tracks?
- Annotations as labels
- Labels to mark points in time as well as ranges
- Logging (special labels to indicate "viewed", "discard", "highlight" ranges?)
Sets of panels / panel arrangements for different stages of a production or different workflows:
- Logging
- Editorial
- Color grading