Functionality & Interactivity This website is linked to two JavaScript files with a lot of features inside. The first JavaScript file has mainly four features: 1. the YouTube video will fade in once the poster is clicked, this gives an interaction with users that introduce the story a little bit more once they click it; 2. the side navigation will not show up until the user scroll down to the content and the header navigation will increase its height when user hovers over it, this beautifies the content and webpage structure and makes it look dynamic; 3. for the main content of the whole story (including many parts): 1) part 1 has the start effect, which is to click ‘to start’ button (which is actually the first sentence of the whole book) and the first first paragraph will be toggled, and later on there will appear many buttons that users will need to click them to continue the story, this gives the interaction that user is rea
Posts
Visual Design The story is positive and inspiring but kind of mysterious so I've chosen a darker theme color. The website originally is expected to have a extreme simple and page displayed before the main page is loaded but after discussing with my tutor, this effect seems to be pointless and will only result in redundancy of content, so I've just abandoned that design. The background of the whole website is the picture with pink dots in the dark grey background, providing a bit dark theme to create the mystery of the story, which is more likely to catch readers’ eyes and matches the content of the story. Most of the buttons have the background same as the color of cork, giving a contrast to the background to make it easier for users to find buttons and distinguish them from the content of the story. The top left button is the giver logo, which comes from the cover of the book and makes the theme more like this story book. All the header navigation beside
Site Content The main page (home page) of this website will feature a head navigation bar which consists of an icon at the top left and ‘home’ ‘brief’ ‘author’ ‘content’ ‘contact us’ and there is a dropdown effect in ‘content’ part. The heading is followed by a giant story-related picture, and the rest of of the home page will be the content of the story. At the bottom, there is a footer with three columns, left column is for ‘contact us’ and a form attached, middle one is for the site map and the right one is for social media (Facebook, twitter and Instagram). The brief and author page will have the same structure but with different content. In the story content, there will be 6 parts and therefore 6 paragraph and headings, on which you click, the content of this part will be toggled. In the content part of all pages, the most important and appealing interactive effect is that when mouse hover over a paragraph, the paragraph will fade in a brown dashed
The Audience Audience: From children to the young adults (approximately age8 — 25) This story book originally aims to the children but it received very good feedback from people of all generation, especially the younger generation. So the reason why my story book aims from the children to young adult is that the younger generation are more easily to get inspiration from this story and the main character from this book is also at a young age which is more likely to attract the attention of the younger people. Characteristic: Kids & Teenagers: They are always curious and excited about adventure and rebellion, but they are easily got bored if the way the content is shown is not interesting. And this website fully utilized these feature that the main character is the one who is a rebel and get to a dangerous but promising adventure to save the fate of his community. Adults: Need passion for life and is getting on their
The Story The story is a book<The Giver> by Lois Lowery. This is a story of a boy who grow up in a world where there is no war no starvation no color and no emotion being selected as the Receiver of all memories for the whole community and fighting his way to let go of all memories so as to give the real world back to people. The genre of this story is fiction. Summary: Jonas is the main character in this story. Jonas' world is a place without warfare, starvation, extreme poverty. Everything is right under control. Everybody enjoy this world due to the fact that they do not have to bare the awful memory and the one that hurts. However, in this world, they do not have the memory as well as the emotion. When Jonas grow to 12-year-old, he is singled out. Everyone has been assigned a job and their own field. But Jonas was singled out to be selected and to be given the most honoured and vital position of this whole world--the Receiver. Thus,
Website design process User analysis: teenager — young adult website need to be attractive and appealing by putting large images at the front page Organisational system: Scheme: Combined(exact+ambiguous) Exact: Chronological (main line for story to develop) Ambiguous: Topical (divided into parts) Structure: (hypertext) Site map: 1 page keep scrolling down and navigation on the left, when click on nav the page scroll to the relevant line on the page Book: the Giver Content part1: Chapter1-2 part2: Chapter7-8 part3: Chapter10-11 part4: Chapter14-15 part5: Chapter18 part6: Chapter20-22 Nav side-right (global nav)—change shape of the dot after viewing the content dot points on the right side indicating where i am sub points on the right side show details of dot mouse hover on the points, brief cont
Breakdown of construction Step 1: decide topic — 1) Book — 2) Chapter Book: the Giver Content part1: Chapter1-2 part2: Chapter7-8 part3: Chapter10-11 part4: Chapter14-15 part5: Chapter18 part6: Chapter20-22 Step 2: consider the problems in BRIEF section age: from 12 to 30 genre: fiction translation: text, graph, sound, animation, video interaction: user choosable plot (different memories(good/bad—specified can have more options )) Step 3: consider about the design of the website website structure heading navigation —big block—parts footer —parts map—list/content title details side bar(or between header&body)—point to show where they are background moves as the mouse moves zoom in & animation when hover
Project Analysis The very first thing that I did when I received this project was analyse the assessment detail. Assessment Overview DUE : Monday 22 May 2017 1:00pm Students will be asked to design and implement a website in response to the brief below. The project will comprise: Design Report describing the design and development decisions for the website as they relate to the brief. Completed Website : HTML/CSS/JavaScript files that comprise a functioning website as described in the design report. The project will be submitted in 2 parts - the design report to Turnitin & completed website files to Blackboard.