Date: March 2020
Programs: Illustrator, After Effects, VS Code (HTML, CSS, JavaScript)
The Project: I wanted to create a website that highlighted 6 women throughout history that are not household names. This interactive experience will allow users to see these women and their inventions in action through bright minimalist web animations. Using the most up to date web technologies, children and adults will get to learn about the people who made inventions that impacted American society.
The Challenge: This site should resemble an info-graphic or storybook on these trailblazers in history. I wanted to use several animations, but needed to make sure the site loaded quickly and worked on some older browsers. The content should be easy to read for younger users but still provide relevant information for all.

The Planning: I gathered websites that inspired me through their illustration style or the technologies and techniques used to host small web animations. I saw an increased use of SVGs for animations, which seemed lighter than gifs or embedded videos.
II sketched out character designs and sourced reference images for each inventor to get a better foundation of the fashion of the time, and how I wanted to illustrate their features.
The site map was straight forward, but helped me organize my words and all of the inventors. I then sketched out an idea of how each section would be presented, and mocked it up inside of XD. I chose a font that felt bold but had a very round feminine feel. The colors are bright and communicate energy and excellence.
I completed the illustrations in Illustrator, preparing them for After Effects. As I started to use AF with Bodymovin, the plugin that allows me to use Lottie.js for web animations, I learned that i could not use gradients or curtain effects in my animations. Though at first this felt limiting, I started to find inventive ways to use simple vectors to make a statement.
The Final Design: Mocking the site up in Adobe XD helped me realize how I wanted the side bar menu to move, how much space was needed between images and how well the colors looked against the background.
Once I started to code, my design started to adapt. I experimented with more SVG elements, and using CSS and JavaScript to do more complex animations to make the site come alive.

You may also like

Back to Top