Poetry
Field: UX/UI, Website
Role: Individual Work
Duration: 1 weeks | 2017
Brief: A new form to display classical Chinese poetry and prose
Inspiration
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 poetry. In this case, I desire to design a new website to show the brilliant classical Chinese poetry as well as its English version.
Structure
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
Clean and more traditional interface Vague function modules
A strong contrast A distinct display
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.
