top of page


Translated Sounds

TRANSLATED SOUNDS译声 is an ongoing experimental project that focuses on how onomatopoeia differs in English and Mandarin Chinese and presenting them in a visual and dynamic way using typography and motion graphics.

Website Landing Page

My Role

Visual Designer, Interactive Designer


Motion Pieces


Interactive Element


~2 month

Inspirations & Early Projects

This was a project that I created during my semester study abroad in Japan. This was originally a lithograph print piece that serves to compare chinese/japanese characters with enligsh characters.

Screen Shot 2021-11-09 at 4.23.17 PM.png

Quotation marks in Japanese vs Western languages

Screen Shot 2021-11-09 at 4.23.17 PM.png

Letter "O" and Chinese charater 口 (mouth)

This was an experimental project that I create a while ago to try and sharpen my motion graphic skills by taking a random work and trying to visualise them in a motion poster form.

Motion Poster, Rotate

Motion Poster, Material

Motion Graphics


Onomatopoeias are words that mimic the actual sounds in our life. I first became interested in onomatopeias during my study abroad in Japan, when one of my assignments was to learn about Japanese onomatopoeias. I was amused by the range and ideas these words could portray and the difference in languages even when mimicking the same sounds.

Screen Shot 2020-05-04 at 4.16.49 PM.png



Possible visualisations of each word


I want to start experimenting with as many ways I could with how I could visualize sound and this is the first experiment I made to try and figure out how I want to visualise these onomatopoeias. This one was created by mapping the amplitude of the Chinese onomatopoeia for woof, “汪(wang)” with the outline of the character.


mapped to the amplitude of its pronunciation

This is another experiment I created in both English and Chinese trying to visualise what the onomatopoeia means and represents. I enjoy this style a lot more as I thought it was a lot more flexible than the previous experiment. I also decided that I was going to make the appearance of the English and Chinese characters/font in a similar style. Much of this project was purely experimental, but a lot also replies on planning and setting certain parameters to make sure there is still some consistency throughout the individual motion pieces. 

Screen Shot 2021-11-21 at 9.03.07 PM.png

​Ding Dong/叮咚 Initial Designs


Going into a few more motion pieces, I’ve decided to create a font for the English characters to make my workflow faster. I created a few rules of how the font is going to look and make it into a monospaced all-caps font to easily control the length of the words as well as lining up with the Chinese versions.

Screen Shot 2020-05-04 at 4.41.01 PM.png

English typeface

Screen Shot 2020-05-04 at 4.42.54 PM.png

Creating font with Fontforge

I kept the height of the characters the same height, but the length of the Chinese characters are slightly wider than the English characters because the word count in Chinese words is usually a lot shorter than English.

Screen Shot 2020-04-06 at 6.17.55 PM.png
Screen Shot 2020-04-06 at 6.17.15 PM.png












I planned to keep the layout of the website as simple as possible to create more emphasis on the motion graphic pieces.


Lo-fi Wireframe


I tried to figure out which was the best way to present these individual pieces combining both English and Chinese versions, but still not making the layout too overwhelming. These are a few layouts that allow the users to toggle between the English and Chinese versions of each word.

Screen Shot 2021-11-09 at 5.51.36 PM.png

UI Design Options


After testing out a few layout options, I’ve decided to combine the English and Chinese pages onto the same page, as one of my initial goals was to create a piece that could present a bilingual design.

Screen Shot 2021-11-09 at 5.55.23 PM.png

Seperated Layout

Screen Shot 2020-05-04 at 5.11.26 PM.png

Combined Layout


For the final archive page design, I’ve decided to create a language category filter so users could toggle between the English and Chinese pieces as a whole. The individual pages showcase both languages on the same page with definitions and pronunciations of each word to imitate the function of a dictionary.

Screen Shot 2020-05-04 at 5.18.01 PM.png

Filter unselected

Screen Shot 2020-05-04 at 5.18.10 PM.png

English filter selected

Screen Shot 2020-05-04 at 5.19.10 PM.png

Individual onomatopeia page layout


Interactive landing page

Motion Graphic Designs
Website Presentation
bottom of page