Create a Effect Maker UI design for the DS

Create designs for the Effects Maker in the Design Studio

1. It should be in a dockable window
2. Analyse which effects users need and create specs for it.
3. Conduct a quick internal user test

Plan for the user flow:

Wireframes

Effects in the Effect Maker

Saving dialog

Design

Figma link to design file:

https://www.figma.com/file/s208dCKPgNSUXKpMyi2LvA/Effects-Maker-concept?type=design&node-id=0%3A1&mode=design&t=RUzQvmd4LMVkauhR-1

Figma link to prototype:

https://www.figma.com/proto/s208dCKPgNSUXKpMyi2LvA/Effects-Maker-concept?page-id=0%3A1&type=design&node-id=221-39604&viewport=1944%2C-1044%2C0.25&t=Gpp8kAPAnm2iRKaR-1&scaling=min-zoom&starting-point-node-id=221%3A39604&mode=design

Video of the prototype

EffectsMakerV7-20230807.mp4

Responsive layout

Effects_Maker_concept_-_responsive_layout.png

Use cases

No effect selected

One or more effects selected

Functionality

Select effect

Selecting the effect happens from a list and the tooltip will be shown when hovering over the effect on the list and staying on it for a short time (timeout to be decided later)

Quick tip

The user can see quick help by hovering over the help icon on top right

Reset effect(s)

Effect and also all effects can be reset via context menu by clicking with mouse right

Changing the preview image

The user can change the preview image from the list. They can also upload their own from the filesystem.

Saving