WEB DESIGN AND NEW MEDIA - FINAL PROJECT

8 November - 5 December  2017 (Week 10- Week 14)
Aurelia Regina Sutjahjokartiko, (0329953)
Web Design and New Media
Final Project : Interactive Storytelling Web site
Instruction

 Final Project – Interactive Storytelling Web site (40%)

“Interactive storytelling is the art of telling stories enhanced with technological, social
or collaborative interactive features to offer content adapted to new behaviors in a
rapidly changing cultural ecosystem.”
You will design an interactive storytelling Web site based on content given. You may
include 5 elements of multimedia in the website.

Progression flow:
• Propose idea of the website – Week 4
• Flowchart/ information structure/storyboard – Week 5
• Mood board/Concept board – Week 6
• Wireframe – Week 7
• Prototype – Week 8
• Development (Site testing and launch) – Week 9-14*

Requirement:
Students must follow the progression flow as given in completing the task. Marks will
be given based on the progression flow stated above. The total file size of the
website should not exceed 20mb.
Objective:
The purpose of the assignment is to discover the ability of skill that you have required
from the lesson throughout the semester. Students should be able to create a
website using HTML and CSS and create a usable interface with specific typography
for web.

 Submission Requirement:
Students must organize the folder structure accordingly. A clear folder structure helps
in making sure that the project can be easily access by examiner and moderators.

All submission will be done through online (TImES) within the given time.
Project Progression

  • Idea of the website and References
Basicly, i want to make the website simple and not to much of word, because the target audience is children (6-12 years old) and as we know children nowadays so sophisticate use technology such as ipad, phone, laptop, even they can buy in-app purchase for game. So, i was searching all interactive website but not all website is children friendly. However, i found good website. The website called Evelux. 

Evelux Website
They used perspective movement, so where the cursor move, the image also move based on the cursor perspective. To be honest, this is too much for 4-weeks progression, because i only learn css so far and no Javascript basic on my mind. Then, i come up with parallax website. If you see firewatch website, the creator used parallax movement but vertical scrolling. The website i want is horizontal movement and also if the user scrolls, the website is move. So far, i didnt found the javascript for scrolling movement especially for adobe animate. Why i am use adobe animate, because, i have experience make parallax on adobe animate, so i just re-used the method.

About font, i found some website that they give some children friendly-type family. You can go to YouWorkForThem . This is a good website and also official website for typography. Many big companies use this, but, the font that they provide is with price (not free). So, what can i do is just analyze and identify. Here is some example of children friendly-type family

source : youworkforthem.com

source : youworkforthem.com

source : youworkforthem.com
If you see the examples, the font is all rounded and not complicated because, basicly, children will learn what they catch first. So, i decided to search in google font and i found good font. That font that i found is called Baloo Bhajiaan and this is free !

source : google font

source : google font
  • Storyboard / Concept board / Wireframe
My storyboard
Digital version
As i said before, this website basicly parallax horizontal scrolling, but adobe animate that i used is doesnt support with parallax scrolling plug-in and etc (fyi, Adobe Muse is support with that plug-in), so i decided to change the hamburger menu with basic menu in upper-right-side.
  • Prototype (First Launch)

I found some not good looking with this website, because they have white lines surround the picture and that makes me annoying. You can see the picture below

wrong website
So, i decide to change everything (not at all) especially for homepage, and for the animation itself, some animation it is not smooth and not relatable, so i also change it. You can see final result on Final website section.
  • Final Website

So, if you see in that video, i added some circle in that menu to let the user that he/she on that current page.

Comments

Post a Comment

Popular posts from this blog

USABILITY & MOBILE APPLICATION 2

Image
Aurelia Regina Sutjahjokartiko , (0329953) Usability and Mobile Applications 2 Week 1 - Exercise (Information Architecture & Call to Action) The Design School at Taylor's main website Target audience : Students finishing high school, wants to enter UNI people who want to further study Diploma students who want to continue their study parents anyone who’s interested in studying in Taylors, and has adequate finance international students Goals of the website : Goals (of the uni):  let potential students find out more about the university (courses, programs, fees, etc.  have people enroll into the uni impress target audience how advance and good Taylor’s University is Goals (parents) *SECONDARY*: Whether the school is worth investing on for their kids Goals (students) *PRIMARY*:  Look for their desired course or program (header, search for a programme ) How good is the course (student works, rankings) Find out about the faci
Read more

WEEK 1–WEEK 5 : THE EXERCISE

Image
28 March 2017 - 25 April 2017 (Week 1- Week 5) Aurelia Regina Sutjahjokartiko, (0329953) Typography and  Hypertextuality Exercises Lecture 1 28 March 2017 (week 1) Introduce Typography Figure 1. Calligraphy Exercise We were given briefing about module outline, introduce types of assignment and little introduction about typography such as Western Calligraphy. After that, my group work should select one kind of Western Calligraphy and we chose Copperplate Calligraphy. 1. Western calligraphy is the art of writing and penmanship as practiced in the Western world, especially using the Latin alphabet (but also including calligraphic use of the Cyrillic and Greek alphabets, as opposed to "Eastern" traditions such as Perso-Arabic, Chinese or Indian calligraphy). 2. Copperplate Calligraphy Copperplate is a style of calligraphic writing that uses a pointed steel nib or quill to produce a style of lettering characterized by both thick and thin strokes. C
Read more

VIDEO EDITING AND PRODUCTION - PROJECT 1

Image
30 Agustus 2017 - 11 October 2017 (Week 1- Week7) Aurelia Regina Sutjahjokartiko ,  (0329953)   Video Editing and Production Project 1 : Storyboard Lecture 2 7 September 2017 Cinematography Type of shoot : 1. Extreme Wide Shot (EWS) This shot is to convey / introduce a location where character is in his/her environment to audience. Basicly, it is about geographical location. 2. Wideshot (WS) This shot include entire subject and important object in the immidiate surroundings, but this is shorter shoot than extreme wide shot. 3. Medium Wide Shot (MWS) This ot usually cut off across the legs above or below knees. This shoot is to show the physical setting in which the action is taking place. 4. Medium Shot 1 (MS1) This shot shows the subject that are important to understanding what the subject is doing. Gesture and expression more visible. 5. Medium Shot 2 (MS2) A medium shot of a person performing movement or action, on the other hand, would have to include his arms and
Read more