Frederick Lee
Hangul.png

Hangul is:

01_Homepage.png
 
 

Hangul is: 

(Interactive product is available upon request)

"Hangul is:" is my senior thesis project for three months, interactive website about Korean language system, Hangul (design & programming). Many institutions have acknowledged hangul as scientific and logical language system that is one of the easiest to read, write, and learn. Also, I have seen many people around me or on online who were interested in Korean culture and wanted to learn Hangul, but most of them gave up learning since: 

1. Korean language system is extraordinarily different from any other alphabet in the world that could be overwhelming for people from other countries.
2. People didn't know where to start since learning Hangul by only reading text or listening audiobook is boring and tedious.

By researching target audience's needs, I realized the digital product that is visually appealing and interactive would help them to have more fun with learning a new language and simplify the process of learning basics of Hangul.

To simplify the learning process, I separated the basics of Hangul into five pages:
Introduction / Consonants & Vowels / Syllables / Syllables in Context

 
 
 
 
 
 

Introduction

"Landing page should always be unique and interesting from users' first glance."
My favorite quote of mine! I wanted to make the landing page more creatively, so I recorded my friend talking about brief history and structure of Hangul in Korean and revealed the translations by animating from his mouth. Then I used 'bigvideo.js' to make it full-size video introduction as a landing page with skipping button. Below is the unedited photo of my friend recording his voice and face. 

DSC_0921.jpg
 
 
 
 
01_History.gif

History

King Sejong created Hangul in 1418, but it took a long time to be acknowledged as official Korean language since Korea was using Chinese writing system that was usually only used by literary elites who were again using Hangul that is easy enough to be used by everyone. I picked nine most significant events and utilized full-size / sliding images to help understanding of the context and rollover description text box to create an interactive reading experience. 

 
 
 
 
03_consonant.gif
 
 
04_vowel.gif

Consonants

The shape of Hangul consonants is derived from the shape of the mouth, lips, and tongue in forming their sounds. The face illustration shows how the consonants shapes are related to human's facial features. The pronunciation of each consonant is available by clicking sound icon.

Vowels

Vowels are made from vertical or horizontal lines so that they are easily distinguishable from consonants. A simple interactive chart shows how each vowel was developed from another vowel.

 
 
 
 
de41fc27152163.588226f186044.gif
 
 
06_logical-lightboxes2.png

Syllables

To show basics of Hangul syllables, I used the blocks to show six syllable formats. The right section includes consonants and vowels that belong to initial, medial, and final. I also used lightbox.js to show every possible syllable, consisted of correlating consonant and vowel.

 
 
 
 
07_easy.gif

Syllables in Context

Only knowing syllables structure doesn't help to understand in real context. Therefore, I added the page with two actual sentences in Hangul. Syllable blocks below highlights how it can be used in context. Also, I included the recorded voice of my friend reading the sentence in Korean to help users to learn exact pronunciations.

 
 
 
 

Awards

'Hangul is:' won:

  • Semifinalist from 2015 Adobe Design Achievement Award
  • Florence Whistler Fish Award at UArts as the first-runner up in 2015
 
Credit
UX&UI and Programming: Frederick Lee
Instructor: Jan C. Almquist
Programming Advisor: Jonathan Davis