K o r e a n Tr a d i t i o n a l H o u s e
www.thehanokhouse.com
Table of Contents
Contents
5
Statement of Interest
6
Abstract
7
Comparative Product Research
9
Comparative Analysis
19
Information Architecture
20
Target Audience
23
Wireframe
29
User Scenarios & User Flow
37
Visual Design
77
Summarize User Testing/ Future Ex-
87
pansion
91
Conclusion
92
About me
94
5
Abstract Create an educational website to illustrate the history and cultural importantce of Hanok, a traditional style of Korean house.
6
Statement of Interest Cultural traditions are fundamental to life. This is true because what we do in the future is based on the past. When I studied art in Korea, I became interested in traditional patterns and shapes, so I used them in my artwork. Therefore, for thesis project I will create a cultural educational website about Hanok, which are a type of traditional Korean house. On the website, I will give information about the history of Hanok highlighting the beauty of distinctive architectural featurs and elements. Imagine of Hanok will be set in changing seasonal landscape because the harmonicas placement of the Hanok in its surrounding area is an important building concept for traditional architecture. For instance, environment-friendly aspects of traditional Korean houses range from the structure’s inner layout to the building materials, which were used. Another unique feature of traditional houses is their special design for cooling the interior in summer and heating the interior in winter. Also, the materials are all natural and recyclable, and do not cause pollution. The shapes of Hanoks differ regionally.
7
8
Comparative Analysis
9
http://www.monet2010.com/
The Monet 2010 website (official website for the Monet 2010 exhibition in Paris) is more than a digital rendering of the Monet exhibition. Users to the site get the opportunity of a real intimacy with the artist’s works, lowering any social or geographical barriers. The website enables a new type of access to culture, where the user can wander inside Monet’s work and interact with the canvas.
10
Pros -The designer simply used art pieces of Monet and those washed effect as transition. -The atmosphere is very elegant and Monet. Cons -It takes time to loading
11
http://www.coraline.com/
Explore the imaginative world of the animated film Coraline.
12
Pros - Relate to movie concept - Nice parallel navigation design at main of site Cons - Some of pages looks too busy - The usability of this site
13
http://www.orientalarchitecture.com/index.php
www.orientalarchitecture.com, a photographic survey of Asia’s architectural heritage. Here you can view over 15,000 photos of 791 sites in twenty-one countries, with background information and virtual tours. This website is a collection of photos from many different contributors.
14
Pros - Easy to get directions about specific countries and cities. - Helps for searching with map overview Asia. - Usefulness researching part which helps to find information easily and faster. Cons - Less information about architecture - Some page has too long. - Sub navigation has too much names. 15
http://www.Kia.com
While Kia’s reporting sits exclusively within a PDF, their website includes an extensive Flash animation. The way in which new digital technologies are used on the Kia website is unique in this sample.
16
Pros - Service technologies and provides an immersive online experience while focusing on ease of navigation. - Usefulness in new-vehicle shopping, including navigation, speed, appearance and information/content. Cons - Some page fonts are too small, so it hard to read.
17
http://wallpapers.x3studios.com/
X3 Studios Wallpapers is a web application developed by X3 Studios and SpaceRabbit. Click to create and save your very own desktop wallpaper.
18
Pros - Easy to get next step - interactive concept(own desktop wallpaper) Cons - need more elements of style
Comparative Analysis
Comparative Analysis Infomation
User experience
Interactive Funtion
Usability
Motion Graphics
Hanok
monet2010
coraline
Orientalarchitecture
Kia
wallpapers
Good
Fair
Poor
19
Information Architecture
20
HANOK Intro
Architecture
Hanok Type
Home
Choga Zoom Rotation View
Giwa
Giwa
Choga
History
Prehistoric times 4C - 7C
Share
Giwa
Choga
10C - 13C
Exterior
Interior
13C - 18C Spring Modern times
Exterior
Interior
Summer Stylobate
SARANG Room
Foundation stone
AN Room
Fall Stylobate
Sarang Room
Winter Foundation stone Red clay Wood Window Paper Roof Eaves
An Room
Red clay
Kitchen
Byuldang Room
Wood
Dea Chung
Kitchen
Window
On Dol
Dea Chung
Paper
On Dol
Roof
Panorama view
Download Send E-mail Facebook
Panorama view
Eaves Slide Show
Slide Show
21
Target Audience / Technical Specification
Target Platforms -Support Flash program PC -Support Flash program MAC Target Computer Operating Systems -Microsoft Internet Explprer -Apple Safari -Google Chrome Moniter size -1024 x 768 and bigger
24
The target audience of this site is Westerner people, language of English who are interested in Korean traditional architecture, finding information about traditional house and how to appreciate it.
25
26
Jeniffer Song
Doris Davis
-Nationality: American -Gender: Female -Age: 25 -Occupation: Student -Education: Brooks Institute Santa Barbara, Architecture -Hobbies: Swimming, Photography
-Nationality: American -Gender: Female -Age: 50 -Occupation: Tourist -Education: The University of Chicago -Hobbies: watching movie and traveling
“Get detailed information about the houses roof of the exterior.”
“Navigation to the interior details of the kitchen.”
She is a student majoring in architecture. She went to Korea town today and saw the some of traditional houses it called “Giwa House”. There are roofs red ceramic with tiles that makes her very curious and interested in using natural materials are typical Asian motifs in their work. So she wants to get detailed information about the Giwa house roof(Eaves) of the exterior.
She plans to go to Korea with your family in the vacation. When she and family traveling, will stay traditional Korean house for the cultural experience. She wants to know the typical layout of the interior kitchen looks like before you go.
Aram Seong
John Adrian
-Nationality: Korean American -Gender: Male -Age: 33 -Occupation: Korea Tourism Organization -Education:The University of Han Yang in Korea MFA -Hobbies: Photography
-Nationality: American -Gender: Male -Age: 42 -Occupation: University of California, Los Angeles. -Education: University of California MFA -Hobbies: Surfing, Tour
“Send to him an invitation email for sharing beauty of Korean traditional house.”
His Organization has a special project this month. It is called, “Visiting Korean House”. He has coordinated and made plans to invite someone related to Korean or Asian culture. He found a curator who works at the Asian Museum in San Francisco, and you need to send to him an invitation card for sharing beauty of Korean traditional house view.
“He wants to know how the Hanok has been change over time.”
He is an architectural designer. He is working on a new project, but suddenly your client changes their mind and wants to you design their house with Asian style. He needs to find out more about modern Asian architecture, so he wants to know how the Hanok has been change over time.
27
Wireframes
Home page landing_ ARCHITECTURE_Exterior view
1.
2.
7.
Go to Choga House
6.
5. Exterior
AR CHITECTURE
This page is home page will show main of house also details of the architecture of the house. There are two parts: the exterior and interior. The exterior part gives details of architectural elements and functions. This page allows the user to see a 360 degree view of Hanok building. Also, the user can zoom in using the mouse. 30
HANOK TY PE
Interior
4. HIST OR YE
1. Logo 2. Visual (exterior&interior) 3. Main navigation 4. Sub navigation 5. Zoom drag button 6. Go to Choga house button 7. Direction button
-Card
3.
Home page landing_ ARCHITECTURE_Exterior view_Detail view
1.
4.
6.
Roof The roof is covered in Giwa, which is a kind of pottery made of baked clay. Usually black Giwa made of loam was used but sometimes blue Giwa painted with enamel was used too. According to the literature, it seems that Giwa appeared about 2,000 years ago and there is a record that 4 masters of Baekjae Dynasty made Giwa in Japan in the 7th century. The Giwa of Korea pairs 1/4 cylinder of Amgiwa (female giwa) and 1/2 cylinder of Sugiwa (male giwa) and the roof is made by covering Amgiwa with Sugiwa.
5.
2.
Slide Show
AR CHITECTURE
HANOK TY PE
HIST OR YE
-Card
3.
1. Logo 2. Visual (Roof ) 3. Main navigation 4. Description of roof 5. Button (Slide show) 6. Close button
3131
ARCHITECTURE_Interior view
1.
2.
6. Go to Giwa House
5. Exterior
AR CHITECTURE
HANOK TY PE
The interior part will give information about functions of spaces, like the Sarang room for the men and An room for women. Also, this page has slideshows to show how what Hanok life looks like. A transition effect will play when the user moves the mouse over a button.
32
Interior
4. HIST OR YE
1. Logo 2. Visual (interior) 3. Main navigation 4. Sub navigation 5. Go to Choga house button 6. Direction button
-Card
3.
Hanok Type_landing page
1.
Go to Choga House
Go to Giwa House
3.
2.
5.
4.
Ha nok is a Korean traditional house.The biggest characteristic of hanok is that it has a well-balancedr,floo good for
both heating and cooling. The Korean Peninsula has continental climates and hanok is unique because of its ability to provide for different weathers.
ARCHITECTURE
HANOK TY PE
This page is Information of Hanok over all. Giwa house button direct to Architecture Giwa and Choga house button direct to Architeture Choga.
HIST OR YE
-Card
6.
1. Logo 2. Visual (Giwa house),button to go to Giwa architecture) 3. Visual (Choga house), button to go to Choga architecture) 4. Description of Hanok 5. Slide show(thumbnail) 6. Main navigation
33
1.
2. 6.
4. Prehistoric
Prehistoric
The historical section gives information about how Hanok has changed at each point in time. It includes a timeline with pop-up animation.
34
HIST OR Y
HANOK TY PE
ARCHITECTURE
4-7c
10-13c
E-Ca rd 13-18c
1. Logo 2. Flash motion 3. Main navigation 4. Description 5. Sub navigation(Time line) 6. Direction button for next
3. Modern
5.
1.
Click y our favorite house style and share with your friends 2.
4. ARCHITECTURE
This page is the entertainment part of this website. There are views of Hanok in the four seasons. This will showcase the beauty of Hanok, so users can save, send e mail and connect to social media.
3.
HANOK TY PE
HIST OR Y
E- Card
1. Logo 2. Giwa house image 3. Choga house image 4. Main navigation
35
User Scenarios & User Flow
Get detailed information about the houses roof of the exterior.
Task 1 User: Student Situation: You are a student majoring in architecture. You went to Korea town today and saw the some of traditional houses it called “Giwa House�. There are roofs red ceramic with tiles that makes you very curious and interested in using natural materials are typical Asian motifs in their work. So you want to get detailed information about the Giwa house roof (Eves) of the exterior.
Home Architecture Giwa Rotation view of House Zoom button at bottom of house
Exterior
38
Eaves
Slide show
There are eight blue dots that direct to the information of the part house. Also, there is a “drag� button at middle of image lets users rotate the house.
39
When users hover over the blue dot, a label( direction of name ) will show up.
40
When they click one blue dot, a detail page will show up. The detail page has a zoom image, which allows users to choose one part of the house. On the left side white box will show up.
41
The slide show button is below the text information at the left side.
42
After clicking the slide show button, the slide show page pops up. There are different thumbnail images at bottom of picture. 43
Navigation to the interior details of the kitchen.
Task 2 User: Tourist Situation: You are Tourist. You plan to go to Korea with your family in the vacation. When you and family traveling, will stay traditional Korean house for the cultural experience. You want to know the typical layout of the interior kitchen looks like before you go.
Home Architecture Giwa Rotation view of House Zoom button at bottom of house
Interior
Kechen
Panorama View
360 degree view of the room
44
The home page has buttons for exterior and interior at the upper main navigation. 45
When the user hovers over the interior thumbnail image button, it changes the color to be clickable.
46
Interior view of page. The main image is the top view of house without the roof.
47
When the user hovers over the blue dot, a label(name of location) will show up.
48
The inside interior page has a zoom image of the top view of the house. Also, it has information on the left side. If user wants to see more about the inside, click the “ go to inside� button at over the right image. 49
The inside view of the house has a panorama image. The mouse controls the movement of the panorama( left and right).
50
The inside view of the house has a panorama image. The mouse controls the movement of the panorama( Description of the room).
51
Send to him an invitation email for sharing beauty of Korean traditional house.
Task 3 User: Korean (work at Korea Tourism Organization) Situation: Your Organization has a special project this month. It is called, “Visiting Korean House�. You have coordinated and made plans to invite someone related to Korean or Asian culture. You found a curator who works at the Asian Museum in San Francisco, and you need to send to him an invitation card for sharing beauty of Korean traditional house view.
Home
Share
Giwa
Choose house style
52
Spring
Choose season
E - mail
Share page has two different styles of the house.
53
The user clicks one house style.
54
55
Click one of the season.
56
the season view will show up with the transition animation.
57
There are icons at the bottom of image where the user can save, send email and connect to social media.
58
email pop up page.
59
He wants to know how the Hanok has been change over time. Task 4 User: Architectural Designer Situation: You are an architectural designer. You are working on a new project, but suddenly your client changes his mind and wants to you design their house with Asian style. You need to find out more about modern Asian architecture, so you want to know how the Hanok has been change over time.
Home
History
Modern
OR
Prehistoric
Use sub navigation at the bottom
4-7C
Use > arrow buttons at side
60
10 - 13C
13 - 18C
Modern
The homepage has the main navigation at very the bottom of site. The user finds the “history� button.
61
There are two ways to look through the history information. First, there are arrows on both sides of the image that is a direction to go next or previous. Second, the sub navigation of time line is at the bottom of main navigation.
62
4-7c has a two different styles, so there are sub buttons at the upper left of the image.(Giwa)
63
4-7c has a two different styles, so there are sub buttons at the upper left of the image.(Choga)
64
10 -13c information with images
65
13 -18c information with images
66
Modern Hanok information with images
67
Task 5 User: Student Situation: You are a student majoring in architecture. You have homework to design a house with Asian style house. There are two different house style of house. You know Giwa house, but you not familiar with Choga house. So you want to get detailed information about the houses roof of the choga.
Architecture Choga
Home
Exterior
68
Roof
Slide show
The home page has another style of the house thumbnail photo. The “Choga house� at the bottom right.
69
The Choga house image will show up at the center of site with blue dots. It steps are same as Giwa house.
70
71
72
73
74
Visual Design
75
Inspirations
76
Logo Design
77
Four seasons of background website design 78
Rotation view of houses 79
Home This page allows the user to see a 360 degree view of Hanok building. Also, the user can zoom in using the mouse
Architecture / Giwa / Interior The main image is the top view of house without the roof.
80
History Images will show up with animation.
Share / Season Images starts animation transition.
81
Design of season images
Spring
82
Summer
Fall
Winter
83
Intro Movie
84
Intro movie of the Hanok project is imagine of seasonal landscape, because the harmonicas placement of Hanok in its surrounding area is an important building concept for traditional architecture. There are ink and brush effect at beginning part, which translate them for Asian traditional feeling.
85
86
Summarize User Testing / Future Expansion
87
I got comments about “360 degree view” part which is not given much of expectation. I combine “360 degree view” and “Architecture”. There are no “360 degree view”, but “Architecture” provide to user see not only rotation view; also get detail information in “Architecture”.
I put the dots at main page, so user direct to get in side of house details. 88
There are two types of direction sub menu. The first is sub, menu at the bottom and the other one is the blue point at the picture. Which requres making sure that the user selects one, changing either coslor or bold type or using one way direction.
Use one way ditection menu
89
The name of E - Card change to Share, because Inside this page has Facebook, Twitter and Save as function. so it is more about sharing.
90
Future Expansion 1.show where some of these houses are in Korea – map with locations and the ability for viewer to find some house to visit in person. 2. Also making all house 3d rotation view.
91
Conclusion
92
The Hanok project is the first website I made that uses the flash program. I am always dreamed about creating a unique website combining my background (art) skills. One of challenges of this project was bringing 3D images to a Flash and making an interesting look. Also, I spent most of my time creating visual design concerned of user experience of this project. After finishing this project, I learned how to cord AS2 and AS3 and use motion effects to make website look interesting. Also, I studied the After Effect program for creating intro movie. All of these skills I learned will be important in my future career.
93
94