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
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.
