Field: UX/UI, Website

Role: Individual Work

Duration: 1 weeks | 2017

Brief: A new form to display classical Chinese poetry and prose


Chinese traditional poetry is one of the most precious treasures in Chinese traditional culture. All of us start to learn poetry at young age, but most people leave it behind and never read it  again after they graduate from high school.  As for me, it was a long time before I started to take a new look at these poems till I read Classical Chinese Poetry and Prose Series written by Xu Yuanchong, a famous Chinese translator. I used to believe that it was impossible to translate classical Chinese poetry into other language while expressing such subtle and complicated emotions expressed by poets. However, Xu Yuanchong showed us the extraordinary charm of translation and the beauty of Chinese and English. 

Beauty of Languages

After reading these sentences, I showed the English version to my friends and let them tell me the corresponding poems in Chinese.  No one could speak out in the first time, but they all marvelled at the language use.

There are already many websites about classical Chinese poetry, nevertheless, design styles of them are quite old fashioned which damps down my passion for poetryIn this case, I desire to design a new website to show the brilliant classical Chinese poetry as well as its English version.


The functions of this website are not complex, the main functions are displaying poetry and searching a poem by dynasty / author / keyword / poetic image. So a single-page web application based on VUE would be a good option. The shape of  overview information space is shown bellow.

Site Map 

Design Style

Out of the hope that my poetry website should have a distinctive design style, which is a combination of tradition and modernization and a paradigm of elegance and conciseness, I attempted several times and preferred these two.

Have a Try

Style 1
Style 1

Clean and more traditional interface Vague function modules

press to zoom
Style 2
Style 2

A strong contrast A distinct display

press to zoom

After comparing these two styles, I chose Style 2 as final design style due to its strongly contrasting color and clear layout leading users to concentrate on the content. When I finished the first single page and determined design style, I extracted fundamental color and typeface. Neutral color shows modernization and dark red as a highlight color. All typefaces are serif representing tradition. 

Colors & Font

Line-drawing Icons

Interaction & Interface

As a single-page website application, the browser's Forward/Back buttons cannot be used to navigate page history of this application. So a new challenge has emerged. I need to design a clear and complete navigation system within the application in order to avoid a potential usability impediment when users cannot use browser buttons to navigate.  


I am trying to develop this website myself and I still need some time to prepare and organize poetry information. Accordingly, its online version will come soon. Before that, I drew a simplified interactive demo with Marvel, a prototype tool, and you could have a quick look.