Building a Web-Based Motion Graphics Editor

Alyssa X
Alyssa X
Jun 15 · 9 min read

What would a modern motion graphics editor look like?

The Minimum Viable Product

A small preview of the rough MVP that I shared on Twitter.

Designing a Better Motion Graphics Tool

The UI of Adobe After Effects can be quite overwhelming to a new user.

Sketching and Wireframing

Some of the layout and components ideas I had in the brainstorming phase.
The result of iterating over different layouts and styles.

The Final Product

The finished interface for the editor, true to the product’s principles.

Timeline area

In order not to overwhelm the user, the timeline is extremely simple and intuitive.

The Canvas

One of the key features of the editor is the scenes functionality, which speeds up the workflow.

Toolbar & settings

The panels and toolbars within the editor follow a consistent style, and work in modules.

Okay, but where’s the tool?

Women Make

Articles from the members of Women Make, a community that supports women makers.

Alyssa X

Written by

Alyssa X

18 y/o designer, developer & entrepreneur — founder of Noon Studios. Best woman maker of 2018 (Maker Mag) & Maker of The Year nominee (Product Hunt) alyssax.com

Women Make

Articles from the members of Women Make, a community that supports women makers.