Animated StoryBoard

Design Problem:

Design a story that moves people and they can relate and interact with while scrolling through the website.

Client:

Ocean Care is an NGO that aims at working for the cause of Marine Pollution. They, through their web presence want to create awareness amongst the land dwellers of the damage that humans have been causing to the ocean. Their webpage aims at sensitizing the masses about the Marine health.

 

Design Solution:

To make the message clear and impactful they have chosen to make an animated story telling webpage that takes you along the journey of a scuba diver.

Being a scuba diver, she loves the ocean!

She is excited to take a dive into the deep waters and experience the calmness and beauty of it. However, as she gets more into the depths of the mighty ocean, she finds herself surrounded by plastic and rubber instead of fishes and coral reefs.

Story Line:

To demonstrate this story the webpage starts with a beach scene and takes the user into the ocean as they scroll. The sea though looks pretty on the surface has tones of garbage collected over the years at the ocean bed and as one scrolls on the webpage itself layers of garbage gets added denoting the same.

The plastic around the sea creatures is sure to melt hearts and help people empathize and feel for the cause resulting into more participation in the beach clean drives conducted by the Ocean Care foundation.

 

1A: Layer slides up in 2secs

1B: The logo fades in from the background itself in 1 sec.

 

2A: Slides into the frame from left in 4 secs.

2B:Layer of grabage fades-in in 2 secs.

2C: Pops-up on screen in half a sec

2D: Appears in 1.2 secs

 

3A: Fade-in in 1sec

3B: Slides in from left in 0.5 secs.

3C: Garbage bag will fade in next 1sec as you scroll.

3D: Layer of dust forms and pollutes the ocean more gradually in 1 sec

3E: Text bubble pops in. 

4A: Garbage layer fades-in in 40ms

4B: Turtle slides in from right in 80ms

4C: Text bubble pops up in 60ms

 

 

5A to 5E will appear at every scroll or enter.