This web design and visualisation project set the goal of creating an interactive, graphically interesting web experience to support sustainability efforts. Our team chose to create «WASTED», an interactive low-poly style website themed around education about the oceans of planet earth. My part was to provide creative direction, conceptualise and animate parts of the page.

For the most part this consisted of taking the lead in style definition (including most factors summarised within the sector of Corporate Design) as well as illustration of assets (for both the website background and the informative animations provided in its interactive parts) to the respective animation work.

colors

assets

settling for the low-poly style

• 

• 

• 

• 

animations

Adobe After Effects was used for animating. The animation of our assets required them to be perfectly layered in Illustrator in the first place and still proved incredibly difficult at times. The reason for this is that movements of characters or objects need to be mimicked by animating all paths in their shape. This is due to us not being able to neither effects nor the useful puppet pin tool within After Effects – which can be used to transform our shapes in a more dynamic way – because LottieFiles doesn’t support either of these. This was a big complication overall because of the natural limits presented by our 2D low poly style.

While working on our project in the module Interactive Media V I was mainly responsible for setting up the page and getting as much coded by hand as possible. Because of some technical, time- and skill-based restrictions, we didn’t quite finish a fully self-coded Version of the site and then opted to use a page builder such as WordPress‘ Elementor Pro to realise the actual website within the frame of the study module.