Fable Foundations
A pioneering web-based motion design platform, Fable aimed to make professional-grade animation accessible directly in the browser. While the tool is no longer active, it represented an ambitious step in creative technology. As Fable's first in-house motion designer, developing the Foundations tutorials was among my earliest initiatives. My role involved defining the overall creative direction and shaping the video flow logic, all designed to guide early adopters through Fable's core concepts and workflows. I also established the comprehensive art direction for the series, and personally designed style frames and animated intros and outros.
Client
Fable
Role
Art Direction, Design, 2D Animation
Challenge
In its early stages, Fable's user interface was in constant flux, evolving daily, sometimes hourly. The 'Foundations' series, however, needed to have enduring relevance, outlasting these frequent interface changes. Furthermore, with Fable being new to the wider design audience, my task was to position it not just as a reliable tool, but also as a thought leader in motion design community.This meant fostering user trust in its functionality as well as its educational mission: empowering learners to grasp fundamental animation principles, such as the concept of a frame or the essence of motion itself, beyond merely operating the software.
Solution
To address the rapidly changing user interface, I adopted an abstract visual approach. This involved focusing solely on Fable's main interaction areas, highlighting the exact actions and desired results relevant to each video's content. To establish Fable as a guiding voice in motion design thinking, I created aesthetically engaging intros and outros for each video. These segments served as concise, visually compelling depictions of fundamental principles, thereby elevating Fable's presence as a thoughtful authority in the creative space.
Art Direction
The existing Fable brand palette, originally optimized for the tool's interface and web, presented an exciting opportunity to adapt and expand it for the Foundations series. I kept the original Fable orange, pairing it with a vibrant bright yellow to highlight key elements across both user interface and illustrative frames. Next, I built out the grey palette from the Fable dark grey, which defined the interface and introduced depth within the 2D illustrations and motion.
Design and Motion
With the visual direction established, I designed style frames and animated select parts for the 'Keyframes' and 'Scenes and Groups' tutorials.
