Week 14 Preparation for pitch presentation

After the submission of the blog, there will have a pitch presentation at 27/8/16. Therefore, some preparation need to be done for the pitch presentation.

Presentation slide

Detail design

I have create a complete web design by using Wix.com 

Here is the link to go through:

http://yukikoying1995.wixsite.com/yukiko

Video for the final step

After that, I am going to do a preparation by doing more rehearsal for the presentation!

Week 13 Preparation for Prospectus (Part 4)

After the content is cleared, I have done some design at the prospectus document. Below is the design of the prospectus:

 

After that, the prospectus is ready to be passed up.  

Week 13 Preparation for Prospectus Draft (Part 3)

Based on the feedback from Sweii before, some changes have made in the content of the prospectus document.

Target Audience 

The possibilities characters from the audience that would interest for this project are people that suffer with depression. Most of the projects that have chosen for the project are social awareness. Below are the example of the projects:

1) HelloJoy Company

http://lights.helloenjoy.com/

The company have designed a website by using the music from Ellie Goulding which is “Lights” and it is done by using WebGL. Following through the lyrics from the music “Lights” as below: 

“You show the lights that stop me turn to stone.

You shine it when I'm alone.

And so I tell myself that I'll be strong.

And dreaming when they're gone” 

The lyric is meaningful and keep encourage people to move on when they facing in the dark. Besides, the website is done by using WebGL and have showed out how amazing this coding in creating out the future website.

2) VOO company

https://www.thiswaslouisesphone.com/

The company have designed a website which allow user to have an awareness of cyber bully. Many teenagers feel ashamed to talk about the problem. The website have showed strong message to prevent cyber bully and the way to present the message is brilliant and interesting.

Ramin Afshar stated that the internet has become an integral part of our lives and it's not something that you can turn off or hide away.The installation shows a room full to bursting with 600 large balloons, each with a real message Louise received written on it. Louise's phone sits in the center of the room on a small platform, a small and seemingly innocuous object that in truth acts as a helpless gateway to all the hate literally hovering above it. On the This Was Louise's Phone website, visitors can take a tour of the installation to read the messages, which are now available both in English and the original French.

3) Befrienders centre

http://www.befrienders.org.my/index.html

Befrienders is the KL non-profit organization centre or website which formed by a group of professional psychiatrists and psychologists from University Hospital, Kuala Lumpur. In 1970, a group of pioneer Malaysians was concerned about the emotional well-being of the community after the occurrence of communal riots on the 13th May 1969. Until now, the movement has spread to about 40 countries and now have total 300 centres around the world. The chairman from Befriender KL has stated that the suicidal person is afraid of being labelled as weak and fears being ridiculed. The purpose of Befrienders is providing the emotional support to people who are suicidal, depressed or in despair. Befrienders always stand by the people that need help and reduce the pain the others face. From the Health Ministry survey, Befrienders are very concerned about the increase in suicides among young people in all communities and most of the suicide people are teenagers.

There are still left user journey, resources ,  risk assesement, promotion strategies and final outcome.

User Journey 

Type of testing	Detail information
W.A.O Survey	Analysis the detail information for W.A.O and how they prefer the design for the website.
Alpha Test	The graphic will be all apply in the website and the control button can click and go to next page.
Beta Test	This will be the final user testing which the website have done 80 % of the interaction.

Start from the week 3 of the September, a survey will be carried out and make some adjustment and improvement in the content of website. The timeline that will take to complete the testing is two weeks. At the week 3 of November, Alpha test will be carried out to the user to make some changes and enhancement in the website. In this stage, the website should be 50% completed which user can click the button and go through next page. Besides, the heart shape needs to be successful to be clicked and interact. The timeline for the stage will be two weeks because the interaction and the content of the website will be changed according to the feedback of the Alpha test. After that, Beta test will be carried out to the user. The progress in this stage will be included in the music and the interaction of the website is done. The timeline for the stage will be two weeks. For these two weeks, the website will be improved based on the feedback from the Beta test. In this stage, the website should be 90% done.

Resources

Item	Budget /From where	Rationale
Computer/Laptop	Borrow from ID department	To make a showcase of the website to the user
Extension Cable	Borrow from ID Department	To provide the electric
Internet Cable	Borrow from ID Department	To connect wifi and internet. For backup.
Adobe Dreamweaver	Original from laptop	To test with the coding(Three js / Javascript) and make the website go through the internet
Adobe Audition	Original from laptop	To edit and mix the sound for the website
Adobe Flash Professional	Original from laptop	To animate the final video
Adobe illustration /Photoshop	Original from laptop	To design the interface of the website
Domain	RM 90 from server freak	To insert the website and make sure it will went through online.

Risk Assesement 

Issues	Solution
Wifi Connection	-Prepare a backup internet cable. -Prepare hotspot.
Coding Error	Keep testing and debugging with coding
Failed to open computer	Prepare a backup computer

Promotion Strategies 

Before writing for the way to promote website, some research have searched through online on how to promote the website successfully. After look through the website, I have decided a few ways to promote the website.

The first method is sharing the website through the social media. With speed of the internet, the website can be spread through global and share through everyone and everywhere. Before that, the website will upload to Awwards website. After that, hash tags such as “#WeAreOne will be added in. 

The second method is creating a walkthrough video and uploads to Youtube. By this method, user can link in to the website and subscribe to the Youtube Channel. User also can drop comments easily by going through the video. 

The third method is to upload the website to Kickstarter project and set target goal to for it .Once the goal is success to be achieved, the website will be easy to be spread through online. Then, it can be shared through global again.

Final Submission 

The final outcome of the project will be an interactive website. To produce a professional website, it will need well planning strategies. Before upload the website, it will need a lot of user testing such as Alpha test and Beta test. After that, the website will be improved and enhanced based on the feedback. There will also have a backup plan for the content of the website just in case some errors have happened. The website also needs to ensure that can play through with a smooth line. Besides that, the interface design of the website need to be consistent and well flow. With that kind of method, a good and professional website will be managed to create out.  

Reference

Anon, (2016). The Web Marketing Checklist: 37 Ways to Promote Your Website. [online] Available at: http://www.practicalecommerce.com/articles/99540-checklist [Accessed 18 Aug. 2016].

Bustle.com. (2016). [online] Available at: http://www.bustle.com/articles/164714-this-was-louises-phone-digital-installation-shows-how-devastating-cyberbullying-can-be [Accessed 18 Aug. 2016].

Thestar.com.my. (2016). [online] Available at: http://www.thestar.com.my/travel/malaysia/2011/09/12/a-cry-for-help/ [Accessed 18 Aug. 2016].

Wahm.com. (2016). Website Promotion Strategies for the New Entrepreneur - WAHM.com. [online] Available at: http://www.wahm.com/articles/website-promotion-strategies-for-the-new-entrepreneur.html [Accessed 18 Aug. 2016].

Week 13 Preparation for Prospectus Draft (Part 2)

Since the submission date of the prospectus document will be on Thursday, therefore I decided to start for setting  the date which is creating a gantt chart for this final degree assignment.

Besides, I also create a site map for the prospectus document which is designed as below:

This is design for the before moodboard.

Then, I have changed  the design as below:

Ok, The other process will be continue on next day.

Week 12 Consultation with Mervin

Notes of Discussion 

Web Design

• Background of the website need to be considered.
• Make sure the bokeh look alike as bokeh but not firefly.
• The shape need to be consistent.
• Have a words to represent the timeline.

Coding

• How to combine the code together?
• Code in Greensock can move thing with one line. 

Agreed Actions 

• Research more about "Bokeh"
• Add in gradient for the background 
• Refine the web design 
• Design website using invisionapp.com 
• Look through coding in Greensock.

Week 12 Three js exploration (Part 3)

Today is the day which explore about the coding again! The challenge is to move the cube to the different position.

First of all, I have created out another cube by using the coding below:

var geometry3 = new THREE.CubeGeometry( 10, 10, 10);  
var material3 = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );

Then this coding will add in to the function init()

cubeMesh3 = new THREE.Mesh(geometry3, material3 );
cubeMesh3.position.z = -40
cubeMesh3.position.y = -20;

scene.add( cubeMesh3 );

After that, the code will add in to the function animate ()

cubeMesh3.rotation.x += 2 * deltaTime;

cubeMesh3.rotation.y += 3 * deltaTime;

Before start to move the position of the cube, I have tried to explore another coding which is tween. This is the Youtube tutorials.

var tween = new TWEEN.Tween({x: 0, y:0, rotation :0}This coding is telling that where the square will start and go.

.to ({x:400,y:0, rotation:90},2000)

This coding is telling where is wanted to be.

First, I will create a div tag to create a square with the code.

<div id="testing" style = "position:absolute; width:100px; height:100px;background :#E93336; padding :1cm;"></div>

Then, apply another code as below:

<script src="javascript/Tween.js"></script>
<script>
init();
animate();

function init (){
var testing = document.getElementById("testing");
var tween = new TWEEN.Tween({x: 0, y:0, rotation :0})
.to ({x:400,y:0, rotation:90},2000)
.onUpdate ( 

function (){
testing.style.left = this.x +"px";
}).start ();
}
function animate (){
requestAnimationFrame(animate);
TWEEN.update();
}

</script>

After apply, the square can be move from left to right.
But, I failed to add in Tween and move the cube. Therefore, I try to add in the code as below to the function animate():

cubeMesh2.position.x += 20* deltaTime;
cubeMesh3.position.y += 15 * deltaTime;

After that, the cube can MOVE!

Reference 

GreenSock. (2016). Getting Started with GSAP (GreenSock Animation Platform). [online] Available at: https://greensock.com/get-started-js [Accessed 19 Aug. 2016].

YouTube. (2016). First Look at Tween Animations for ThreeJS with JavaScript Tutorial. [online] Available at: https://www.youtube.com/watch?v=fGoAj2_xwy8 [Accessed 19 Aug. 2016].

Week 12 Web Design Refinement

The web design have changed based on the feedback from the lecturers. To make sure that the font is consistent, I have make some research at the font pairing website.

The first chosen font pair are OCR-A and Akkurat. 

Here is the website which download the font: http://fontsgeek.com/fonts/Akkurat-Regular

The second chosen font are Souvenir and Futura. 

Here is the website which download the font: http://www.myfontfree.com/souvenir-lt-bt-myfontfreecom96f31021.htm, http://www.myfontfree.com/futura-myfontfreecom64f43.htm.

Based on the research of the font pair, I have designed the first page of the website as below:

The most possible fonts that I choose for the website will be OCR-A and Akkurat because they have the geometry size and is consistent with the shape  of the love shape. 

After that I have found some quotes to apply in to the instruction of the website. The quotes is as below:

1. “Scars are not injuries,A scar is a healing. After injury, a scar is what makes you whole.” China Miéville, The Scar

2. “The wound is the place where the Light enters you.” Rumi

3. “Scars have the strange power to remind us that our past is real.” Cormac McCarthy, All the Pretty Horses

4. “Hearts are breakable," Isabelle said. "And I think even when you heal, you're never what you were before".” Cassandra Clare, City of Fallen Angels

5. “Our wounds are often the openings into the best and most beautiful part of us.” David Richo

6.  “Love is our true destiny. We do not find the meaning of life by ourselves alone - we find it with another.” Thomas Merton, Love and Living

7.  “We are like islands in the sea, separate on the surface but connected in the deep.” William James

Based on the quotes above, the two most suitable quotes have been chosen to apply in the website. 

The final outcome will be as below:

Reference

Design Roast. (2016). 7 Tools for Creating the Perfect Font Pairing - Design Roast. [online] Available at: http://designroast.org/7-tools-creating-perfect-font-pairing/ [Accessed 19 Aug. 2016].

Explorationsintypography.com. (2016). Explorations in Typography / Typeface combinations. [online] Available at: http://explorationsintypography.com/first-edition/combinations/ [Accessed 19 Aug. 2016].

Fontsgeek.com. (2016). Akkurat Regular : Download For Free, View Sample Text, Rating And More On Fontsgeek.Com. [online] Available at: http://fontsgeek.com/fonts/Akkurat-Regular [Accessed 19 Aug. 2016].

Goodreads.com. (2016). Quotes About Healing (1923 quotes). [online] Available at: http://www.goodreads.com/quotes/tag/healing [Accessed 19 Aug. 2016].

Goodreads.com. (2016). Quotes About Recovery (502 quotes). [online] Available at: http://www.goodreads.com/quotes/tag/recovery?page=2 [Accessed 19 Aug. 2016].

Goodreads.com. (2016). Quotes About Connection (368 quotes). [online] Available at: http://www.goodreads.com/quotes/tag/connection [Accessed 19 Aug. 2016].

Myfontfree.com. (2016). Download free Souvenir Lt BT font, Souvenir Lt BT.ttf, Souvenir Lt BT Light Italic free for Windows. [online] Available at: http://www.myfontfree.com/souvenir-lt-bt-myfontfreecom96f31021.htm [Accessed 19 Aug. 2016].

Myfontfree.com. (2016). Download free Avenir font, Avenir Roman.otf, Avenir Regular free for Windows. [online] Available at: http://www.myfontfree.com/avenir-myfontfreecom126f144287.htm [Accessed 19 Aug. 2016].

Week 11 Consultation With Sweii

Today, I am having consultation with Sweii about the content of the prospectus draft.

Notes of discussion

• What is textual statement?
• Target Audience 
• How to plan for the production?
• What is promotion marketing strategy?

Agreed Action

• Textual statement is the paragraph of word which explain the flow of the production 
• Focus at the most important target and analysis them deeply.
• Apply different kind of user testing.For example :Alpha test,Beta Test and etc.
• How the website been promoted? For example: share the website through global, organize an event and etc.

From those feedback, I will need to make some changes to my prospectus draft.

Week 11 Preparation for Prospectus Draft (Part 1)

Before start for the content of the prospectus draft, I have done some research for the template of the draft.

From my research, the template for a prospectus draft is as below:

• title page
• introduction 
• literature review 
• procedure 
• schedule 
• qualification and budget 
• format 
• informed content form 

Content
The term of  We Are One is defined from the meaning of "we are connected".  The objective of the website is to spread the message to the people that having depression that they are not alone. Some detail information have done before start the content for the draft.

1) How negative emotion effect people?

From the book name "The Book of Knowledge" ,every human being experience in their sleep time in the Astral World which is the plane of existence assumed by different kind of physical universe.It is the negative emotions in one's human life that effect a human being lock them self in their lives. Taking the negative emotions into the Astral world, more fears will be created and those fears can be brought back into the physical world when is awake. Thus, the experiences can create fears in one people physical life."Fear can keep us all night long ,but faith make one fine pillow" quotes by Philip Gulley. Negative emotion is a major precipitant of depression. "Depression is nourished by a lifetime of ungrieved and unforgiven hurts" by Penelope Sweet.Depressed people typically view ambiguous social interactions as negative, attribute these negative outcomes to the self, and act in accord with expectations that negative social interactions are likely and costly(Beck, 1979).Energy is very important to us because it is very common because we are being control by it all the time. Our body is an energy unit, our soul is unit of energy(Blizzard, 2014). Stress and worry is one of the things that must continuously work and prevent it. Things will not be completed if you keep worry to it and don't give action on it.Therefore, it is essential to learn to overcome the fear instead of reacting with it.

2)Why is important to be connected?

Humanity is a quality we owe to each other and human is normal to support each other when create others. Human must realize that their live is in relation with others. The behavior and moods of them affect and influence their thoughts, our emotional states and our actions.As a social beings, human cannot escape from those with whom we live and work. From another perspective, human is all connected each other by brain to brain or cell to cell. Albert Einstein has mentioned that  a human being is part of the whole world and they must free their delusion if they wanted to live in a better world with each others. 

3)The importance of social awareness 

Lack of empathy and social awareness can be very damaging to human society.Low levels social awareness will cause people feel undervalued and unappreciated.Many people are completely unaware of the importance of social awareness in their community and cause self-satisfied in the planet. A people with social unconsciousness is a person that ignore when other people is suffer. Likewise,they fail to learn what have happened around the world. Thus, people will need to learn to gain empathy and try to understand the situation of the others in suffer. Empathy can be learned and taught. With empathy, people can build a better relationships with others and have a better life in future.

To be more understand about the situation of depression,I have look through some video that describe about the depression.

Some TED talk video that describe how a depressed people feel.

Reference

Axe, D. (2016). The Importance of Social Consciousness in an Age of Declining Democracy. [online] Truthout. Available at: http://www.truth-out.org/speakout/item/28747-the-importance-of-social-consciousness-in-an-age-of-declining-democracy [Accessed 10 Aug. 2016].

Beck, A. (1979). Cognitive therapy of depression. New York: Guilford Press.

Gloster-Smith, J. (2013). Lack of empathy and social awareness can be very damaging. [online] John Gloster-Smith. Available at: http://www.johnglostersmith.com/lack-of-empathy-and-social-awareness-can-be-very-damaging/ [Accessed 10 Aug. 2016].

Google Books. (2016). The Empowered Life and Your Connection to the Soul-Self + Part 2 (Journey Series). [online] Available at: https://books.google.com.my/books?id=2Nt_BAAAQBAJ&pg=PT210&dq=Why+human+will+feel+negative%3F&hl=en&sa=X&redir_esc=y#v=twopage&q=negative%20emotion%20&f=false [Accessed 10 Aug. 2016].

Google Books. (2016). The Book of Knowledge. [online] Available at: https://books.google.com.my/books?id=Za4dBQAAQBAJ&pg=PA146&dq=Why+human+will+feel+negative%3F&hl=en&sa=X&redir_esc=y#v=onepage&q=Why%20human%20will%20feel%20negative%3F&f=false [Accessed 10 Aug. 2016].

Google Books. (2016). I WANT TO BE A.L.I.V.E. PART II: Overcoming Negative Emotions. [online] Available at: https://books.google.com.my/books?id=fIgyAgAAQBAJ&pg=PA80&dq=Depression+causing+negative+emotion%3F&hl=en&sa=X&redir_esc=y#v=onepage&q=depression%20&f=false [Accessed 10 Aug. 2016].

PA TIMES Online. (2013). We Are All Connected. [online] Available at: http://patimes.org/connected/ [Accessed 10 Aug. 2016].


Psychology Today. (2016). The Dangers of Loneliness. [online] Available at: https://www.psychologytoday.com/articles/200307/the-dangers-loneliness [Accessed 10 Aug. 2016].


Purposefairy.com. (2016). The Value and Importance of Human Connection. [online] Available at: http://www.purposefairy.com/73654/the-value-and-importance-of-human-connection/ [Accessed 10 Aug. 2016].

Profusionmag.co.za. (2016). The importance of Social Awareness | Profusion Magazine. [online] Available at: http://profusionmag.co.za/freedom-day-the-importance-of-social-awareness/ [Accessed 10 Aug. 2016].

Web.sbs.arizona.edu. (2016). Depression, Poor Social Skills Are Linked | College of Social and Behavioral Sciences. [online] Available at: https://web.sbs.arizona.edu/news/depression-poor-social-skills-are-linked [Accessed 10 Aug. 2016].

Webpages.uidaho.edu. (2016). Page Not Found - University of Idaho. [online] Available at: http://www.webpages.uidaho.edu/ [Accessed 3 Aug. 2016].