The Water Cycle

Educational website for children

Overview

The Water Cycle is a interactive e-learning website that explains scientific concepts to children aged from 6-11 years old. It uses simple interactions to progress through each step and reveal animated examples along with more information.

My Role

  • Visual Design/Illustration
  • Motion Design
  • Front-end Development

Tools/Technologies Used

  • Adobe Illustrator
  • Adobe After Effects
  • SVG
  • CSS Animations
  • Gulp
  • SCSS
  • Javascript
  • jQuery
  • Anime.js
  • Lottie.js

Concept

The site is essentially one large SVG based scene with the camera moving around and zooming in/out as the user navigates through the steps. Each scene explains a part of the water cycle and provides some information. Ultimately the user ends up back where they started and is provided with a multiple choice quiz on the information they have just read. As this is for younger users the answers are shown after incorrect attempts.

Colour Palette

#87c7ff
#ffc94d
#5bb371
#46a3cf
#393985
#575757

Animations and Easter Eggs

Some of the animations are built in as easter eggs. Allowing users to discover them by accident and reward their curiosity.