Onomatopoeia Project

“How do we verbalize sounds across languages?”

—Duration: 3 months
—Scope: Creative Coding, Web Design, Illustration
—Tools: JavaScript, HTML & CSS, Figma, Procreate.
—Collaborators: Andrea Manrique, Thư Ngô Vũ, Hannah He, Hiếu Trần, Quỳnh Anh Nguyễn, Mai Phương Nguyễn

Onomatopoeia Project is an interactive educational website that explores sound vocabularies across languages through lively illustrations, sounds, and interactivity.

Growing up, I thought of onomatopoeias as magical—while they take the form of a word, they're at the same time the songs of all things. However, later on, I found them overlooked in my own English education. Inspired by this, I collaborated with translators to make learning onomatopoeias a joyful, multilingual experience—one that's bring words to life!

—Try out Onomatopoeia Project here!

Process

Initial Sketches & Experiments

In my the beginning stage, I sketched to visualize how my website would look like and function. This led me to the realization that I could not have created all the contents alone—and so Onomatopoeia Project became a collaborative one. I started reaching out to 6 translators of multiple languages, chat about my ideas, and created a database together.

Data Organization

We gathered data with a spreadsheet. The file was then converted into a JSON format that's linked to the website. Every change in this online spreadsheet will go live on the main website.

Experiment 1
Speech to Text Tool

I needed a tool that can detect what the user is saying, since I want the website to be totally about sounds. It had be precise enough to detect the list of words I wanted like to include.

↓

After experimenting with a few different tools, I ended up choosing P5.js' speech recognition tool.

Experiment 2
Hosting a Website

The project is an educational one, hence I wanted people other than myself to be able to access and use it. This is a new thing to someone who had only hosted locally like myself.

↓

I tried Codesandbox at first, then switched to Github for easier usage.

Experiment 3
Styling elements

In order to make the project more engaging, I’d need to add styling elements to the website. Before this project, I had been practicing both JS and CSS, but never tried to combine them.

↓

This turned out to be much more straightforward than I thought!

Technical Prototype

The first draft was programmed with a very vague idea of what the visuals would look like. Its main purpose was to wrap my head around the technical challenges that I needed solve in order to create a fully functional website with my not-so-great coding skills.

Visual Prototype

A Figma Prototype was made to further explore visual elements of the website without having to worry about coding limitations.

Illustrations

I approached the illustrations in this project with a more kid-friendly style, making it more engaging as an educational tool.

Onomatopoeia Project

“How do we verbalize sounds across languages?”

When I was learning to write and read in Vietnamese, I found an interesting view in onomatopoeias: the trees say “rì rào”, the heart beats “thình thịch”, and hundreds of words that describe the sounds of things. During my journey with my second language, I was taught very few onomatopoeias. They were neglected, as the teachers said, “not worth memorizing compared to the academic vocabulary”.

And so, it wasn’t until much later that I started to teach myself onomatopoeias, to verbalize the sounds around me.

That experience inspired The Onomatopoeia Project, a collaborative project that aims to help users explore the sound vocabularies in different languages, while keeping it a joyful experience with interactivity, lively illustrations, and of course, sounds!

—Try out Onomatopoeia Project here!

Process

Initial Sketches & Experiments

In my the beginning stage, I made a few sketches to visualize how my website would look like and function. It was important I knew what I wanted, since I was not totally proficient at coding, these sketches helped me figure out what experiments I would need to take in order to program the whole website on my own.

First Draft & Challenges

The first draft was programmed loosely so I could understand how the code works. The first draft was programmed loosely so I could understand how the code works.

Figma Prototype

The Figma Prototype helped understanding how I should construct HTML divs efficiently. Though the final version turned out to be a bit different, the prototype was also the main visual guide of the project.

Illustrations

The very first drafts of illustrations were done roughly to test how the type would fit in relation to the illustrations.

Data Organization

Since it was a collaborative project with the participation of many translators, I gathered my data with a spreadsheet. The file was then converted into a JSON format that's linked to the website. Every change in this online spreadsheet will go live on the main website.

This method of data organization helped the website run smoother (and freed me from somewhat 300 lines of code.)

#onomatopoeia_pj

@2024 Lucie Tran

Onomatopoeia Project

“How do we verbalize sounds across languages?”

And so, it wasn’t until much later that I started to teach myself onomatopoeias, to verbalize the sounds around me.

That experience inspired The Onomatopoeia Project, a website that aims to help users explore the sound vocabularies in different languages, while keeping it a joyful experience with interactivity, lively illustrations, and of course, sounds!

—Try out Onomatopoeia Project here!

Process

Initial Sketches & Experiments

In my the beginning stage, I made a few sketches to visualize how my website would look like and function.

It was important I knew what I wanted, since I was not totally proficient at coding, these sketches helped me figure out what experiments I would need to take in order to program the whole website on my own.

First Draft & Challenges

The first draft was programmed loosely so I could understand how the code works.

It also became a tool to map out the challenges that I needed to solve to complete the project.

Figma Prototype

The Figma Prototype helped understanding how I should construct HTML divs efficiently.

Though the final version turned out to be a bit different, the prototype was also the main visual guide of the project.

Illustrations

The very first drafts of illustrations were done roughly to test how the type would fit in relation to the illustrations.

Data Organization

This method of data organization helped the website run smoother (and freed me from somewhat 300 lines of code.)

#onomatopoeia_pj

@2024 Lucie Tran

Onomatopoeia Project

“How do we verbalize sounds across languages?”

And so, it wasn’t until much later that I started to teach myself onomatopoeias, to verbalize the sounds around me.

—Try out Onomatopoeia Project here!

Process

Initial Sketches & Experiments

First Draft & Challenges

The first draft was programmed loosely so I could understand how the code works.

It also became a tool to map out the challenges that I needed to solve to complete the project.

Figma Prototype

The Figma Prototype helped understanding how I should construct HTML divs efficiently.

Though the final version turned out to be a bit different, the prototype was also the main visual guide of the project.

Illustrations

The very first drafts of illustrations were done roughly to test how the type would fit in relation to the illustrations.

Data Organization

Since it was a collaborative project, I gathered my data with a spreadsheet. The file was then converted into a JSON format that's linked to the website. Every change in this online spreadsheet will go live on the main website.

This method of data organization helped the website run smoother (and freed me from somewhat 300 lines of code.)

#onomatopoeia_pj