Web Design & New Media - Final Project

31/10/2017 (Week 9)
Liam Yue Wei (0327686)
Web Design & New Media
Final Project

Lecture

-No lecture-

Instruction

You’re required to create an interactive storytelling Website that to inform a specific target audience on a given topic. The target audience is for children between 6-12 years old.

You may use images and video from the internet or you can illustrate to make the content even more interesting. Below are the content that you need to include in the Website. You need to create a storyboard/site structure so that it is easier for you to plan the page and the flow of the Website. You may include sounds or use Adobe Animate to have a whole new experience of interactive Website.

What to do in a fire (This will be the title of the Website)

Introduction

Fire drills are a big part of being safe in school: They prepare you for what you need to do in case of a fire. But what if there was a fire where you live? Would you know what to do? Talking about fires can be scary because no one likes to think about people getting hurt or their things getting burned. But you can feel less worried if you are prepared.

It's a good idea for families to talk about what they would do to escape a fire. Different families will have different strategies. Some kids live in one-story houses and other kids live in tall buildings. You'll want to talk about escape plans and escape routes, so let's start there.

Know Your Way Out

An escape plan can help every member of a family get out of a burning house. The idea is to get outside quickly and safely. Smoke from a fire can make it hard to see where things are, so it's important to learn and remember the different ways out of your home. How many exits are there? How do you get to them from your room? It's a good idea to have your family draw a map of the escape plan.

It's possible one way out could be blocked by fire or smoke, so you'll want to know where other ones are. And if you live in an apartment building, you'll want to know the best way to the stairwell or other emergency exits.

Safety Steps

If you're in a room with the door closed when the fire breaks out, you need to take a few extra steps:

Check to see if there's heat or smoke coming in the cracks around the door. (You're checking to see if there's fire on the other side.)
If you see smoke coming under the door — don't open the door!
If you don't see smoke — touch the door. If the door is hot or very warm — don't open the door!
If you don't see smoke — and the door is not hot — then use your fingers to lightly touch the doorknob. If the doorknob is hot or very warm — don't open the door!

If the doorknob feels cool, and you can't see any smoke around the door, you can open the door very carefully and slowly. When you open the door, if you feel a burst of heat or smoke pours into the room, quickly shut the door and make sure it is really closed. If there's no smoke or heat when you open the door, go toward your escape route exit.

Stay Low

If you can see smoke in the house, stay low to the ground as you make your way to the exit. In a fire, smoke and poisonous air hurt more people than the actual flames do. You'll breathe less smoke if you stay close to the ground.

Smoke naturally rises, so if there is smoke while you're using your escape route, staying low means you can crawl under most of it. You can drop to the floor and crawl on your hands and knees below the smoke.

Exiting through a door that leads outside should be your first choice as an escape route, but also ask your parents about windows and if they would be possible escape routes. Even windows on a higher floor could be safe escape routes if you had help, like from a firefighter or another adult.

Ask your parents to teach you how to unlock the windows, open them, and remove the screen, if needed. Make sure you only do this in an emergency! Lots of kids are injured because they fall out of windows.

Sometimes, families even have collapsible rescue ladders that can be used to escape from upper floors of a house. If you have one, ask your mom or dad to show you how it works.

In addition to planning your escape routes, you'll also want to know where family members will meet outside. This is helpful because then everyone shows up in one place and you'll know that everyone is safe. You might choose the front porch of a neighbor's house or some other nearby spot.

It's normal to worry about your pets or a favorite toy, but if there is a fire, you have to leave them behind. The most important thing is that you get out safely. It's also important to know that you shouldn't stay in the house any longer than you must — not even to call 911. Someone else can make that call from outside.

Once you're out, do not go back in for anything — even pets. You can tell the fire rescue people about any pets that were left behind and they may be able to help.

What if You Can't Get Out Right Away?

If you can't get out fast, because fire or smoke is blocking an escape route, you'll want to yell for help. You can do this from an open window or call 911 if you have a phone with you.

Even if you're scared, never hide under the bed or in a closet. Then, firefighters will have a hard time finding you. Know that firefighters or other adults will be looking for you to help you out safely. The sooner they find you, the sooner you both can get out.

In the meanwhile, keep heat and smoke from getting through the door by blocking the cracks around the door with sheets, blankets, and/or clothing. If there is a window in the room that is not possible to escape from, open it wide and stand in front of it. If you can grab a piece of clothing or a towel, place it over your mouth to keep from breathing in the smoke. This works even better if you wet the cloth first.

Home Drills

It's great to talk about emergency plans, but it's even better if you practice them, like the fire drills you have at school. Having a fire drill at home gives everyone a chance to see how they would react in a real emergency. You can see how quickly and safely everyone can get out of the house. Your family should practice this drill twice a year, every year. It's also a good time to remind your parents to change the batteries in the smoke alarms.

A good rule of thumb during a home fire drill is to see if your family can safely get out the house using the escape routes and meet outside at the same place within 3 minutes. For an extra challenge, you might try variations, like pretending that the front door was blocked and you couldn't get out that way.

If Your Clothes Catch Fire

A person's clothes could catch fire during a fire or by accident, like if you step too close to a candle. If this happens, don't run! Instead, stop, drop to the ground, cover your face with your hands, and roll. This will cut off the air and put out the flames. An easy way to remember this is: Stop, Drop, and Roll!

Preventing Fires

Every year, kids of all ages start over 35,000 fires that hurt people and damage property. You can do your part to prevent fires by never playing with matches, lighters, and other fire sources. Also stay away from fireplaces, candles, and stoves.

Tutorial

Week 9

When I started to plan for this project, I tried to understand the summary of what information I need to include when I do the website for 6 - 12 years old kids. Then, I decided to do parallax website, where it can be easy for children to use it, by just scrolling to see all the contents of the website. Also, the kids won't need to try to figure out which part to click just to see what they want to see. With the simple illustration and the interactive part, the children will find it easier to access and understand, they will also find it more entertaining depends on how I illustrate and make the whole thing look more interesting.

My reference:
http://zoomanity.land/en/
http://tomerlerner.com/web/scroll/index.html
http://olszanska.pl/#page-technika

Pinterest:
https://www.pinterest.com/bliam0636/parallax-web-design-for-kids/

Concept/ Moodboard

Instead of fancy design of the website, I decided that I want to make a website which it is easy to access and understand, so it most probably will be something simple, minimal and stuffs.

My Font Choices

Color Scheme

Color Scheme from Disney reference

Character Art Style Development:

Page 1

Page 2

Page 3

Page 4

Week 10

Color scheme that I chose.

Week 11

I have completed my prototype in Adobe Illustrator. Also, I initially chose Kavoon as my header font and Source Sans Pro as my another font. But I have changed the header font to 'The Luckiest Guy' as it looks more interesting for kids to read. I also designed my own navigation buttons so that I can use it in Adobe Muse later on.

Homepage

Introduction

First part

Second part

Third part

Fourth part

Fifth part

Sixth part

7th part

More graphics

More Graphics - Part 2

More graphics - Part 3

Week 12

Now that I have my final prototype and graphics ready, I started doing the website in Adobe Muse. Since I want to do parallax scrolling, I figured that I should be putting everything in just one page. The width of the website is 960px, but the height of the website can be as long as my content goes.

Week 13

Within this week, I have done the basic layout in Adobe Muse CC. I put in all the graphics I have, the basic background colors in each section and also the texts in the website. But using a new software needs some time for me to learn as I still do not know the way to add in the buttons like I want to. I also have no idea how to make some minimal animations in this website yet.

Week 14

I have done animating the graphics like Mr.Shamsul asked me to. I have also done the buttons in Adobe Illustrator, I exported it to Adobe Photoshop so that I can use them as 'photoshop button' which I can do it in File > Place Photoshop Buttons, in Adobe Muse. However, things did not work out as I found it hard to arrange the normal, rollover and active buttons of each graphics I have there.

Week 15

I changed the heights of some of the section as some are not suitable, and I find it weird if I stick to the same height when some sections need longer ones. I also managed to fix the buttons to make the navigation work. Like Mr.Shamsul suggested, I added text alongside my graphics. To do that, I went to my Adobe Photoshop file of my buttons. I merge the layers together to and renamed each of them as 'normal', 'rollover', and 'active'. This is just so that it is more convenient when I place the buttons in Adobe Muse as they automatically select the correct one to be rollover, active or normal if I name it properly. I also added the text in the Photoshop, beside my graphic so that they are together in Adobe Muse. After fixing my navigation, I added transitions in Adobe Muse by drawing the shape of fire in Adobe Illustrator before I exported them to SVG file.

Submission
Google Drive link : https://drive.google.com/open?id=