The History of Elliott Erwitt

WEB & MOTION DESIGN

Project Overview

I was tasked with creating a motion graphic of anything that interests me. I designed a web prototype that covers the history of photographer Elliott Erwitt with animated typography and transitional visual elements.

My Contributions

I was responsible for researching and sourcing content about the photographer as well as designing and animating the motion graphic.

With the course being open to any area of motion design, I found my own tutorials on creating animated web prototypes and converting Figma designs into After Effects compositions.
‍
The tutorials that were primarily helpful for this were Using motion design to animate with purpose and create delightful experiences by Louis Paquet and Design meaningful experiences through an animation system by Louis Ansa.
‍
From these tutorials I was able to grasp an understanding of easing techniques, working with plugins, and managing multiple AE Compositions.

Part 1

Learning
the foundation

After proposing my project direction I designed a prototype of the website in Figma, sourcing inspiration from sites like Canals by Marcus Brown. Through immense research, I sourced images and wrote content that would eventually shape the page layouts of the webpage.

Part 2

Figma
Prototype

Pages of prototype before animating

Page Design

With the course being open to any area of motion design, I found my own tutorials on creating animated web prototypes and converting Figma designs into After Effects compositions.
‍
The tutorials that were primarily helpful for this were Using motion design to animate with purpose and create delightful experiences by Louis Paquet and Design meaningful experiences through an animation system by Louis Ansa.
‍
From these tutorials I was able to grasp an understanding of easing techniques, working with plugins, and managing multiple AE Compositions.

Part 3

Animating in
After Effects

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Learning Outcome

This project gave me the opportunity to learn the ins and outs of After Effects while also expanding my knowledge of animating transitional elements in a web context.

Future Implementation

In the future, I would consider expanding the project to be implemented into a project that would eventually be able to live on the web.

Next Project: Thesis