WEB DESIGN: APPLICATIONS, INTER-CONNECTIBILITY
FUNCTIONALITY & DESIGN SPECIFICATION DOCUMENT WEB PROJECT: STORY TELLING FOR KIDS
SUBMITTED BY, ASHNA LIZA SUNNY 201114006 M.DES 26/04/2012
As part of the academics (Master in Design), I was expected to design a website as a final semester project for the subject- Web Design: Applications, Inter-connectibility. As per the course, it was to introduce the students to the web concepts and design. The course was intended to be covering the basic technical requirements and production processes needed for a basic web site development and construction. Topics include site design, image processing, visual web editors, html and layout, interface design and basic behaviours. Through this project, I was exposed to the professional working pattern of web designing. The project demanded the basic technical skills and sense of aesthetics. The planning for the project was started soon after the beginning of the second semester. The website was established after a long process of finding the problem, data collection, analysis of data, creating the framework and finalizing the design.
WORK FLOW The very first step taken was deciding the topic on which each of the students would like to work. A lot of thought was needed put into deciding the topic. Initially, I wasn’t clear with an idea, but I was interested in doing a site for kids. A site which is interactive and colourful in a way which will grab the interests of the kids as well as through which the design basics I learned and the skills I acquired through the other parallel subjects can be applied. But it was important to come to a specific topic which will solve some problem or which will help a target group. Keeping my interest in mind, I decided to develop a website of story-telling for kids.
IDEA AND SITE GOALS: Telling stories is as basic to human beings as eating. Like food makes us live, stories makes us worth living. Usually, our grandparents or parents were the people who used to narrate stories to us when we were kids, mainly bedtime stories. Making the kids feel the presence of their loving and which also makes them curious and knowledgeable about different things around them through simple stories. It’s a best way to ease into a person's mind as well. Through this project I’m trying to portray a good way to tell stories within Indian context to kids, specifically Indian kids mainly from an age group of 6 to 8. Stories being the best way to entertain as well as inform kids, about their own culture and the basic morals that they should know. So, I chose Panchtantra Stories. These stories help the kids more to know their own culture and relate themselves into it. And the morals aim at their basic character formation. The medium I have chosen here for communication is ‘website’. Web is one of the most influential mediums in the new modern society. The kids will be exposed to this medium in its simplest form. Helping them to learn how to access it and make use of it.
2
The language chosen is English. As English is the international language and major medium in schools. The language will be simple and will accompany with simple illustrations and pictures which will complement the stories.
PERSONAS AND SCENARIOS: The personas and scenarios are done on the basis of some of the problems which can be solved by the use of the site. The problems are: •
Language problems
•
Lack of reading habits
•
Learn to use website
Some of the situations on which the target group would use the site: •
Part of school work
•
Insisted by parents or siblings
•
Interested in reading stories
•
Learn to use websites
PERSON
DESCRIPTION
PROBLEM AREA
STANDARD: 3rd
Since he is interested in
AGE: 8
reading, here I am
GENDER: MALE
introducing a different
SCHOOL MEDIUM: ENGLISH
medium to read stories other
PLACE: DELHI
than the books. Other than
HOBBIES: READING COMICS, PLAYING
comic books he will be
CRICKET, VIDEO GAMES, TELEVISION.
introduced to the stories of
FAMILY MEMBERS: FATHER, MOTHER
his own cultural context.
1) UDIT PATEL
OCCUPATION OF PARENTS: FATHER- BANK EMPLOYEE MOTHER- SCHOOL TEACHER NEIGHBOURHOOD: FRIENDS- THREE FRIENDS RELATIVES- NONE
SCENARIO 1 Udit loved to read comics very much. One day his mother came to know about this site of Panchtantra stories. She found it good; the morals of the stories were worth to think of. So, she
3
insisted Udit go through this site knowing his interest in reading. Here, he found it interesting to do interact with the new medium. 2) Shine Alex STANDARD: 1rd
Shine studying in a Hindi
AGE: 6
medium school has problem
GENDER: FEMALE
with English language.
SCHOOL MEDIUM: HINDI PLACE: DELHI HOBBIES: DANCING, TELEVISION, SPORTS. FAMILY MEMBERS: FATHER, MOTHER, ELDER BROTHER OCCUPATION OF PARENTS: FATHER- ENGINEER MOTHER- HOUSE WIFE NEIGHBOURHOOD: FRIENDS- NONE RELATIVES- NONE
SCENARIO 2 Shine is studying in a Hindi medium school. One day her teacher insisted her to visit this site so that she can improve her English language skills and will enhance her reading habits, knowing that the language used in the site is simple. That evening, Shine came home and asked her father to help her in having a look at this site. Her father assisted her in using the site. The site being simple and easily navigable, she didn’t find it difficult to handle it.
COMPETITIVE ANALYSIS: Here, by taking two other sites which are meant to serve the same purpose as that of the site I am planning to create. Through a competitive analysis of those, it is possible to figure out the flaws of these existing sites so that it won’t be repeated in the newly proposed site. In turn it will help to excel in the newly proposed design, by solving all those issues. These are the sites chosen for analysis: http://www.indianhindunames.com/panchatantra-stories.htm http://www.balmitra.com/storybook/panchatantra/pstories.asp
4
Rank order each site on a scale of 1 (poor) to 10 (excellent).
Site1 :
Site 2:
FEATURES
www.indianhindunames.com
www.balmitra.com
Site design
4
2
Navigation
7
7
Layout
6
4
Look and feel
5
3
From the analysis it’s evident that there are a lot of flaws in these two sites. The Site designs of both the sites are not that attractive. It lacks the right usage of colours and ordering of elements. The sites fail to provide a kiddie look to suit the user group. All these points should be taken into consideration while designing a site.
CONTENT: The content of the site is meant to be Indian folk tales. Panchtantra stories are selected out of all the other stories, which will suit the motive of the site. I have mainly selected two stories as samples to be set in the site. They are: • •
The story of blue jackal The jackal and the drum
Respective illustrations were also chosen. A brief about Panchtantra stories are also to be added. As an additional information, some information about the Panchtantra stories is also added.
INFORMATION ARCHITECTURE: The site map was made by prioritising the contents which were meant to put on to the site. The arrangement of the navigation was made accordingly. Three buttons are provided in the home page of the site. Each button meant for performing different purposes. The first button is READ ME which leads the user to the page provided with a list of stories to be chosen. The user can click on a story to read it. A BACK TO HOME button will also be provided in the page for better navigation. The second button in the home page is the KNOW ME button which takes the user to the page with the general details about Panchtantra stories. There is a LEAVE A NOTE page also which is accessible from the respective home page button. Here the kid, parents or teachers can actually write down there experience, comments or suggestions about the site which will help in improving the site according to the demand. As an additional feature, the list of stories provided in the site will be accessible from every page in the site to reduce confusion and easy navigation. Every page is
5
connected to each other through buttons, which reduces the time and effort to be put by the user. (keeping the fact in mind that the major users are kids.) SITE MAP of the proposed site
WIRE FRAME:
6
Rough designs were made to make the kind of navigation (shown in the sitemap) possible. The wire frame of the home page is given above. On the other hand MOOD BOARD was made to decide the kind of colours, images and illustrations to be used in the site. MOOD BOARD:
7
Even the fonts were decided that it should be of kiddie style. ‘Comic Sans’ is the font used for the content. The name of the site is in ‘Tempus Sans ITC’. The text links are set in ‘Arial’. The rough layout and illustration for the home page is given below:
Sketches of the inner pages were also made. The finalized designs were created using the software Adobe Illustrator and Photoshop. The active home page was designed in Adobe Flash, in which the animated buttons were made. The rest of the pages were created making use of HTML and CSS.
CONCLUSION:
8
The final layout is given above. Through this project, I was exposed to the professional approaches of web designing, which made me aware of the importance of each and every step taken to reach the final project output, the web site itself. It also helped in enhancing the basic design skills, technical skills and to apply them in a different platform. The process which was followed in the entire project was too useful in giving the finest output possible.
9