top of page

THE ANT AND HIS OCEAN
LITTLE RED COMMA | NAC x ESPLANADE CULTURAL INITIATIVE

Interactive Storytelling Website

antandhisocean-gif.gif

The Ant and his Ocean (2020)

Little Red Comma

Tusitala Books x NAC x Esplanade

Visit site here.

Credits:

Presented by Esplanade – Theatres on the Bay, produced by Tusitala and commissioned by National Arts Council.

Translated by Goh Beng Choo

Originally published by City Book Room

Music production by Artwave Studio

Music by Kin Leonn and Hiroshi Ebina A Secluded Channel

Illustrations by Josef Lee

"The Ant and his Ocean" is one of the 3 interactive storytelling websites commissioned to Tusitala Books as part of Literary Arts efforts in Singapore. The interactive experience is a translated work of flash fiction about an ant enthralled by its reflection in a water droplet, based on the story written by local writer Yeng Pway Ngon, who is one of Singapore's most prolific award-winning Chinese-language writers.

For this project, I was the UI/UX Web Designer who worked together with the concept designer to design moodboard for this project. We went through several iterations of how the visuals should look like, before deciding that it could emulate a chinese children storybook, which typically uses coloured pencils/crayons to produce a soft colour and texture palette.

 

Our main considerations were 1) the origin source material is mandarin 2) the story should emulate a children's storybook yet maintain a whimsical and mature feel. Our main inspiration came from Jimmy Liao's art.

B9726558946Z.1_20210402153739_000+G1DHSA3P8.1-0.jpg

Jimmy Liao's Art

After deciding on an art style, we created a Figma wireframe flow to show how the parallax scrolling interactive storytelling website would transit from screen to screen, and when that was done, we delivered the web specifications to our web developer (the awesome Vaibhav) and reviewed the art iterations provided by our commissioned Artist.

Aaaand Voila! Here is a complete walkthrough on how the interactive experience is like:

bottom of page