Responsive website for Chinese shadow puppetry
UI/UX design
front-end development
site uploading
2017
Chinese shadow puppetry is an ancient form of theater which could date back to the Han dynasty (about 80BCE), but there are less and less young people who know well this culture.
So I decide to create an informative website on Chinese shadow puppetry in french. My goal is to let more users know about this old art in decline.
To create an useful website for its audience, the user research couldn't be missed. After some interviews with Chinese shadow puppetry, I created a personna to clarify eventual user jouney on my site. I tried to do the benchmark of websites with the same theme, even though it was hard to find similar ones
Personna
Benchmark
The research results guide me to think better about how to organise the information on my site and which style to choose for my design.
Users are invited to know more about Chinese shadow puppetry by browsing different sections of my site: its history, its current situation, its making through various media supports ; video, pictures and articles.
sitemap of the site
Calligraphy fonts, vintage color and clouds moving in the background create a mysterious and antique atmosphere. These elements represent precisely this old and mysterious art.
Feuille de style of the site
The home screen is designed to have everything in the website directly accessible. I create it based on one page scroll site principle. So this page is divided en four sections:
the first one is an introduction section, you can watch a classic video of Chinese puppetry theater to get a global idea about this art.
I dedicate the second one to its history. I create a time line with typical animated figurine of relevant time standing upon it to give user a direct view of its history. The use of animation make this page more attractive.
The third one is about current situation of this art. I used the same design principle as the session of history to create an attractive and comprehensive page for user. The map is a good tool to show the panoramic and actuality of Chinese puppetry theater.
Making is the subject of the fourth section. When users have general knowledge about Chinese puppetry theater, it will be fun for them to know how to make these pretty leather figurines.
From this page, you can find the most Representative things of puppetry theater in this region through video, slides and a piece of presentation article.
These pages make users know more details about the history of Chinese puppetry theater.
I put several pictures on these pages to present making process step by step. So users can know the making process clearly through pictures and textes.
