2007 Simple UI Mockups
Here are a collection of UI Mockups for various actions possible with the Simple UI. Also, you might be interested to see Advanced_UI_Mockups.
Medias can be added to the source list by several means:
- clicking on the 'Add Media' button (shown in mockup below)
- Dragging from desktop, nautilus, or anything supporting the uri-list DND protocol
The medias are all shown with an icon and some details in the source list
The user selects the desired scene from the source list and drags it onto the timeline
The dropped scene appears on the timeline.
All scenes are colour-coded (random colours) so that you can easily see in the timeline slider where you sources are. Here, the scene is coloured in green, and it takes up the whole timeline.
Also notice that the new scene is automatically selected, this is visible here because it is highlighted in red both in the timeline slider and in the simple timeline.
Select another scene
Other scene added
Just like for the first scene, the new scene is added, with a colour code, and you can see in the timeline slider that it takes up more room than the first one since it is longer.
A transition is automatically added between new scenes and existing ones. This is a sensible default choice, since hard-transitions are really ugly to look at. The default choice is a fade transition that takes 1 second.
To remove a scene, just press on the cross/delete button at the top right of the scene.
These are the various steps for editing a scene, that is : modify the start/stop duration of a scene.
Switching to editing mode
To edit a scene, you need to activate the editing mode for that video. You can do so by clicking on the Edit button (highlighted in red in the mockup below).
Editing mode layout
Once in editing mode, the scene takes all the width of the timeline, and the timeline slider shows which source is selected by highlighting it in red.
The two viewers at the left and right of the editing view represent the start and stop position of the scene. The three buttons below each viewers are:
- -/+ to move the stop/start position forward or backward by one frame
- a button to set the current position in the editing slider to the start/stop position.
The editing slider represents the whole scene, with the position of the start/stop points.
Moving through the scene
Using the editing slider, it is possible to seek through the scene to find the adequate start/stop points. Notice that the position is synchronous with the position in the timeline slider.
Setting the start position
Once the user has chosen where the scene should start, you can click on the 'set start point' button. The editing slider will represent the start point by graying out everything before that point.
The width of the scene also changes in the timeline slider (FIXME : this should be visible here, and not in the following mockup).
Choosing the stop position
In the same way we did previously, we can seek through the editing slider to find an adequate stop position.
Setting the stop position
Pressing the 'set stop position' (highlighted in red below) will mark the stop position on the editing slider by graying out everything after that position.
The duration in the timeline slider will also be changed to show the modification (FIXME: It is in fact only visible on the following mockup)
Leaving the editing mode
To leave the editing mode, simply press the Done button (highlited in red below).
Back to timeline view
The scene has shrinked back to the normal size.
To apply an effect on a scene, select one from the effect list and drag it onto a scene.
Once added, the effect will appear in the scene's effect slot.
To remove an effect, click on the remove button in the effect slot (shown in red below).
To add a transition between two scenes, select one from the transitions list and drag it between two scenes.
Once added, it will appear between the two scenes in the timeline.
To modify a transition, select one from the transitions list and drop it onto an existing transition...
... and voila
To remove an existing transition, click on the cross/delete button at the top-right of the transition (hightlighted in red).
The results of the search are