yfan.jpg

My book "http://gradnewmedia.academyart.edu/~02470738/book/book.html"


Index
Abstract
Details
Statement of Interest
Mind Map
Content and functions
Site Map
Thumbnails
Mood board
Competitive Analysis
User Persona
Task Flowchart
Wireframe
Walk Through
Timeline


Abstract

Chinese mask patterns have developed over a period reaching back to the ancient totems of 6th-7th century BC. Chinese opera has a history of over 200 years. As a special art form in Chinese operas, facial makeup distinctly shows the different roles by means of artistic exaggeration combined with truthful portrayal and symbolism. Each color scheme represents a specific characteristic. There are no books or websites that have compiled the masks along with the particular story associated with each. Even in Asian museums, when masks are displayed, they are done so with no background details.
My project is an interactive educational web site, which will introduce Chinese opera masks and through story to represent the detail of each character. Therefore, I want to use a famous story that from Chinese history to give user the details of the roles with their distinct characteristics. Meanwhile, I will use my own illustration style to portray them. In my project, I will use this combination to trace the history of masks in Chinese opera through an interactive approach. Moreover I will create a platform to let users create own mask. This project will be an innovative way, through dynamic visual effects to present the Chinese masks art and let user to participant the interactive game.

Details
Target audience
my target audience is people with an interest in Chinese culture or specifically the traditions of Chinese opera. In addition with its interactive approach.
Benefits

Hard:
Promoting and develop interest in traditional culture.
Provide a platform to introduce Chinese culture, allowing more people to learn about it.
Soft:

Give users an interesting way to learn Chinese culture.
user will enjoy creating their own masks.

Objective
I will give user an interactive platform to understand Chinese opera mask art. Users not only learn the history by using the dynamic style, but also have an interactive experience to participate in the culture. I will use action Script and JavaScript to support the dynamic style and interactive functions. Most of current same category websites provide the heavy texts and few pictures. As users, they will do not know what meaning is, and what the story at its background. Hence, I intend to use an attractive way to tell user the story and history. Based on the history background and story, user can imagine and create own mask. This way would be attract user to participate in this game, make them happy and fan. Top

Colors symbolization in Chinese opera
Red face indicates devotion, courage bravery, uprightness and loyalty.
Black face indicates either a rough and bold character or an impartial and selfless personality.
Yellow face signifies fierceness, ambition.
Purple face stands for uprightness, sophistication and cool-headed
Blue face represents staunchness, fierceness and astuteness.
White face suggests sinister, treacherousness, suspicious and craftiness.
Green face tells the audience that the character is impulsive and violent and a total lack of self-restraint
.
Top

Platforms
system requirement: PC/MAC/Linux
Browser types: Internet Explorer/Safari/Firefox/
Screen & resolution: At least 800 x 600, at least 16 bit color
software requirement: Flash player (version 9.0 or above) Top

Statement of Interesting
I was influenced by the Chinese traditional culture from my childhood. My families have the enthusiasm to Chinese opera and traditional Chinese painting. I think that this kind of art atmosphere influenced me to interest in the Chinese art. For me, one of the most striking aspects of the Chinese Opera is the Masks and this kind of facial Make-up used to portray the various characters. Several years ago, I had an experience to draw the mask in the materials to make crafts during my undergraduate school. I learned that the colors composed each mask depend on personality of each character. It is a sort of special style, the use of symbolic colors, stylized lines, and fantastical facial exaggeration all serve the performance magic and grandeur.

Several years ago, I had an opportunity to try to create some dynamic and interactive design for my clients, and then I thought that I starting to love this field. Moreover, I want to put my illustration and graphic skill in to this project to make it unique. After switching my major to Computer arts new media, I have had an amazing experience. Learning and using web technology to create the new style art, and I understand that I need to use new logic to think about design. Now, I have a good opportunity to use the interactive design to present my concept. Therefore, I will use the new technology and innovative ways to communicate and promote the traditional Chinese art. Top


Mind map
mindMap.jpgTop

Content and functional
In final content, there are four main sections of navigation button.
1. Mask in culture
2. Opera mask in story
3. Design mask


The first part is
mask in Chinese culture (mask origin and patterns development). Second part is mask in Chinese opera (story-by using a famous history story to present different mask of character, color schemes). The last part, it provides a platform for use to design own mask and share it to others.


1. mask in Chinese culture
In this section, it will show the history of Chinese mask and the patterns development by using a dynamic time line.

2. opera mask in story
In this section, I will introduce the story by using characters, event. Through the color schemes to present the detail of color masks.
3. design mask
After learn the detail about the masks, user will know that each color scheme meaning. They can design own masks through choosing the different elements and colors that I provided.
Top

Site Map
sitemap_y.jpg
Top

Thumbnails




yfan_1.jpg

yfan_2.jpg

yfan_3.jpg

yfan_4.jpg

yfan_5.jpg

yfan_6.jpg

yfan_7.jpg

yfan_8.jpg Top
Mood board

yuan_moodBoard.jpg


yuan_moodBoard2.jpg

Top

Competitive analysis
I did the research about art museums and art and culture web sites. I choose museum to be my competitive objects, it because they have the same content with my project. If we go to museum, how does the experience influence how we think of the various cultures represented in museum? No matter how complete a collection in a museum is, there is no way we as “others” can ever get a true idea of there cultural identity.
Most of them contain the plenty artworks, and provide the real tour when visitor go there. However, seems the main way is display and show art and culture. They did not create a platform to let visitor to participate in the cultures, in other words, there is no user interactive experience.

Asian art museum
yuan_asianArtmuseum.jpg

Cantor Arts Center
yuan_standfordmuseum.jpg
Mi Fu's Art
yuan_mifu.jpg
Arts Cultural-China
yuan_cultureChina.jpg
China Culture org
yuan_chinaCultureorg.jpg
yuan_competitive_website.jpg Top

User analysis

Detail target audience specification:
My final project is to design an interactive educational website to introduce Chinese opera masks. The user will not only learn about Chinese culture, but also has an experience to create own masks.
Therefore, I will target two distinctive groups: first group are young people, who interested in Asian cultures and interested in history story. Second group would be interested in to create unique and new things.
Age: 20-40(female/male)
Gender: female/male
Education: people have little or no prior knowledge of Chinese, and they have some simple computer knowledge.

yuan_demographic_user.jpg
yuan_user1.jpg
yuan_user2.jpg
yuan_user3.jpg Top

*Task Flowchart
TaskFlowchart_y.jpg
Top

Wireframe

wireframe_y1.jpg

wireframe_y2.jpg

wireframe_y3.jpg

wireframe_y4.jpg
Top

Walk Through
userWorkThrough_y1.jpg
................................................................................................................................................................................
userWorkThrough_y2.jpg
................................................................................................................................................................................

userWorkThrough_y3.jpg
................................................................................................................................................................................

userWorkThrough_y4.jpg
................................................................................................................................................................................

userWorkThrough_y5.jpg
................................................................................................................................................................................


Cover
cover_y.jpg Top
Timeline
timeline_y.jpg